Top 10 Flutter widgets which you should know
These Flutter widgets will make your life simpler
Its been more than 2 years since I am developing flutter apps. Based on my experience I have selected the top 10 most used and helpful widgets in Flutter.
In this Flutter Tutorial, we are not going to discuss the basics like row, column, image but more interesting 👻. If you are a very beginner in Flutter then you will be very excited after learning the below widgets.
The widgets which we are going to see in this article are:
- FittedBox
- Placeholder
- Wrap
- Inkwell
- MediaQuery
- SnackBar
- SizedBox
- Flexible
- ClipArt
- SafeArea
Let’s see all the above flutter widgets one by one with the help of code snippet.
FittedBox
It will automatically adjust the size of the its child to make it fit. Let’s take an example to understand this.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
height: 300,
width: 300,
color: Colors.grey,
child: Text('Fit me in this box!!!'),
),
),
);
}
}
If you run the above code then you will get something like this. The text will appear at top left side of the container.
Now let’s use the FittedBox and see its magic 😀😀 . Just wrap the Text to FittedBox widget as shown in the below code.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
height: 300,
width: 300,
color: Colors.grey,
child: FittedBox(child: Text('Fit me in this box!!!')),
),
),
);
}
}
Here is the output.
PlaceHolder
This is one of my widgets because I use it a lot while development. I bet you will also love this.
Suppose you are developing a UI design and at some point in time you are not very clear that which widget you should use and you want to skip that part for a later time. In this scenario, you can use the place holder widget which will tell you that something is pending here.
Let’s understand this with an example, suppose I have a container widget and I am not sure that what should be inside that container. So I can use the PlaceHolder. Here is the code for it.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
height: 300,
width: 300,
color: Colors.grey,
child: Placeholder()
),
),
);
}
}
Wrap
Whenever you want to display a group of widgets in a vertical or horizontal direction than you usually use a row or column. Like this.
Row(
children: [
MyWidget(),
MyWidget(),
MyWidget(),
MyWidget(),
],
),
But there is a problem with this approach. You may get the yellow and black overflow warning if there is not enough space available.
To fix this overflow warning we have Wrap widget. It will expand itself to give the required room to its children. Here is code for it.
Wrap(
children: [
MyWidget(),
MyWidget(),
MyWidget(),
MyWidget(),
MyWidget(),
],
),
InkWell
This widget is used to add the ripple effect to its child widget. Using Inkwell you can create your own custom button. Let’s understand this with an example.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: InkWell(
splashColor: Colors.green,
onTap: () {},
child: Container(
height: 300,
width: 300,
),
),
),
);
}
}
As you can see in the above code, I have wrapped the container with InkWell. Now run this code and try clicking on the container you will see a ripple effect. The color will be green because of this splashColor: Colors.green.
MediaQuery
Suppose you are developing a Flutter app on Nexus 5 and your app is now ready to be published. But unfortunately, you find out that your widget is coming in different sizes on other devices.
To solve these types of issues we have MediaQuery. Using this we can get the screen size of the device and then we can calculate the relative size of the widgets with respect to the device size. Basically, it’s a game of calculating the ratio of the size.
Let’s take a scenario to understand this. Assume you need to create a widget that will take 75% of the device’s height and width.
Here is the solution 👏👏.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
height: MediaQuery.of(context).size.height * 0.75,
width: MediaQuery.of(context).size.width * 0.75,
color: Colors.green,
),
),
);
}
}
As you can see in the above code, I have used MediaQuery.of(context).size.height to calculate the device height and width.
SnackBar
It is a small alert with optional action which comes at the bottom of the screen.
Center(
child: RaisedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: const Text('Awesome Snackbar!'),
action: SnackBarAction(
label: 'Action',
onPressed: () {
// Code to execute.
},
),
),
);
},
child: Text('Show SnackBar'),
)
),
SizedBox
This is same as container widget but unlike Container, you cannot set color or decoration using SizedBox.
SizedBox.fromSize(
size: Size(250, 200),
child: RaisedButton(
color: Colors.blue,
child: Text('Warmodroid!!!', style: TextStyle(color: Colors.white)),
onPressed: () {},
),
)
Flexible
It helps the child of Row, Column, and Flex to utilize the available space. It helps the child widget to flex as per available space.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: [
Flexible(flex: 3,child: Container(color: Colors.green,)),
Flexible(flex: 2,child: Container(color: Colors.blue,)),
Flexible(flex: 1,child: Container(color: Colors.brown,))
],
)
);
}
}
As you can see in the above code I have given the flex values 3, 2, and 1 to green, blue and brown containers respectively. And they are taking the available space accordingly.
ClipRRect
Using this widget you can easily design any circular widget. Suppose you have an image widget and you want to make it in a circular shape. Then you can easily do it with the help of ClipRRect.
Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Container(
color: Colors.blue,
height: 200, width: 200,
child: Image.network(
'https://i.ibb.co/1vXpqVs/flutter-logo.jpg'
),
),
),
),
SafeArea
This is one of the most important as per my opinion. Let me explain to you why. Suppose you are developing Flutter apps for iPhones then you must know that nowadays notch is very common. SafeArea widget will guide your view not to go beyond the notch area.
If you see the below image then you will the issue caused by the notch on iPhone X.
But if you use SafeArea then you will able to fix this issue.
SafeArea(
minimum: const EdgeInsets.all(16.0),
child: Text('My Widget: ...'),
)
You can prefer this post as well
https://suragch.medium.com/a-visual-guide-to-flutters-safearea-widget-30f5dbdc01d6
Video Tutorial
Conclusion
These are few top most flutter widgets which I like to use more often. Of course there are many and I will try to cover them in next tutorial.
Help me to grow our YouTube Channel: More tutorials like this
I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!