15. Learn how to use Flutter’s advanced features
SingleChildScrollView and ListView are two widgets in Flutter used to create scrolls.
SingleChildScrollView is a scrolling widget used to display a single child widget, it allows scrolling content horizontally or vertically. For example, you can use SingleChildScrollView to create a scroll containing a TextField or a Column containing various child widgets.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | SingleChildScrollView( child: Column( children: <Widget>[ TextField( decoration: InputDecoration( hintText: 'Enter some text', ), ), Container( padding: EdgeInsets.all(10), child: Text('This is the content of the ScrollView'), ), Container( padding: EdgeInsets.all(10), child: Text('You can scroll through this content'), ), Container( padding: EdgeInsets.all(10), child: Text('Vertically or Horizontally'), ), ], ), ) |
Properties that can be used to adjust the scrolling behavior of the SingleChildScrollView include:
physics: adjust the scrolling behavior, you can use values like AlwaysScrollableScrollPhysics to allow scrolling even though the content is not long enough, or BouncingScrollPhysics to allow scrolling with a jet effect.
controller: controls scrolling with code, allows you to work with the current scroll position, automatically scroll to a certain position or listen for scroll position changes
reverse: defines the scroll direction, can be set to true to scroll from the bottom or false to scroll from the top.
primary: defines the primary scroll, which you can use to specify the primary scroll in case you have multiple scrolls in one screen.
padding: specifies the distance between the scroll surface and the content.
For example, to enable horizontal scrolling and automatically scroll to the last position of the content when it is loaded:
1 2 3 4 5 6 7 8 9 10 11 12 13 | SingleChildScrollView( scrollDirection: Axis.horizontal, physics: AlwaysScrollableScrollPhysics(), child: Column( children: <Widget>[ TextField(...), ... ], ), controller: ScrollController(keepScrollOffset: false), ) |
Thus, the way to use SingleChildScrollView and its properties to create scrolls in Flutter applications is very diverse and flexible, depending on your requirements and purposes. you can try using SingleChildScrollView with different sub-widgets, for example Image, Card or ListTile, to make scrolls with a nicer look and with different options.
You can also use SingleChildScrollView in conjunction with widgets like SliverAppBar and SliverList to create smoother and more customizable scrolling effects.
I recommend you learn and try using other scrolling widgets in Flutter like ListView, GridView or CustomScrollView to create scrolls with different options and behaviors.
ListView is a scrolling widget used to display a list of child widgets. It allows scrolling content vertically. You can use ListView to create a list of items, such as a list of products or news.
1 2 3 4 5 6 7 8 9 | ListView( children: <Widget>[ ListTile(title: Text('Item 1')), ListTile(title: Text('Item 2')), ... ], ) |
Both SingleChildScrollView and ListView can use physics to adjust scrolling behavior, for example allowing scrolling or disallowing horizontal scrolling. The controller can also be used to control scrolling with code.
Use the flutter_localizations package to support locale and language in your application.
Use InheritedWidget to manage state and pass data between child widgets.
Example of using InheritedWidget to manage application state:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | class MyInheritedWidget extends InheritedWidget { final String data; MyInheritedWidget({ Key key, @required Widget child, this.data, }) : super(key: key, child: child); @override bool updateShouldNotify(MyInheritedWidget oldWidget) { return data != oldWidget.data; } static MyInheritedWidget of(BuildContext context) { return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>(); } } |
In the above example, we create a class MyInheritedWidget that inherits from InheritedWidget and contains a data attribute data.
The updateShouldNotify function is called every time the data changes and if true the builder of all InheritedWidgets will call again.
The of function allows you to access the data property in any location of the widget tree.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return MyInheritedWidget( data: 'Hello World', child: Scaffold( body: Center( child: Text(MyInheritedWidget.of(context).data), ), ), ); } } |
In this example, we use MyInheritedWidget to manage Hello World data and use MyInheritedWidget.of(context).data to access data in MyHomePage page.
InheritedWidget is a good approach to manage global state in your Flutter application. It allows you to share data between widgets without using global variables or GlobalKeys. InheritedWidget also makes state management easier and reduces the amount of setState() required.
However, note that using InheritedWidget can cause some performance problems if used incorrectly. So make sure you only use InheritedWidget if necessary and use it efficiently.
Use Animation to create motion effects and AnimatedBuilder to create custom motion widgets.
Example of using Animation:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | class FadeAnimation extends StatelessWidget { final double delay; final Widget child; FadeAnimation({this.delay, this.child}); @override Widget build(BuildContext context) { final tween = MultiTrackTween([ Track("opacity") .add(Duration(milliseconds: 500), Tween(begin: 0.0, end: 1.0)), Track("translateX").add( Duration(milliseconds: 500), Tween(begin: -30.0, end: 0.0), curve: Curves.easeOut) ]); return ControlledAnimation( delay: Duration(milliseconds: (500 * delay).round()), duration: tween.duration, tween: tween, child: child, builderWithChild: (context, child, animation) => Opacity( opacity: animation["opacity"], child: Transform.translate( offset: Offset(animation["translateX"], 0), child: child), ), ); } } |
You can use it as follows:
1 2 3 4 5 6 | FadeAnimation( delay: 1, child: Text("Hello World"), ) |
In addition, there are many other Animations such as: ScaleAnimation, RotationAnimation, SizeAnimation…
Animations with AnimatedBuilder make it easier to customize the interface and create animation effects. The packages of Flutter’s library provide many different animations with different uses giving you many options.
Use StreamBuilder to monitor and display data from data streams.
Example of using StreamBuilder to display data from a data stream:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { final Stream<int> _counterStream = Stream.periodic(Duration(seconds: 1), (i) => i).take(10); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: StreamBuilder<int>( stream: _counterStream, initialData: 0, builder: (context, snapshot) { return Text('You hit me: ${snapshot.data} times'); }, ), ), ); } } |
In the above example, StreamBuilder will monitor the _counterStream data stream and use the latest data to update the interface. The values in the stream are int and will increment every second.
Note that StreamBuilder needs an initialData value to render before receiving data from the stream. builder is a callback function, it will be called every time there is new data from the stream and update the interface accordingly.
Using StreamBuilder allows you to monitor data from the stream and update the interface easily without having to manage state or work with setState.