Please Make Sure You Know These 5 Flutter Widgets

Flutter Knowledge Sharing #27

Published in

Geek Culture

5 min readMay 9, 2021

Flutter is built on widgets. If you wish to be excellent in Flutter, you need complete knowledge about widgets obviously. The entire application can interpret as a widget tree in Flutter. As a software engineer on a programmer, you need to update with these things every day. Then, I hope this series of Flutter stories will help you to be a good Flutter developer. Flutter is not only for mobile development, It’s now a multi-platform supported language. However these widgets you can use with your Android applications. For your better understanding, I have provided a sample code with its output.

Widgets, Widgets, Widgets?

SnackBar
ListWheelScrollView
ShaderMask
ClipPath
CircularProgressIndicator and LinearProgressIndicator

Let us discuss this one by one with examples and someones with the functionality. I hope you will get an idea about these widgets.

SnackBar

Ever wanted to pop up a quick message in your app when something happens?. Use a SnackBar. Using SnackBar lets you pop up a message for a few seconds at the bottom of your app. Creating a SnackBar is easy. Simply give SnackBar a widget to display. And it doesn't just have to be text. The SnackBar is must use with the Scaffold. Use the showsnackBar() function with a Scaffold instance.

final snackBar = SnackBar(
  content: Text('This is a SnackBar message.'),
  duration: Duration(seconds: 5),
  action: SnackBarAction(
    onPressed: () {
      // Some code to undo the change.
    }, label: "message",
  ),
);
Scaffold.of(context).showSnackBar(snackBar);

ListWheelScrollView

Listviews are using to display a number of items. Sometimes an ordinary listview is too flat and boring. At that time, we can use ListWheelScrollView the totally change the view of the traditional text view. This widget renders your list as if the items were placed on a cylinder in 3D. Instead of scrolling a flat surface, the user is turning a wheel. Using this widget is almost easy as another listview. Just provide the items as children and the itemExtent. The itemExtent specifies the pixel height of each item. ListWheelScrollView has many other options.

ListWheelScrollView(
  itemExtent: 100,
  children: <Widget>[
    Container(
      color: Colors.black12,
      alignment: Alignment.center,
      child: Text("Item 1",textAlign:TextAlign.start,
        style:TextStyle(color:Colors.deepPurple,fontWeight: FontWeight.bold,fontSize: 25),),) ,
    Container(
      color: Colors.black12,
      alignment: Alignment.center,
      child: Text("Item 2",textAlign:TextAlign.center,
        style:TextStyle(color:Colors.deepPurple,fontWeight: FontWeight.bold,fontSize: 25),),) ,
    Container(
      color: Colors.black12,
      alignment: Alignment.center,
      child: Text("Item 3",textAlign:TextAlign.center,
        style:TextStyle(color:Colors.deepPurple,fontWeight: FontWeight.bold,fontSize: 25),),) ,
    Container(
      color: Colors.black12,
      alignment: Alignment.center,
      child: Text("Item 4",textAlign:TextAlign.center,
        style:TextStyle(color:Colors.deepPurple,fontWeight: FontWeight.bold,fontSize: 25),),) ,
    Container(
      color: Colors.black12,
      alignment: Alignment.center,
      child: Text("Item 5",textAlign:TextAlign.center,
        style:TextStyle(color:Colors.deepPurple,fontWeight: FontWeight.bold,fontSize: 25),),) ,
    Container(
      color: Colors.black12,
      alignment: Alignment.center,
      child: Text("Item 6",textAlign:TextAlign.center,
        style:TextStyle(color:Colors.deepPurple,fontWeight: FontWeight.bold,fontSize: 25),),) ,
    Container(
      color: Colors.black12,
      alignment: Alignment.center,
      child: Text("Item 7",textAlign:TextAlign.center,
        style:TextStyle(color:Colors.deepPurple,fontWeight: FontWeight.bold,fontSize: 25),),) ,
    Container(
      color: Colors.black12,
      alignment: Alignment.center,
      child: Text("Item 8",textAlign:TextAlign.center,
        style:TextStyle(color:Colors.deepPurple,fontWeight: FontWeight.bold,fontSize: 25),),) ,
  ],
),

Image: ListWheelScrollView widget example.

ShaderMask

ShaderMasks let you apply a shader to one or more widgets in the tree. Shaders are very flexible. In Flutter we can use to apply gradients to widgets. We also use them to apply images. To apply the shader to a widget, you need to wrap the widget in a ShaderMask. Flutter’s gradient classes have a createShader method to create shaders.

ShaderMask(
  blendMode: BlendMode.srcIn,
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.blue, Colors.red],
      tileMode: TileMode.mirror,
    ).createShader(bounds);
  },
  child: const Text('ShaderMask widget Tutorial', style: TextStyle(fontSize: 24)),
),

ClipPath

ClipPath gives a unique shape to your widget. 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. 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, 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.

ClipPath(
  child: Container(
    width: MediaQuery.of(context).size.width,
    height: 200,
    color: Colors.blue,
  ),
  clipper: CustomClipPath(),
)class CustomClipPath extends CustomClipper<Path> {
  var radius=10.0;
  @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;
}

CircularProgressIndicator & LinearProgressIndicator

Do you want to show that your material app is making progress or working on something?. We have got a widget for that. If you want to indicate the progress in a roundabout fashion and LinearProgressIndicator if you like lines. The APIs are almost identical. Both progress indicators have determinate and indeterminate forms. Use the determinate version, If you want to indicate the actual amount of progress that the app is making on a task. Use the indeterminate version, if you just want to show that the app is working on the task without making any sense of the progress. You can change the colour using valueColor parameter. This colour can be animated using multi colours. For a determinant progress bar or circle, set the value parameter to indicate the fraction of completion. Depending on your situation, you may need to call setState to rebuild with the updated value. strokeWidth is the only unique parameter of the CircularProgressIndicator. It makes your progress indicator skinnier or fatter.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    CircularProgressIndicator(
      strokeWidth: 5,
      backgroundColor: Colors.blue,
      valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
    ),
    Container(
      height: 50,
    ),
    Container(
      padding: EdgeInsets.all(5.0),
      height: 20,
      child: LinearProgressIndicator(
        backgroundColor: Colors.blue,
        valueColor: AlwaysStoppedAnimation(Colors.red),
        minHeight: 10,
      ),
    ),

  ],
),

Image: CircularProgressIndicator & LinearProgressIndicator widget example

Conclusion

This is the fifth story about flutter widgets. Up to now, I have discussed 50 Flutter widgets.

This story gives you the knowledge, another ten Flutter widgets you should know. I hope you will use those in your next Flutter project. Please feel free to ask any question you will face in the response section below.
Happy Coding !!!!
Found this post useful? Kindly tap the 👏 button below! :)