Flutter Row and Column

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 table, flutter 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!