Flutter Flex Widget | RRTutors

Flutter Flex Widget

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 


 

Like Row Widget 

Direction Horizontal

wrap_content

Direction Horizontal

match_parent










 

Like Column Widget 

Direction Vertical

wrap_content

Direction Vertical

match_parent


 

Weight Property like Android in Flex widget

 

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,),

   ),

 ],

)

Advertisements