5 Amazing Flutter Widgets You Should Learn

flutter widgets

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


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.



flutter shadermask



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.



flutter wheel list



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.





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.



progress indicator



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.



flutter snackbar


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


Written by Hilal Ahmad

Leave a Reply

Your email address will not be published. Required fields are marked *