Flutter Row and Column

Row and column are the two main widgets of flutter. We can design any screen with this widget of the application. Row and column widgets are set on the screen horizontally or vertically as per the application requirements. We need to arrange its content in the row and column manner as the row and column widgets are required when designing UI of Mobile Application.

Constructor of column class : 

 Column(
 {   
  Key key,
  MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
  MainAxisSize mainAxisSize: MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
  TextDirection textDirection,
  VerticalDirection verticalDirection: VerticalDirection.down,
  TextBaseline textBaseline,
  List<Widget> children: const <Widget>[]}
 )

Constructor of row class : 

 Row(

{ Key key,
 MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
 MainAxisSize mainAxisSize: MainAxisSize.max,
 CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
 TextDirection textDirection,
 VerticalDirection verticalDirection: VerticalDirection.down,
 TextBaseline textBaseline: TextBaseline.alphabetic,
 List<Widget> children: const <Widget>[]}
 )

Properties of row and column widgets

  • ClipBehaviour: content on the row and column should be clipped or not.
  • Children : widgets are inside the row or column widget.
  • CrossAxisAligment: Row it is vertical and column it is horizontal.
  • Direction: direction used in the main axis.
  • TextDirection: text left -to-right or right-to-left.
  • Other list: mainAxisAlignment,mainAxisSize,runtimeType,textBaseline,verticalDirection

There two type row and column

  • Row 

 It creates a horizontal array of children 

Syntax:

 Row(
   mainAxisAlignment: MainAxisAlignment.spaceAround,
   children: <Widget>[
     Container(
       decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(10), color: Colors.blue),
       child: const Padding(
         padding: EdgeInsets.all(8.0),
         child: Text(
           "One",
           style: TextStyle(color: Colors.white, fontSize: 25),
        ),
      ),
    ),
    Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10), color: Colors.blue),
      child: const Padding(
        padding: EdgeInsets.all(8.0),
        child: Text(
          "two",
          style: TextStyle(color: Colors.white, fontSize: 25),
        ),
      ),
    ),
    Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10), color: Colors.blue),
      child: const Padding(
        padding: EdgeInsets.all(8.0),
        child: Text(
          "three",
          style: TextStyle(color: Colors.white, fontSize: 25),
        ),
      ),
    ),
    Container(Row
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10), color: Colors.blue),
      child: const Padding(
        padding: EdgeInsets.all(8.0),
        child: Text(
          "four",
          style: TextStyle(color: Colors.white, fontSize: 25),
        ),
       ),
     )
   ],
 )

 

  •  Column

   It creates a vertical  array of children 

 Column(
   mainAxisAlignment: MainAxisAlignment.spaceAround,
   children: <Widget>[
     Container(
       decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(10), color: Colors.blue),
       child: const Padding(
         padding: EdgeInsets.all(8.0),
         child: Text(
           "One",
           style: TextStyle(color: Colors.white, fontSize: 25),
        ),
      ),
    ),
    Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10), color: Colors.blue),
      child: const Padding(
        padding: EdgeInsets.all(8.0),
        child: Text(
          "two",
          style: TextStyle(color: Colors.white, fontSize: 25),
        ),
      ),
    ),
    Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10), color: Colors.blue),
      child: const Padding(
        padding: EdgeInsets.all(8.0),
        child: Text(
          "three",
          style: TextStyle(color: Colors.white, fontSize: 25),
        ),
      ),
    ),
    Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10), color: Colors.blue),
      child: const Padding(
        padding: EdgeInsets.all(8.0),
        child: Text(
          "four",
          style: TextStyle(color: Colors.white, fontSize: 25),
        ),
       ),
     )
   ],
 )

 


Step-by-Step Implementation
Step 1: Create a New Project in Android Studio (File >new flutter project).
Step 2: Adding material package.

Import method the runapp method in the main function call first while run the application​

 import 'package:flutter/material.dart';

 void main() {

     runApp(RunMyApp());

 }

Step 3: Creating a stateless widget. 

we can create a stateless widget that contains MaterialApp widget,Appbar,etc.

 class RunMyApp extends StatelessWidget {

     const RunMyApp({super.key});  

    @override

    Widget build(BuildContext context) {

    return MaterialApp(home);

     }

 }

Step 4: Final code of row widget
 import 'package:flutter/material.dart';
 import 'package:url_launcher/url_launcher.dart';

 void main() {
   runApp(rowexample());
 }

 class rowexample extends StatefulWidget {
   const rowexample({Key? key}) : super(key: key);

   @override
   _MyHomePageState createState() => _MyHomePageState();
 }

 class _MyHomePageState extends State<rowexample> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: const Text("Row Demo"),
      ),// AppBar

      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.blue),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "One",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.blue),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "two",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.blue),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "three",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.blue),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "four",
                style: TextStyle(color: Colors.white, fontSize: 25),
               ),
             ),
           )
         ],
       ),
     );
   }
 }

 

Step 4.1: Output of row widget

Step 5: Final code of column widget
 import 'package:flutter/material.dart';
 import 'package:url_launcher/url_launcher.dart';

 void main() {
  runApp(rowexample());
 }

 class rowexample extends StatefulWidget {
   const rowexample({Key? key}) : super(key: key);

   @override
   _MyHomePageState createState() => _MyHomePageState();
 }

 class _MyHomePageState extends State<rowexample> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: const Text("Column Demo"),
       ),// AppBar
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.blue),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "One",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.blue),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "Two",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.blue),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "Three",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.blue),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "Four",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
             ),
           )
         ],
       ),
     );
   }
 }

Step 5.1: Output of column widget


  Happy coding!

365Bloggy June 13, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 1218
Zoom In and Out to TextView in Android
0 418
How to underline text in textview
0 347
Shine Effect in Android
0 297
How to Create Marquee Text in Android?
0 268
Our blogs
Archive