The difference between Flexible and Expanded in Flutter

The difference between Flexible and Expanded in Flutter

In the introduction of the official website, it feels very vague:

• Flexible: Flexible is a component that controls the layout of subcomponents such as Row, Column, and Flex. The Flexible component can control the subcomponents of Row, Column, and Flex to occupy the parent component. For example, there are 3 subcomponents in Row, and the width on both sides is 100, and the middle one occupies the remaining space
• Expanded: Expanded inherits the word Flexible, and the fit parameter is fixed to FlexFit.tight, which means that Expanded must (force) fill up the remaining space

First look at their structure:

Flexible

 const Flexible({
    
    
    Key? key,
    this.flex = 1,
    this.fit = FlexFit.loose,
    required Widget child,
  }) : super(key: key, child: child);

Expanded

  const Expanded({
    
    
    Key? key,
    int flex = 1,
    required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);

It can be seen from the structure that their FlexFit parameters are different

FlexFit is an enumerated type

///
///  * [RenderFlex], the flex render object.
///  * [Column], [Row], and [Flex], the flex widgets.
///  * [Expanded], the widget equivalent of [tight].
///  * [Flexible], the widget equivalent of [loose].
enum FlexFit {
    
    
  /// The child is forced to fill the available space.
  ///
  /// The [Expanded] widget assigns this kind of [FlexFit] to its child.
  tight,

  /// The child can be at most as large as the available space (but is
  /// allowed to be smaller).
  ///
  /// The [Flexible] widget assigns this kind of [FlexFit] to its child.
  loose,
}
  

• tight: the remaining space must be forced to be filled
• loose: fill the remaining space as large as possible, but it is not necessary to fill

It can be seen that the two are different in the filling method

1. Both Flexible and Expanded are components with weight properties, which can control how the subcomponents (children) of Row, Column, and Flex are laid out.

2. Flexible can control whether the subcomponent layout is filled with the remaining space, relying on the fit enumeration parameter control (loose is not filled by default),

   Expanded inherits from Flexible and forcibly sets the fit parameter to tight to fill the remaining space in the constructor

3. The loose parameter of Flexible indicates that the child control can reach the available size at most, allowing smaller

4. The degree of freedom is higher, and it is more convenient to use Expanded directly to fill up the remaining space.

As shown in the figure below, Flexible can not fill the rest of the layout

Examples are as follows:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue, splashColor: Colors.transparent),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
        appBar: AppBar(
          title: Text("布局测试"),
        ),
        body:Column(
          children: [
            buildFlexible(),
            SizedBox(height: 10,),
            buildExpanded()
          ],
        )
    );
  }

  Widget buildFlexible() {
    
    
    return
      Container(
        color: Colors.blueAccent,
        child: Row(
          children: [
            Container(
              color: Colors.yellow,
              height: 50,
              width: 100,
            ),
            Flexible(
                child: Container(
                  color: Colors.green,
                  height: 50,
                  child: Text("这是Flexible",style: TextStyle(color: Colors.white),),

            )),
            Container(
              color: Colors.red,
              height: 150,
              width: 100,
            )
          ],
        ),
      );
  }

  Widget buildExpanded() {
    
    
    return
      Container(
        color: Colors.blueAccent,
        child: Row(
          children: [
            Container(
              color: Colors.yellow,
              height: 50,
              width: 100,
            ),
            Expanded(
                child: Container(
                  alignment: Alignment.center,
                  color: Colors.green,
                  height: 50,
                  child: Text("这是Expanded",style: TextStyle(color: Colors.white),),

                )),
            Container(
              color: Colors.red,
              height: 150,
              width: 100,
            )
          ],
        ),
      );
  }
}