Flutter is all about widgets. If you wish to be excellent in Flutter, you need complete knowledge about flutter widgets obviously.
The entire application can interpret as a widget tree in Flutter.
In this post you will learn 5 amazing flutter widgets and however these widgets you can use with your Android applications.
For your better understanding, I have provided a sample code with its output.
Let’s discuss these widgets one by one with examples.
- ShaderMask
- ListWheelScrollView
- ClipPath
- CircularProgressIndicator and LinearProgressIndicator
- SnackBar
ShaderMask
In flutter we use ShaderMask to apply gradient to widgets and we can also use it to apply images,
below code show you how you can apply gradient to Text widget using ShaderMask.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
ShaderMask( blendMode: BlendMode.srcIn, shaderCallback: (Rect bounds) { return LinearGradient( colors: [Colors.teal, Colors.deepOrange], tileMode: TileMode.mirror, ).createShader(bounds); }, child: const Text( 'This is ShaderMask Text', style: TextStyle(fontSize: 30), ), ), |
Output:
ListWheelScrollView
You can ListWheelScrollView to build a ListView with 3D look in your flutter application.
Below is the example code for ListWheelScrollView and you can use its different properties to customize it as per
your requirement like diameter, magnification and make of off-set.
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
ListWheelScrollView( itemExtent: 100, children: <Widget>[ Container( color: Colors.teal, alignment: Alignment.center, child: Text( "List Item 1", textAlign: TextAlign.start, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 30), ), ), Container( color: Colors.teal, alignment: Alignment.center, child: Text( "List Item 2", textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 30), ), ), Container( color: Colors.teal, alignment: Alignment.center, child: Text( "List Item 3", textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 30), ), ), Container( color: Colors.teal, alignment: Alignment.center, child: Text( "List Item 4", textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 30), ), ), Container( color: Colors.teal, alignment: Alignment.center, child: Text( "List Item 5", textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 30), ), ), Container( color: Colors.teal, alignment: Alignment.center, child: Text( "List Item 6", textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 30), ), ), Container( color: Colors.teal, alignment: Alignment.center, child: Text( "List Item 7", textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 30), ), ), Container( color: Colors.teal, alignment: Alignment.center, child: Text( "List Item 8", textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 30), ), ), ], ), |
Output:
ClipPath
ClipPath gives a unique shape to your widget and you can define your own shape using any arbitrary path by wrapping your widget in a ClipPath.
clipper is the primary property of the ClipPath which will define the path and You need to extend the customClipper<path> widget to create one.
Then override the getClip is where the new path is forged. Whether it is a star, curved or completely random.
You also need to override shouldReclip and it will return a false by default. The result is a widget that’s been clipped to only the points contained within the path. You can see an example below.
|
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 32 33 34 35 36 37 38 39 40 41 42 43 |
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter Widgets'), ), body: Builder( builder: (context) => Center( child: ClipPath( child: Container( width: MediaQuery.of(context).size.width, height: 300, color: Colors.teal, ), clipper: CustomClipPath(), ), ), )), ); } } class CustomClipPath extends CustomClipper<Path> { @override Path getClip(Size size) { Path path = Path(); path.lineTo(0, size.height); path.arcToPoint( Offset(size.width, size.height), radius: Radius.elliptical(30, 10), ); path.lineTo(size.width, 0); return path; } @override bool shouldReclip(CustomClipper<Path> oldClipper) => false; } |
Output:
CircularProgressIndicator & LinearProgressIndicator
If you want to show your flutter app is making process or working on something then you can use the ProgressIndicator and we have
2 types of indicator in flutter Circular and Linear, so its totally up to you which one you want to use in your application.
In example code I implemented both and as you can see in the code you can change the of your ProgressIndicator using backgroundColor and valueColor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
Column( mainAxisAlignment: MainAxisAlignment.center, children: [ CircularProgressIndicator( strokeWidth: 5, backgroundColor: Colors.teal, valueColor: new AlwaysStoppedAnimation<Color>(Colors.deepOrange), ), Container( height: 50, ), Container( padding: EdgeInsets.all(5.0), height: 20, child: LinearProgressIndicator( backgroundColor: Colors.teal, valueColor: AlwaysStoppedAnimation(Colors.deepOrange), minHeight: 10, ), ), ], ), |
Output:
SnackBar
You are required to notify user with short message, so you can use SnackBar. Snackbar let you popup a message at the bottom of screen
for a few seconds and then disappear. Below is the implementation of SnackBar in flutter.
|
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 32 33 34 35 36 37 38 |
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); void showSnackBar(BuildContext context) { final snackBar = SnackBar( content: Text('No internet connection!'), action: SnackBarAction( onPressed: () { // Some code to undo the change. }, label: "Retry", ), ); ScaffoldMessenger.of(context).showSnackBar(snackBar); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter Widgets'), ), body: Builder( builder: (context) => Center( child: MaterialButton( child: Text('Show Snackbar'), color: Colors.blue, textColor: Colors.white, onPressed: () { showSnackBar(context); }, ), ), ), ), ); } } |
Output:
So this is the end of this post, I hope it is useful for you awesome programmers and if there is any confusion then ask me in comment section.
You might be interested in How to customize SnackBar in Flutter
