The Flex Widget is similar to Row and Column widget.
We can use it as Row and Column by specifying the direction property.
|
class FlexWidget extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Tutorial', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( body: SafeArea(child: Container( color: Colors.brown, child: Flex( direction: Axis.vertical, mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container(child: Padding( padding: const EdgeInsets.all(8.0), child: Text("Header",style: TextStyle(color: Colors.white),), ),color: Colors.green,), Container(child: Icon(Icons.account_circle,size: 100,color: Colors.white,),color: Colors.yellow,), Container(child: Padding( padding: const EdgeInsets.all(8.0), child: Text("Name ",style: TextStyle(color: Colors.white)), ),color: Colors.pink,) ], ), ), ), ), ); } } |
Change different alignment and check the result
|
Direction Horizontal wrap_content |
Direction Horizontal match_parent |
|
|
|
|
Direction Vertical wrap_content |
Direction Vertical match_parent |
|
|
|
If we add more items inside flex , to fit all these we can use Expandable widget to set each child flex .
|
Flex( direction: Axis.horizontal, mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Flexible( flex: 1, child: Container(child: Padding( padding: const EdgeInsets.all(8.0), child: Text("Header",style: TextStyle(color: Colors.white),), ),color: Colors.green,), ),
Flexible(flex: 1,child: Container(child: Icon(Icons.account_circle,size: 100,color: Colors.white,),color: Colors.yellow,)), Flexible(flex: 1, child: Container(child: Padding( padding: const EdgeInsets.all(8.0), child: Text("Name ",style: TextStyle(color: Colors.white)), ),color: Colors.pink,), ), ], ) |
