Flutter provides lots of widgets to build an app. in fact, Flutter is all about widgets that are combined to build a full-fledged dynamic app.
Today, In this blog post, we are going to see about the top 10 flutter widgets.
that every flutter developer should know and which will be a lifesaver for them.
So, Let’s start!
Top 10 Flutter Widgets
1. Align Widget
Align widget is used when we want our child widget to be aligned at different positions (places) within our parent widget.
Center(
child: Container(
height: 120.0,
width: 120.0,
color: Colors.blue[50],
child: Align(
alignment: Alignment.topRight,
child: Text(
"Aligned Text",
),
),
),
)
2. SafeArea Widget
SafreArea widget provides sufficient padding to its child widget to avoid intrusions with the status bar at the top of the screen.
There are a lot of scenarios when we build our user interface without the AppBar, but the problem is the Container will shift up over the status bar of the screen which we don’t want to be. This is where this flutter widget comes in handy.
SafeArea(
child: Container(
color: Colors.purple[200],
child: Align(
alignment: Alignment.topCenter,
child: Text(
"With SafeArea",
style: TextStyle(fontSize: 20.0),
),
),
),
),
3. SizedBox Widget
A SizedBox widget is basically a box widget with a specified height and width. This widget is handy when we want any of the widgets to be of a specified size.
We can provide height and width as a named argument to this widget.
which will then resize its child widget to its specified size.
Container(
child: SizedBox(
height: 50.0,
width: 100.0,
child: RaisedButton(
color: Colors.red,
child: Text('Click Me'),
onPressed: () {},
),
),
),
| Hint: We can also set the width value to double.infinity, to make the button width to full width of the container! |
4. Expanded Widget
An expanded widget is necessary when we want the child widgets of a row or a column or a flex to fill all the available spaces along the main axis.
An expanded widget must be a descendant of flutter widgets like row or column or flex.
Container(
child: Column(
children: <Widget>[
Container(
color: Colors.red,
height: 100,
),
Expanded(
child: Container(
color: Colors.blue,
),
),
Container(
color: Colors.green,
height: 100,
),
],
),
),
5. Wrap Widget
A wrap widget is used to display its multiple child widgets into multiple horizontal or vertical runs.
Basically, when we try to put widgets in a row or column, we will run out of space on the screen and flutter will show errors.
Thankfully, with the help of this widget, the child widget which doesn’t fit in the space will wrap to the next parallel run.
Wrap(
children: <Widget>[
Container(
margin: EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: () {},
child: Text("Button 1"),
color: Colors.purple,
),
),
Container(
margin: EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: () {},
child: Text("Button 2"),
color: Colors.purple,
),
),
Container(
margin: EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: () {},
child: Text("Button 3"),
color: Colors.purple,
),
),
Container(
margin: EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: () {},
child: Text("Button 4"),
color: Colors.purple,
),
),
],
),
6. FutureBuilder Widget
FutureBuilder widget is important when we are processing something in our app which will take a longer time, and we don’t want our app to freeze until the particular process is completed.
Let’s say, we have an app that will fetch some data from the internet. So, the process will take lots of time to establish the connection, make a request, process it, and get the response. This will consume more time meanwhile, we want to show some spinner or loading text until we have data to show.
In such conditions, this widget will do all the heavy lifting in the background and will provide us data when it is ready avoiding stopping the normal workflow of the app. Technically, it returns Future Object which is not known prior.
@override
Widget build(BuildContext context) {
var futureBuilder = new FutureBuilder(
future: _getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
case ConnectionState.waiting:
return new Text('loading...');
default:
if (snapshot.hasError)
return new Text('Error: ${snapshot.error}');
else
return createListView(context, snapshot);
}
},
);
In the above code, FutureBuilder will try to fetch data from the internet, meanwhile, it will show the loading text until the data is available!
7. RichText Widget
RichText widget is a text formatting widget that provides more control over formatting than a normal Text widget. We can pass TextSpan as a child widget which will allow us to format the word or part of it with multiple styling.
RichText(
text: TextSpan(
text: "Coding",
style: TextStyle(
fontWeight: FontWeight.w700,
color: Colors.blue,
fontSize: 30.0,
),
children: [
TextSpan(
text: "Ninja",
style: TextStyle(
fontStyle: FontStyle.italic,
color: Colors.purple,
fontSize: 30.0,
),
),
],
),
),
8. MediaQuery Widget
MediaQuery widget provides the current information about the device. For example, It will let us know about screen height and width, its screen orientation, and a lot more about it at a particular instance of time.
This widget acts more or less like Cascading Style Sheets (CSS) media queries in web development.
@override
Widget build(BuildContext context) {
MedaiQueryData deviceInfo = MediaQuery.of(context);
print('size: ${deviceInfo.size}');
print('padding: ${deviceInfo.padding}');
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Center(
child: Text("Media Query Demo by codingninja.info")
)
);
}
9. ClipRRect Widget
As the name suggests, the ClipRRect widget is used for clipping its child edges with rounded rectangles.
When we want a circular container or a card or an image with rounded corners. this widget is used to clip the edges into rounded rectangle/circular shapes.
Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(25.0),
child: Image.asset('assets/image.jpg'),
),
),
10. Flexible Widget
Flexible widget is similar to Expanded widget except for the fact that Flexible takes only the needed space, and Expanded takes all available space, respecting the flex factor.
A flexible widget must be a descendant of flutter widgets like row or column or flex.
Container(
child: Column(
children: <Widget>[
Flexible(
flex: 1,
child: Container(
color: Colors.red,
),
),
Flexible(
flex: 3,
child: Container(
color: Colors.blue,
),
),
Flexible(
flex: 2,
child: Container(
color: Colors.green,
),
),
],
),
),
Read: How to create Navigation Drawer in Flutter?
Conclusion
Besides the above-listed top 10 flutter widgets, there are other flutter widgets. which need to be explored to be a better flutter developer. It’s all my personal opinion, as I have been using all these flutter widgets in my day-to-day projects. What do you think about it? Please let me know about it in the comment section.