support@codebucket.net

Know about the Flutter Column and Row

Know about the Flutter Column and Row

Nafis Hasrat Arnob | October 23, 2022

Hello Developers,

In this demonstration, I will discuss a little bit about the Flutter columns and rows. 

Columns and rows are two of the most important widgets in Flutter. While designing UI we need to align various widgets one after another as per the requirements. Columns and Rows help us to align other widgets. Using Column we can align widgets vertically and using Row we can align horizontally.

 

Both Columns and Rows have similar properties. Such as:

  1. children = This property takes a list of widgets which will be aligned according to their location in the list
  2. mainAxisAlignment = This property takes an object of MainAxisAlignment which determines how the children widgets will be aligned in the main axis.
  3. crossAxisAlignment = This property takes an object of CrossAxisAlignment which determines how the children's widgets will be aligned in the cross-axis.
  4. mainAxisSize = This property takes the MainAxisSize object. With the help of this, we can determine the size of columns and rows.
  5. textDirection = This property controls the text direction of the Row or Column widget.

 

Let's see an example:

 

Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.min,
  children: [
     const Text('Text 1'),
    
    Container(
      height: 100,
      width: 100,
      color: Colors.red,
      child: const Center(
        child: Text(
          'Text 2'
        ),
      ),
    ),

  ],
),

 

Hope this might help in the journey of your development.

 

Read More: How to make ready a flutter application for release in Google Play Store or App Store

Nafis Hasrat Arnob

Nafis Hasrat Arnob

Information Analyst

I am a Flutter developer working for a reputed company in Bangladesh. I am trying my best to gain proficiency in Software Development. I am also interested in Artificial Intelligence, Machine Learning, and Computer Vision.