Skip to main content

Flutter Row and Column with Examples

Image
By SimplexTech

What are Row and Column

In Flutter, Row and column are the two essential widgets in Flutter that allows developers to align children horizontally and vertically according to our requirements. These widgets are very necessary when we design the application user interface in Flutter. So Let's discuss in details all the properties and how it works with the examples.

Row

A Row is a widget used to display child widgets horizontally. The Row widget does not scroll. If you have a line of widgets and want them to be able to scroll then you can use ListView Widget which we will discuss in coming blogs.

If we wished to display three text widgets within a row we can create a Row widget like below:

 body: Row(
        children: [
          Text(
            "Flutter Demo Row",
            style: TextStyle(
                backgroundColor: Colors.deepOrange,
                color: Colors.white,
                fontSize: 22),
          ),
          Text(
            "Flutter Demo Row",
            style: TextStyle(
                backgroundColor: Colors.indigo,
                color: Colors.white,
                fontSize: 22),
          ),
          Text(
            "Flutter Demo Row",
            style: TextStyle(
                backgroundColor: Colors.purple,
                color: Colors.white,
                fontSize: 22),
          )
        ],
      )

Column

A Column is a widget used to display child widgets vertically. The Column widget does not scroll. If you have a line of widgets and want them to be able to scroll then you can use ListView Widget which we will discuss in coming blogs.

If we wished to display three text widgets within a column we can create a Column widget like below:

 body: Column(
        children: [
          Text(
            "Flutter Demo Row",
            style: TextStyle(
                backgroundColor: Colors.deepOrange,
                color: Colors.white,
                fontSize: 22),
          ),
          Text(
            "Flutter Demo Row",
            style: TextStyle(
                backgroundColor: Colors.indigo,
                color: Colors.white,
                fontSize: 22),
          ),
          Text(
            "Flutter Demo Row",
            style: TextStyle(
                backgroundColor: Colors.purple,
                color: Colors.white,
                fontSize: 22),
          )
        ],
      )

Properties of Row and Column Widgets:

1. children: 

This property takes in List<Widget>, which is a list of widgets to display inside the Row or the Column widget. we have already seen how children's properties work in the upside-mentioned example.

we can give multiple widgets to the children as it gives the List of widgets like Text, Button, images, listview, Images, and many more properties. All these widgets we are learning in a new blog. Now Let's take an example of children with multiple and different widgets.

Example of Row :-

 body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Row(
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white, ),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )

Example of Column :-

 body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Column(
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white,),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )

2. mainAxisAlignment and crossAxisAlignment: 

We can control how a row widget aligns its children based on our requirements using the property crossAxisAlignment and mainAxisAlignment. The row's cross-axis will run vertically, and the main axis will run horizontally. See the below visual representation to understand it more clearly.

- The crossAxisAlignment takes in CrossAxisAlignment enum as the object to how the children’s widgets should be places in crossAxisAlignment. For Row it is vertical and for Column it is horizontal.

This property takes in the MainAxisAlignment enum to decide how the children's widgets should be placed in mainAxisAlignment. For Row it is horizontal and for Column it is vertical.

We can align the row's children widget with the help of the following properties:

start: It will place the children from the starting of the main axis.

end: It will place the children at the end of the main axis.

center: It will place the children in the middle of the main axis.

spaceBetween: It will place the free space between the children evenly.

spaceAround: It will place the free space between the children evenly and half of that space before and after the first and last children widget.

spaceEvenly: It will place the free space between the children evenly and before and after the first and last children's widget.

Example of Row :-

 body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Row(
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white, ),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )

Example of Column :-

 body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Column(
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white,),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )

3. mainAxisSize: 

This property decides the size of the main-axis by taking in MainAxisSize enum as the object. It Minimizes the amount of free space along the main axis, subject to the incoming layout constraints. It has two constraints Max and Min Let's see the example of both of the how we can implement.

Example of Min Row :-

 body: Center(
        child : Container(
        color: Colors.indigo,
        child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white, ),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )
    )

Example of Max Row :-

body: Center(
        child : Container(
        color: Colors.indigo,
        child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white, ),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )
    )

Example of Min Column :-

 body: Center(
        child : Container(
        color: Colors.indigo,
        child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white, ),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )
    )

Example of Max Column :-

body: Center(
        child : Container(
        color: Colors.indigo,
        child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white, ),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )
    )

4. textBaseline:

This property is responsible for the alignment of the text in the Row or Column widget on the basis of a baseline.

Example of Row :-

 body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Row(
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white, ),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )

Example of Column :-

 body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Column(
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white,),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )

5. Key:

A new widget will only be used to update an existing element if its key is the same as the key of the current widget associated with the element. like, If you need to update some widgets then you can give the key for those widgets if it matches the condition then update. For more detail, we can understand in the blog of Form Widget.

6. textDirection: 

This property controls the text direction of the Row or Column widget, which can either be from left-to-right (by default) or right-to-left.

Example of  RTL Row :-

 body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        textDirection: TextDirection.rtl,
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white, ),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )
Example of  LTR Row :-
body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        textDirection: TextDirection.ltr
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white, ),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )

Example of  RTL Column :-

 body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
         textDirection: TextDirection.rtl
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white,),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )
Example of  LTR Column :-
 body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
         textDirection: TextDirection.ltr
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white,),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )

7. verticalDirection: 

This property takes in VerticalDirection enum as the object to determine the order in which the children should be layered. Two types of VerticalDirection are there let's see an example.

Example of VerticalDirection Down Row :-

 body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        verticalDirection: VerticalDirection.down,
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white, ),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )

Example of VerticalDirection Down Column :-

 body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        verticalDirection: VerticalDirection.down,
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white, ),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )

Example of VerticalDirection Up Row :-

 body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        verticalDirection: VerticalDirection.up,
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white, ),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )

Example of VerticalDirection Up Column:-

 body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        verticalDirection: VerticalDirection.up,
          children: [
            Text(
              "Flutter Demo ",
              style: TextStyle(
                  backgroundColor: Colors.deepOrange,
                  color: Colors.white, ),
            ),
            ElevatedButton(
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: Colors.white,),
              ),
              onPressed: () {},
            ),
            OutlinedButton(
              child: Text(
                'OutlinedButton',
                style: TextStyle(color: Colors.blueGrey,),
              ),
              onPressed: () {},
            ),
          ],
        ),
      )


Labels:

Comments

Post a Comment

Popular posts from this blog

Flutter BottomNavigationBar

By SimplexTech
BottomNavigationBar A material widget that's displayed at the bottom of an application. Which shows around three to five items and it includes labels and icons. BottomNavigationBar allows you to select one item at a time and quickly navigate to a given page. Properties of the BottomNavigationBar : items: It defines the list of BottomNavigationBar Items to display the bottom navigation bar. currentIndex: It determines the current active bottom navigation bar item on the screen. onTap: It is called when we tapped one of the items on the screen. iconSize: It is used to specify the size of all bottom navigation item icons. fixedColor: It is used to set the color of the selected item. If we have not set a color to the icon or title, it will be shown. type: It determines the layout and behavior of a bottom navigation bar. It behaves in two different ways that are:  1. fixed: Default it is fixed and If it is null, it will use fixed. 2. shifting: It will use shifting where w...
Post a Comment
Read more

MaterialApp and Scaffold in Flutter with Example

By SimplexTech
What is MaterialApp Material design is for Google Android material design which is used to create UI for Android.MaterialApp is a predefined class in a flutter that extends the Material Design class. It is likely the main or core component of flutter. We can access all the other components and widgets provided by Flutter SDK. It is a class that creates an instance of [WidgetsApp] . Text widget, AppBar widget, Scaffold widget, ListView widget, StatelessWidget, StatefulWidget, IconButton widget, TextField widget, and many more widgets that are accessed using MaterialApp class.  For iOS, there is the Cupertino widgets class which I'll describe or discuss or explain in another article. What is Scaffold In Flutter Scaffold is a very useful and highly flexible class. Scaffold implements the basic material design layout structure. A Scaffold Widget provides a framework that implements the flutter app's basic material design visual layout structure.  The developer can implement a wide...
4 comments
Read more

Flutter TextField with Examples

By SimplexTech
Introduction to TextField TextField in Flutter is the most commonly used text input widget that allows users to collect inputs from the keyboard into an app. We can use the TextField widget in building forms, sending messages, creating search experiences, and many more. By default, Flutter decorated the TextField with an underline. We can also add several attributes with TextField, such as label, icon, inline hint text, and error text using an InputDecoration as the decoration. If we want to remove the decoration properties entirely, it is required to set the decoration to null. 1. decoration It is used to show the decoration around TextField.The most common attributes in decoration are as follows: border : It is used to create a default rounded rectangle border around TextField. labelText : It shows the label text on the selection of TextField. hintText : It shows the hint text inside TextField when there is no text entered.   TextField(             ...
Post a Comment
Read more