Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024

Flutter Row and Column

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

In this article, we will learn about Flutter Row and Column in detail. We are going to learn how to organize different widgets in columns and rows on the screen. Rows and columns are not one and the same widget; they are two separate widgets called Row and Column.

Source: Tabnine

Flutter's row and column widgets allow developers to align children horizontally and vertically according to our requirements. These widgets are essential when creating a Flutter application's user interface.

Row Widget

This widget organizes its children on the screen in a horizontal direction. In other words, it will anticipate a horizontal array of child widgets. We must wrap the child widgets in an Expanded widget if they require to fill the available horizontal space.

Because it displays the widgets within the viewable view, a row widget does not appear to be scrollable. As a result, having more children in a row than will fit in the available area is regarded as inappropriate. The ListView widget is required to create a scrollable list of row widgets.

The properties crossAxisAlignment and mainAxisAlignment let us determine how a row widget aligns its children based on our preferences. The cross-axis of the row will be vertical, while the main axis will be horizontal. 

Let's look at an example where we're going to align the content such that there's an even amount of space around the children in a row.

import 'package:flutter/material.dart';  

void main() { runApp(MyApp()); }  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage()  
    );  
  }  
}    
class MyHomePage extends StatefulWidget {  
  @override  
  _MyHomePageState createState() => _MyHomePageState();  
}  
class _MyHomePageState extends State<MyHomePage> {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text("Flutter Row Example"),  
      ),  
      body: Row(  
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
          children:<Widget>[  
            Container(  
              margin: EdgeInsets.all(12.0),  
              padding: EdgeInsets.all(8.0),  
              decoration:BoxDecoration(  
                  borderRadius:BorderRadius.circular(8),  
                  color:Colors.green  
              ),  
              child: Text("React.js",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),  
            ),  
            Container(  
              margin: EdgeInsets.all(15.0),  
              padding: EdgeInsets.all(8.0),  
              decoration:BoxDecoration(  
                  borderRadius:BorderRadius.circular(8),  
                  color:Colors.green  
              ),  
              child: Text("Flutter",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),  
            ),  
            Container(  
              margin: EdgeInsets.all(12.0),  
              padding: EdgeInsets.all(8.0),  
              decoration:BoxDecoration(  
                  borderRadius:BorderRadius.circular(8),  
                  color:Colors.green  
              ),  
              child: Text("MySQL",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),  
            )  
          ]  
      ),  
    );  
  }  
}  

 

Output:

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Column Widget

The children of this widget are arranged vertically on the screen by this widget. In other words, a vertical array of child widgets will be expected. We must wrap the child widgets in an Expanded widget if they are required to fill the available vertical space.

Because the widgets are displayed within the viewable view, a column widget does not appear to be scrollable. As a result, having more children in a Column than will fit in the available area is regarded incorrect. The ListView Widget is required to create a scrollable list of column widgets.

The properties mainAxisAlignment and crossAxisAlignment can also be used to regulate how a column widget aligns its children. The cross-axis of the column will be horizontal, while the main axis will be vertical.

Let's look at an example where we're going to align the content such that there's an even amount of space between the children in a column.

import 'package:flutter/material.dart';  
void main() { runApp(MyApp()); }  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
        home: MyHomePage()  
    );  
  }  
}  
class MyHomePage extends StatefulWidget {  
  @override  
  _MyHomePageState createState() => _MyHomePageState();  
}  
class _MyHomePageState extends State<MyHomePage> {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text("Flutter Column Example"),  
      ),  
      body: Column(  
          mainAxisAlignment: MainAxisAlignment.spaceBetween,  
          children:<Widget>[  
            Container(  
              margin: EdgeInsets.all(20.0),  
              padding: EdgeInsets.all(12.0),  
              decoration:BoxDecoration(  
                  borderRadius:BorderRadius.circular(8),  
                  color:Colors.red  
              ),  
              child: Text("React.js",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),  
            ),  
            Container(  
              margin: EdgeInsets.all(20.0),  
              padding: EdgeInsets.all(12.0),  
              decoration:BoxDecoration(  
                  borderRadius:BorderRadius.circular(8),  
                  color:Colors.red  
              ),  
              child: Text("Flutter",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),  
            ),  
            Container(  
              margin: EdgeInsets.all(20.0),  
              padding: EdgeInsets.all(12.0),  
              decoration:BoxDecoration(  
                  borderRadius:BorderRadius.circular(8),  
                  color:Colors.red  
              ),  
              child: Text("MySQL",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),  
            )  
          ]  
      ),  
    );  
  }  
}  

Output:

Frequently Asked Questions

What are Flutter dev tools?

DevTools is a suite of tools for developers that works on Flutter and Dart. It includes layout inspection tools, memory tools, performance tools, and basically all the debugging tools you might need to become a productive and efficient flutter developer, all in one place.

What software does the Flutter app use?

Flutter is Google's portable UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

What are Dart dev tools?

Dart Dev Tools is a suite of debugging and performance tools for Flutter and Dart. These tools are divided as part of the dart tool and interact with tools such as dart run, IDEs, and web dev.

What are dev tools?

DevTools is a collection of tools for a web developer that is built for developers directly into the browser "Google Chrome." These tools allow you to view and change/manipulate the DOM, change a page's styles (CSS) in a preview environment, and work with JavaScript by enabling you to debug, view messages, and run JavaScript code in the console.

What software does the Flutter app use?

Flutter is Google's portable UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Conclusion

In this article, we have studied Flutter Row and Column in detail. We hope that this article has provided you with the help to enhance your knowledge regarding flutter row and column and if you would like to learn more, check out our articles on flutter tableflutter tabbar and flutter forms. .

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enrol in our courses and refer to the mock test and problems available, Take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow.

Merry Learning!

Topics covered
1.
Introduction
2.
Row Widget
3.
Column Widget
4.
Frequently Asked Questions
4.1.
What are Flutter dev tools?
4.2.
What software does the Flutter app use?
4.3.
What are Dart dev tools?
4.4.
What are dev tools?
4.5.
What software does the Flutter app use?
5.
Conclusion