Flex works with Expanded and can be proportionally wide or tall

Flex main Properties
  • Direction: Axis. Horizontal,// Expanded height is valid
  • Direction: Axis. Vertical,// Vertical direction, Expanded width is valid
  • Children the child widgets
Expanded Main attributes
  • Width:
  • Flex: Proportion, divided proportionally among multiple Expanded
  • Height: height
  • Child: displays the child widget
Axis.vertical

class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Flex( // direction: Axis. Horizontal,// Expanded height effective direction: Axis. Vertical,// Expanded width effective children: <Widget>[ Expanded( flex: 1, child: Container( height: 20, width: 20, color: Colors.blue, ), ), Expanded( flex: 2, child: Container( height: 40, width: 40, color: Colors.green, ), ), Expanded( flex: 3, child: Container( height: 60, width: 60, color: Colors.orange, ), ), ], ), ); }}Copy the code
Axis.horizontal,

class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Flex( direction: Axis. Horizontal,// horizontal, Expanded height valid // direction: Axis. Vertical,// vertical, Expanded width valid children: <Widget>[ Expanded( flex: 1, child: Container( height: 20, width: 20, color: Colors.blue, ), ), Expanded( flex: 2, child: Container( height: 40, width: 40, color: Colors.green, ), ), Expanded( flex: 3, child: Container( height: 60, width: 60, color: Colors.orange, ), ), ], ), ); }}Copy the code