Please Make Sure You Know These 5 Flutter Widgets

Flutter Knowledge Sharing #27

Geno Tech
Geno Tech
May 9 · 5 min read

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?

  1. SnackBar
  2. ListWheelScrollView
  3. ShaderMask
  4. ClipPath
  5. 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);
Image: SnackBar widget example

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)),
),
Image: ShaderMask widget example

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;
}
Image: ClipPath widget example

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.

  1. https://medium.com/app-dev-community/these-10-flutter-widgets-every-developer-should-know-d75967789dab
  2. https://medium.com/app-dev-community/these-10-flutter-widgets-every-developer-should-know-2-d93d539071c9
  3. https://medium.com/app-dev-community/these-10-flutter-widgets-every-developer-must-know-d0b61529796b
  4. https://medium.com/app-dev-community/ten-built-in-flutter-widgets-you-must-know-as-a-flutter-developer-4-83fcfa48436d
  5. https://medium.com/app-dev-community/flutter-is-based-on-widgets-ten-widgets-every-software-developers-must-know-3f91bd51a7d8

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! :)

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

Geno Tech

Written by

Geno Tech

Mobile I Web I Data Science I AI — We write rich & meaningful content on development, technology, digital transformation & life lessons.

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Geno Tech

Written by

Geno Tech

Mobile I Web I Data Science I AI — We write rich & meaningful content on development, technology, digital transformation & life lessons.

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store