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 }

API Evangelist | Chief Hustler @workrituals.com | Habit Coach | Madras Java User Group Leader
78FollowersFollow
0SubscribersSubscribe

Latest articles

Flutter: How does column layout work?

Layouts are the fundamental starting points for developing Flutter applications. There are many layout options are available by default. I am going...

Flutter: Stateless vs Stateful widgets

Flutter is a mobile application development framework developed by Google. You need to understand the fundamental building blocks before you dig deeper...

Why Flutter is a great technology for makers &...

As per the wikipedia, Flutter is an open source UI development kit created by Google. It is used to...

Why 12-Factory methodology matters to your Microservice development?

The 12-Factor application development methodology and why is it important for your microservices strategy

When to use Firebase Cloud functions?

Recently I got a question from one of the Indie makers that, when to use Firebase Cloud Functions? This...

Similar articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here