Flutter Widgets: Row, Column, Wrap and Stack

Row :

The Row widget arranges its child widgets in a horizontal line. By default, the children are centered vertically in the row, but you can also specify alignment using the mainAxisAlignment property. You can also specify how the children should be spaced within the row using the crossAxisAlignment property.

Example :

SizedBox(    
width: MediaQuery.of(context).size.width,    
height: MediaQuery.of(context).size.height,    
child: Row(    
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,    
  crossAxisAlignment: CrossAxisAlignment.center,    
  children: [    
    Container(    
      height: 60,    
      width: 60,    
      color: Colors.red,    
    ),    
    Container(    
      height: 60,    
      width: 60,    
      color: Colors.black,    
    ),    
    Container(    
      height: 60,    
      width: 60,    
      color: Colors.blue,    
    ),    
    Container(    
      height: 60,    
      width: 60,    
      color: Colors.green,    
    ),    
  ],    
),    
),

The above code will give you the following output    
Output :

Column :    
The Column widget arranges its child widgets in a vertical line. By default, the children are centered horizontally in the column, but you can also specify alignment using the mainAxisAlignment property. You can also specify how the children should be spaced within the column using the crossAxisAlignment property.

Example :    
  SizedBox(  
width: MediaQuery.of(context).size.width,  
height: MediaQuery.of(context).size.height,  
child: Column(  
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
  crossAxisAlignment: CrossAxisAlignment.center,  
  children: [  
    Container(  
      height: 60,  
      width: 60,  
      color: Colors.red,  
    ),  
    Container(  
      height: 60,  
      width: 60,  
      color: Colors.black,  
    ),  
    Container(  
      height: 60,  
      width: 60,  
      color: Colors.blue,  
    ),  
    Container(  
      height: 60,  
      width: 60,  
      color: Colors.green,  
    ),  
  ],  
),  
),

The above code will give you the following output

Output :

Wrap :  
The Wrap widget arranges its child widgets in a row or column, depending on how much space is available. The children are wrapped to the next line if they do not fit on the current line. By default, the children are aligned to the start of the row or column, but you can also specify alignment using the direction property.  
 

Example :

 Wrap(  
direction: Axis.vertical,  
children: [  
  Container(  
    height: 250,  
    width: 100,  
    color: Colors.red,  
  ),  
  Container(  
    height: 250,  
    width: 100,  
    color: Colors.black,  
  ),  
  Container(  
    height: 250,  
    width: 100,  
    color: Colors.blue,  
  ),  
  Container(  
    height: 250,  
    width: 100,  
    color: Colors.green,  
  ),  
],  
),

The above code will give you the following output  
Output :

Stack :  
The Stack widget positions its child widgets on top of each other. The children are positioned using the Positioned widget. The Positioned widget takes a top, left, bottom, and right property, which specify the distance from the edge of the stack to the edge of the child widget.

Example :

Stack(  
children: [  
  Container(  
    width: MediaQuery.of(context).size.width,  
    height: MediaQuery.of(context).size.height,  
    color: Colors.red,  
  ),  
  Positioned(  
    top: 80,  
    child: Container(  
      height: 200,  
      width: 200,  
      color: Colors.black,  
    ),  
  ),  
  Positioned(  
    top: 100,  
    child: Container(  
      height: 60,  
      width: 60,  
      color: Colors.blue,  
    ),  
  ),  
],  
),

The above code will give you the following Output  
Output :  

These are all the common widgets that are used in a flutter. these widgets are used widely in flutter. it better to understand these widgets.   
We hope you like our blogs.