Flutter Tutorial - Flutter Linear Layout | RRTutors

Flutter Linear Layout | Row & Coloumn Widgets

In Android we have a linear layout to arrange childs in horizontal and vertical, similarly in flutter we can arrange by Row, Column widgets.

 

Example 

Horizontal Arrangement by Row

 

class RowWidget 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: Row(

           mainAxisSize: MainAxisSize.min,

           crossAxisAlignment: CrossAxisAlignment.start,

           children: <Widget>[

             Text("Header",style: TextStyle(color: Colors.white),),

             Icon(Icons.account_circle,size: 100,color: Colors.white,),

             Text("Name ",style: TextStyle(color: Colors.white))

           ],

         ),

       )),

     ),

   );

 }

}

Vertical Arrangement by Column

 

class ColumnWidget 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: Column(

           mainAxisSize: MainAxisSize.max,

           children: <Widget>[

             Text("Header",style: TextStyle(color: Colors.white),),

             Icon(Icons.account_circle,size: 100,color: Colors.white,),

             Text("Name ",style: TextStyle(color: Colors.white))

           ],

         ),

       )),

     ),

   );

 }

}


 






 

We can see the arrangement of children horizontal/vertical in below screen

Row 

wrap_content


Row 

match_parent


Column wrap_content


Column match_parent

How to set the Gravity for these widgets

 

We can set the Gravity by using CrossAxisAlignment

 

How it will work for Row and Column widgets

If we set the property for the Row it will align based on Vertical direction(center,start,end…)

If we set the property for Column it will align based on Horizontal direction(center,start,end…)



 

Advertisements