#Flutter: What are SingleChildScrollView and Expanded?

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

A SingleChildScrollView is a widget. As we know almost everything in flutter is a widget.

But how this widget differs from others?

This widget is used when dealing with devices with smaller screens.

Or in the case when using a column or row as for displaying something which doesn't fit in the screen.

And when something which doesn't fit in the screen, flutter throws some error like,

Bottom Overflow

But we can fix this bottom Overflow issue by using the expanded widget.

So why should we use SingleChildScrollView?

Because when using the Expanded widget, it shrinks all the content or child to fit inside it.

But sometimes, due to this our design doesn't look that appealing for the user.

Though the Expanded widget is a Good widget. And it has some use cases, but it is not recommended to fix the overflow issue by using the expanded widget.

Now you may ask what's the Expanded widget?

It's a widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

Easy?

Let's dive deeper.

Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., for a Row or for a Column).

If many children are expanded, the available space is divided among them according to the flex factor.

You may ask that how to use these two widgets?

  • For SingleChildScrollView

    Wrap the whole widget with SingleChildScrollView.

For e.g.


class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Material(
          color: Colors.white,
          child: SingleChildScrollView(
            child: Center(
              child: somethingInsideColumn(context),
                     //I declared a function, it's not something Special.
            ),
          ),
        ),
      ),
    );
  }
}

And One can also use the expanded widget in a similar way.


I hope you understood the usage of these two widgets in Flutter.

If you are facing some difficulties, or you want to give some suggestion, please head over to our telegram group.

So that's it for today.

Please wait for our next article.

Until then stay home, stay safe.

And be productive with your time.

Cya :)

No Comments Yet