Expanded Class in Flutter
If you create a child widget of a row or column and its size is larger than the screen size, you will get a warning and the widget will not fit on the screen. To fix this, you can Expanded Class in Flutter the widget so that the child widget takes up only the space along the main axis.
If you create multiple child, the space between them will be divided by the flex factor. Note that an expanded widget only contains stateful or stateless widgets and not any other kind of widget.
What is Expanded Class in Flutter?
If you have a child element that is a Row or Column (also for Flex), you can use the Expanded widget to have it grow until it fills the available space along the main axis. The available space is distributed among the enlarged children based on the flex factor if there are more than one.
Typically, the size of the child widgets determines how Row and Column divide the available space. Children aren’t movable. The padding area and main axis alignment properties also affect how this space is used (Row and Column Usage). However Expanded Class in Flutter, you can make some of the children more pliable by wrapping them in the Expanded widget, which allows them to extend and fill the empty area.
Example:
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Expanded Widget Example')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                  child: Center(child: Text('Fixed Width')),
                ),
                Expanded(
                  child: Container(
                    height: 100,
                    color: Colors.blue,
                    child: Center(child: Text('Expanded')),
                  ),
                ),
                Container(
                  width: 50,
                  height: 100,
                  color: Colors.green,
                  child: Center(child: Text('Fixed Width')),
                ),
              ],
            ),
            SizedBox(height: 20),
            Column(
              children: [
                Container(
                  height: 100,
                  color: Colors.orange,
                  child: Center(child: Text('Fixed Height')),
                ),
                Expanded(
                  child: Container(
                    color: Colors.purple,
                    child: Center(child: Text('Expanded')),
                  ),
                ),
                Container(
                  height: 50,
                  color: Colors.yellow,
                  child: Center(child: Text('Fixed Height')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}Expanded Class in Flutter widgets make equal use of the available area without granting any additional properties, such as flex. Use all available space for one expanded child; divide up any available space evenly amongst any number of expanded children and mobile application.
The flex factor is a useful tool for providing a sense of scale when assigning open space. The flex factor controls how the remaining space is used and shared by the child widgets of an Expanded widget.
Properties of Expanded Class in Flutter
ExampleÂ
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Expanded Widget Example')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                  child: Center(child: Text('Fixed Width')),
                ),
                Expanded(
                  flex: 2, // Flex factor set to 2
                  child: Container(
                    height: 100,
                    color: Colors.blue,
                    child: Center(child: Text('Expanded 2x')),
                  ),
                ),
                Expanded(
                  flex: 1, // Flex factor set to 1
                  child: Container(
                    height: 100,
                    color: Colors.green,
                    child: Center(child: Text('Expanded 1x')),
                  ),
                ),
              ],
            ),
            SizedBox(height: 20),
            Column(
              children: [
                Container(
                  height: 100,
                  color: Colors.orange,
                  child: Center(child: Text('Fixed Height')),
                ),
                Expanded(
                  flex: 1, // Flex factor set to 1
                  child: Container(
                    color: Colors.purple,
                    child: Center(child: Text('Expanded 1x')),
                  ),
                ),
                Expanded(
                  flex: 3, // Flex factor set to 3
                  child: Container(
                    color: Colors.yellow,
                    child: Center(child: Text('Expanded 3x')),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}Child Expanded Class in Flutter
This is the widget that seems to be below the larger Expanded Class in Flutter expension. The child is the widget that goes inside another widget, like Expanded, Row, or Column. The parent widget can change the child widget’s size and how it acts.
- The flex factor: The number “flex factor” tells you how much space each child gets along the main line (left to right for Row and right to left for Column). The child will choose its own size and won’t take up any extra room if the flex factor is set to 0 or null.
- Key: It controls how one widget is switched out for another. The key controls how to switch out one app for another. You can use it to keep track of the state of widgets as you move them around in the widget tree.
FlexFit Expanded Class in Flutter
It specifies how one widget can gain available space.
There are two types:
- FlexFit.tight: Forces the child to take up all available space.
- FlexFit.loose: Allows the child to take up as much space as it needs but no more.
Conclusion
You now clearly know how to utilize the Expanded widget to have child items in a Row or Column grow to fill the accessible area.
