flutter Tutorial
April 8, 2021

Top 10 Flutter widgets which you should know

By Mohit Agrawal

These Flutter widgets will make your life simpler

widgets

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.

flutter_top_widgets_1

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.

flutter_top_widgets_2

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()
        ),
      ),
    );
  }
}
flutter_top_widgets_3

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.

flutter_top_widgets_4

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(),
  ],
),
flutter_top_widgets_5

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.

flutter_top_widgets_6

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.

flutter_top_widgets_7

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'),
        )
      ),
flutter_top_widgets_8

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,))
        ],
      )
    );
  }
}
flutter_top_widgets_9

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'
            ),
          ),
        ),
      ),
flutter_top_widgets_10

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.

flutter_top_widgets_12

But if you use SafeArea then you will able to fix this issue.

SafeArea(
  minimum: const EdgeInsets.all(16.0),
  child: Text('My Widget: ...'),
)
flutter_top_widgets_11

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

Tagsflutter flutter for beginner flutter tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *