Logo

K-Learn

Flutter Expanded Widget

Posted on

< Previous Next >

The Expanded widget is used to give a child widget the ability to expand and fill all available space within a Row or Column. It's a useful way to ensure that a child widget takes up as much space as possible.

Here's an example of how to use the Expanded widget:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expanded Column Sample'),
      ),
      body: Center(
        child: Column(
          children: [
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Expanded(
              child: Container(
                color: Colors.amber,
                width: 100,
              ),
            ),
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),
    );
  }

Some common properties of the Expanded widget:

flex: The flex factor of the widget. This determines how much space the widget should take up relative to other widgets with a different flex factor. By default, all widgets have a flex factor of 1.

child: The widget that should be expanded to fill all available space.

< Previous Next >