Flutter: The fundamentals of ‘Expanded’ widget

Flutter framework offers lots of visible widgets to construct your application design. You may also require some non visible widgets to meet your business requirements. One such widget is called ‘Expanded’. I am going to explain what and when to use the expanded widget in your app design.

Expanded widget

Expanded widget can be used inside Column, Row and Flex layouts in-order to adjust the layout in a meaningful way. You may need to allocate some extra space for few children inside a column layout. You can wrap those child with expanded widget to meet your need.

Expanded code example

Please see the example with column layout composed with exposed widget. There are 3 image widgets are wrapped with expanded widget. The expansion is controlled by the flex property inside the column layout.

class ExpandedLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _build(context);
  }

  Widget _build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          flex: 2,
          child: Image.network('https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297_1280.jpg')
        ),
        Expanded(
          child: Image.network('https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_1280.jpg')
        ),
        Expanded(
          child: Image.network('https://cdn.pixabay.com/photo/2016/02/17/19/08/lotus-1205631_1280.jpg')
        )
      ],
    );
  }
}

This will produce the following output,

I hope this would have clarified the basic functionality of expanded widget. Keep exploring more to know it better. The code is available under my Github project for your reference.

{ enjoy coding }