[shutter component] expanded detailed explanation

Expanded characteristic

• Only in Column,Row,Flex And their subcomponents , This refers to sub components rather than sub nodes , Means inheritance Column,Row,Flex The child components .
• Expanded The parent node of must be Column,Row,Flex And their subcomponents , It can't be Column->Container->Expanded（ Indicates the node path ）
• In the use of Expanded when , If there is List Node of type , such as SingleChildScrollView, perhaps ListTile etc. , Its sliding direction should be consistent with Expanded The filling direction is different , Otherwise, it will report a mistake .
• Expanded Role is , Fill the remaining space .

class Expanded extends Flexible {
    
  /// Creates a widget that expands a child of a [Row], [Column], or [Flex]
  /// so that the child fills the available space along the flex widget's
  /// main axis.
  const Expanded({
    
    Key? key,
    int flex = 1,
    required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

• flex： Is the coefficient of elasticity , The higher the elastic coefficient , The more space it takes , Be similar to Android Native LinearLayout Of weight attribute .
• child： Child node

Example

flutter Code

Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
              flex: 1,
              child: Container(
                color: Colors.black,
              )),
          Expanded(
              flex: 2,
              child: Container(
                color: Colors.red,
              )),
          Expanded(
              flex: 1,
              child: Container(
                color: Colors.blue,
              ))
        ],
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );

Screenshot