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