Expanded Widget : Flutter

We’ll see what is EXPANDED widget in flutter.

Question: What is Expanded widget?

Answer: Expanded Widget is used to give all remaining space to its child.

We are taking three container in a row and it will look like this

Container(
  width: MediaQuery.of(context).size.width,
  child: Row(
    children: <Widget>[
      Container(
        width: 100,
        color: Colors.red,
      ),
      Container(
        width: 100,
        color: Colors.yellow,
      ),
      Container(
        width: 100,
        color: Colors.green,
      )
    ],
  ),
)

Now, We will wrap middle container with Expanded widget. And result will be like this.

Container(
  width: MediaQuery.of(context).size.width,
  child: Row(
    children: <Widget>[
      Container(
        width: 100,
        color: Colors.red,
      ),
      Expanded(
        child: Container(
          width: 100,
          color: Colors.yellow,
        ),
      ),
      Container(
        width: 100,
        color: Colors.green,
      )
    ],
  ),
)

Note: Be aware while using expanded. It will perform its task when its constrained( for column height and for row width, similarly for all widgets) will be known or predefined.

Let’s play with one of parameter of Expanded: Flex. And result is like this.

Container(
  width: MediaQuery.of(context).size.width,
  child: Row(
    children: <Widget>[
      Expanded(
        flex: 10,
        child: Container(
          color: Colors.red,
        ),
      ),
      Expanded(
        flex: 5,
        child: Container(
          color: Colors.yellow,
        ),
      ),
      Expanded(
        flex: 2,
        child: Container(
          color: Colors.green,
        ),
      )
    ],
  ),
)

Actually it divides available length or width (whatever is referenced) in ratio of defined flex.

Total Flex=10+5+2 =17;

Red container= 10/17

Yellow container=5/17;

Green container=2/17;

This is their distribution based on flex provided.

That’s all. We have implemented EXPANDED WIDGET in our app. YEAH!!

I’m sharing my flutter for people repository of Github where all my codes reside.

https://github.com/viveky259259/flutter_for_people

Connect with me on: Github Twitter LinkedIn Instagram Youtube Patreon

#Happy Coding

• **Subscribe for upcoming posts. Thanks for reading. Let me know what you think about this post.