Flutter - How to use Expanded widget.

Expanded :- One of the most useful widget in Flutter. As its name suggests expanded, this widget will occupy all the available space (we will see more example for this statement).
Expanded widget mostly used with Row() and Column() widget, and below you will know why.

It has two important constructor :

1. Flex.
2. Child.

Child parameter will be used to hold another widget, below we will see more about the flex parameter.

Now let see, how to use Expanded() widget with Row() and Column() widget.

I have created the main.dart file and expanded_example.dart file to differentiate between code.
expanded_example.dart file will be updated as per the use case.


main.dart

import 'package:flutter/material.dart';
import 'package:row/expanded_example.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    ),
  );
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Expanded',
        ),
      ),
      body: ExpandedExample(),
    );
  }
}

expanded_example.dart

import 'package:flutter/material.dart';

class ExpandedExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            height: 100,
            color: Colors.deepOrange,
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.green,
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.black,
            ),
          ),
          Container(
            height: 100,
            color: Colors.deepPurple,
          ),
        ],
      ),
    );
  }
}

As you can see the above output, I have taken Column() widget with Expanded() widget.
Column widget has 2 Container of height 100 and 1 Expanded widget which has occupied all the available space of the screen.
If you notice carefully, I have given flex value to 1, what does it mean?
Now let add another Expanded widget inside Column widget with different flex value.


expanded_example.dart

import 'package:flutter/material.dart';

class ExpandedExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            height: 100,
            color: Colors.deepOrange,
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.green,
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.black,
            ),
          ),
          Container(
            height: 100,
            color: Colors.deepPurple,
          ),
        ],
      ),
    );
  }
}

As you can see in the output, If you increase the flex value the Expanded widget will get more space, more the value more space.

Now let see the same example with Row widget.

expanded_example.dart

import 'package:flutter/material.dart';

class ExpandedExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      child: Row(
        children: <Widget>[
          Container(
            width: 60,
            color: Colors.deepOrange,
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.green,
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.black,
            ),
          ),
          Container(
            width: 60,
            color: Colors.deepPurple,
          ),
        ],
      ),
    );
  }
}

This is how you can use Expanded widget with Row and Column widget.

Thank you for reading.