Flutter Projects With Dart

My everyday Flutter practice demos with Dart.

---

26. MVC in Flutter(Test)

Date: 2018-8-18

Tips:

• Try the MVC framework in Flutter with Dart(Bad practice, I think.)
• Use the ClipRect and Transform to build a simple 3D-like animation widget, and with Offstage, RichText ect
• Test custom gestures in Flutter

---

25. Simple Flutter Game (Failure)

Date: 2018-7-21

The BUGS in the project not fixed till now...

Tips:

• Use Flame library in Flutter for game development
• With Sprite, Animation, Texture, and Collision in Box2D components
• Other stuffs: keep screen on, music play, device orientation and ect

PS: The game is failed for some reasons, include my development knowledge and the mature of the game framework, even thought, you can have a try!

---

24. Flutter Test

Date: 2018-7-12

Tips:

• Basic unit test in Flutter: group, test and expect
• Mock object test in Flutter with mockito library: Mock, verify, when and matchers
• Flutter Widget test with flutter_test package: testWidgets, pumpWidget and find
• Try the simplest Flutter Driver test and output result in Flutter

PS: Use driver test must follow this command in Terminal, no shortcut in IDEA:

# open simulator before running the test
flutter drive --target=./test_driver/integration_widget.dart
# not this file: integration_widget_test.dart

---

23. Reactive Text Search And Image Picker

Date: 2018-7-9

Tips:

• Search text in Database with filters and distinct use RxDart library
• Select images with ImagePicker library and decode image with Image library
• Edit mode in text filed in forms
• I tried Flutter Widget Test in my project, it is sweet! :)

PS: The Image library works incorrectly and cannot compress my images, why?

---

22. App With Persistent Data 2

Date: 2018-6-27

Tips:

• Navigate to another page, and get the result value while the page pops, use Future and fluro
• Change the data class to more helper one, with the help of Map in Flutter
• Use crypto package to encrypt password to secure strings and save to database

PS: When I compile my app, an error encountered as below:

compiler message: lib/pages/page_home.dart:71:59: Error: A value of type '#lib1::User' can't be assigned to a variable of type '#lib2::User'.
compiler message: Try changing the type of the left hand side, or casting the right hand side to '#lib2::User'.
Finished with error: FormatException: Bad UTF-8 encoding 0x3f (at offset 306)

And at last I figured it out, in my imports:

//before:
import 'package:project_login_with_database/widgets/widget_login.dart';
import 'package:project_login_with_database/widgets/widget_register.dart';
import '../navigation.dart';
import '../widgets/widget_loader.dart';
//...

//after:
import '../widgets/widget_login.dart';
import '../widgets/widget_register.dart';
import '../navigation.dart';
import '../widgets/widget_loader.dart';
//...

---

21. Persistent Data Store

Date: 2018-6-17

Tips:

• Use Shared Preferences with shared_preferences package, SQLite database with sqflite, and files with path_provider
• Simple factory constructor in dart class, CURD operations with database, read and save data with shared preferences
• Try the Terminal with adb shell commands: su root, sqlite3 ect

PS: use this command for root permissions in Flutter terminal: su root

---

20. Sliver Widgets

Date: 2018-6-7

Tips:

• Sliver widgets and parts in CustomScrollView: BouncingScrollPhysics, SliverAppBar, SliverList and SliverGrid
• Use ScrollController in scroll view to control the appearance of app bar
• Actions in app bar, use popup menus, and displays colors with shader

---

19. Firebase Basic (Without Test)

Date: 2018-6-2

Tips:

• Basic Firebase platform in Flutter, fetch data and save data via transition with cloud_firestore dependency
• ValueKey to identify list tiles, and build widget with StreamBuilder

PS: this app cannot work correctly in China for the blocking-network of Google service.

---

18. Backdrop

Date: 2018-5-31

Tips:

• Use AnimatedIcon in IconButton with animation controller to build animated icon
• Build animated widget with FadeTransition, PositionedTransition and ReverseAnimation

Still don't understand the value of top, bottom in RelativeRect.fromLTRB, while work with RelativeRectTween, though it behaviors all right.

---

17. Rich Text Controls

Date: 2018-5-25

Tips:

• Try a lot of new widgets: OutlineButton, SafeArea, SingleChildScrollView, AnimatedIcon, PositionedTransition, IconButton
• Build rich text controls with Form, TextFormField, and InputDecoration with UnderlineInputBorder, OutlineInputBorder
• Make simple Backdrop widget with Stack and animations, build tabs with custom ShapeDecoration indicators

Resource: Flutter gallery

---

16. Reveal Button

Date: 2018-5-21

Tips:

• Create a reveal transition widget with CustomPainter, CustomPaint, get screen size with MediaQuery
• Override deactivate method to reset the state of widget
• Use fluro package to navigate pages in Flutter

Resource: fluro

---

15. Stop Watch

Date: 2018-5-17

Tips:

• Build a stop watch in Dart with StopWatch, start, stop, and record
• Use Timer to trigger rendering in Flutter

---

14. Tabs in Tabs

Date: 2018-5-11

Tips:

• Build tab bar views in another Main Tab Bar with separated TabController
• Add change listener to tab controller to switch tab content

---

13. Simple Drawer

Date: 2018-5-10

Tips:

• Use Drawer and UserAccountsDrawerHeader, ListTile to make material component drawer
• Exit app with simple dialog and the function exit(0) from library dart:io
• Now the code is fully switched to Dart 2.0

---

12. Animated Progress Button

Date: 2018-5-8

Tips:

• Use PhysicalModel and other base components to make new widget
• Set width of widget to double.infinity and get the real measurement with context
• Make animated progress indicator with CircularProgressIndicator and AlwaysStoppedAnimation<Color>

Resource: Flutter Progress Button Animation

---

11. Custom Painter

Date: 2018-5-2

Tips:

• Use Canvas in custom painter in Flutter
• Use Offset, Paint and other graphics method to draw the component
• Animations in drawing canvas with AnimationController

---

10. Charts In Flutter

Date: 2018-4-26

Tips:

• Import library, set the name to avoid the conflict for the same class name
• Use charts library in Flutter to build bar and pie chart

Resource: charts gallery and code

---

9. The Carousel

Date: 2018-4-25

Tips:

• The Expanded in Column is used to restrain the width of the child
• Use image assets in Flutter, which are specified in the pubspec.yaml file

---

8. Simple Navigator

Date: 2018-4-24

Tips:

• Navigator from home page to other pages with Navigator and MaterialPageRoute
• Show dialog and get the response value of dialog in Flutter with SimpleDialog and SimpleDialogOption
• Notice: You cannot directly change the state of controls in dialog, so I create a new class extends StatefulWidget as the dialog state widget

Resource: Flutter - Radio Animation is not showing up on showDialog Document that showDialog creates now context and that setState on the calling widget therefore won't affect the dialog

---

7. Friendly Chat

Date: 2018-3-24

Tips:

• Use Flexible and Expanded, SizeTransition to build the layout and animations
• Use TextField and TextEditingController to deal with text inputs
• Divider, array list, default parameter in Flutter with Dart

Resource: https://codelabs.developers.google.com/codelabs/flutter/

---

6. Basic Animation

Date: 2018-3-19

Tips:

• Use AnimationController and CurvedAnimation, Tween to start animations in Flutter
• Manually do animation with addListener and auto animate widgets with addStatusListener
• The widget Opacity used to control the appearance of child widget

---

5. List View With NetworkImage

Date: 2018-3-16

Tips:

• Use ListView.builder to build list view item with specified index
• Set NetworkImage as backgroundImage of CircleAvatar to display circular images
• Load data from network, and parse response content to json data

---

4. Simple List View

Date: 2018-3-15

Tips:

• Import dart:math library to use Random function
• Basic ListView with the list of ListTile as children, and set controller: ScrollController
• Create StatefulWidget to response widget actions, and use GlobalKey to show/hide SnackBar

---

3. Simple TabBar View

Date: 2018-3-12

Tips:

• Use DefaultTabController as root with TabBar in the bottom of AppBar and TabBarView to build tabbed view
• Map the data list to get the widget list for the children of container
• Simple class in Dart with final properties

---

2. Basic Widgets In Flutter

Date: 2018-3-9

Tips:

• Many buttons, use Icons, styles, Flutter Logo, and so on
• Some layouts, menus, drop down items, and test the simple gesture detectors
• Text field, trigger the simple dialog, alert dialog and so on

---

1. Hello World Flutter

Date: 2018-3-8

Tips:

• Basic material app themed with ThemeData use built-in MaterialApp widget
• Use Center and Padding, Column to build layout
• Add MaterialButton control, set onPressed to change the state of widgets