Top 10 Flutter Widgets Every Flutter Developer Should Know!

Flutter provides lots of widgets to build an app, in fact, Flutter is all about widgets which are combined to build a full fledged dynamic app.

Today, In this blog post, we are going to see about top 10 flutter widgets that every flutter developers should know and which will be a lifesaver for them.

So, Lets start!

Top 10 Flutter Widgets

1. Align Widget

Align widget is used when we want out child widget to be aligned at different position (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",
      ),
    ),
  ),
)
Flutter Widgets
Bottom Center Align
Flutter Widgets
Top Right Aligned

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 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 into handy.

SafeArea(
          child: Container(
            color: Colors.purple[200],
            child: Align(
              alignment: Alignment.topCenter,
              child: Text(
                "With SafeArea",
                style: TextStyle(fontSize: 20.0),
              ),
            ),
          ),
        ),
Flutter Widgets
Without SafeArea
Flutter Widgets
With SafeArea

3. SizedBox Widget

SizedBox widget is basically a box widget with specified height and width. This widget is handy when we want any of the widget to be of specified size.

We can provide height and width as a named arguments 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 container!

Flutter Widgets
SizedBox Fixed Width
SizedBox Full Width
SizedBox Full Width

4. Expanded Widget

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.

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,
                ),
              ],
            ),
          ),
Flutter Widgets
Expanded Container taking all available space

5. Wrap Widget

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 in 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,
                  ),
                ),
                
                
              ],
            ),
Flutter Widgets
Without Wrap Widget
Flutter Widgets
With Wrap Widget

6. FutureBuilder Widget

FutureBuilder widget is important when we are processing something in our app which will take longer time, and we don’t want our app to freeze until the particular process is completed.

Let’s say, we have an app which will fetch some data from the internet. So, the process will take lots of time to establish connection, make 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 condition, 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 are 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 which provides more control over formatting than 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,
                    ),
                  ),
                ],
              ),
            ),
Flutter Widgets
Formatted with RichText widget

8. MediaQuery Widget

MediaQuery widget provide 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 particular instance of time.

This widget acts more or less like Cascading Style Sheets (CSS) media query 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, ClipRRect widget is used for clipping its child edges with rounded rectangle.

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'),
              ),
            ),
Flutter Widgets
Rounded Corners with ClipRRect

10. Flexible Widget

Flexible widget is similar to Expanded widget except the fact that Flexible takes only the needed space, and Expanded takes all available space, respecting the flex factor.

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,
                  ),
                ),
              ],
            ),
          ),
Flexible Container with different flex value - Flutter Widgets
Flexible Container with different flex value

Read: How to create Navigation Drawer in Flutter ?

Conclusion

Beside the above listed top 10 flutter widgets, there are other flutter widgets too, which needs to be explored to be a better flutter developer. Its all my personal opinion, as I have been using all these flutter widgets into my day-to-day projects. What do you think about it? Please let me know about it in the comment section.