WIdgets are everything in Flutter. Almost all the widgets in flutter beside Row and Column widgets can have only one child inside its body but Row and Column widgets are the only widgets that give features of having multiple children inside a single widget.

Row Widget in Flutter

Row widget is the widget that can have multiple children widgets inside a single widget. Row widgets are arranged horizontally in Flutter application. Row widget in flutter can have multiple children widget in flutter so that it is the most useful widget in flutter application development. The Row Widget does not scroll because they are arranged vertically so what if you multiple lines of widgets and want them to be able to scroll, In that case, you should consider using ListView Class.

Sample code of Row widget having multiple children in a flutter:-

 import "package:flutter/material.dart";

void main() => runApp(MaterialApp(debugShowCheckedModeBanner: false, home: MyApp(),));
//debugShowCheckedModeBanner is use to remove the top debug banner(not compulsary)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Review2Tech Application"),
        ),
        body: Container(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Container(
                child: Text("This is Text Widget"),
              ),
              Container(
                child: RaisedButton(onPressed: (){ }, child: Text("Raised Button")),
              ),
              Text("This is third children of Row Widget"),
            ]
          )
        ),
    );
  }
}

Column Widget in Flutter

Column widget is the widget in flutter application which can have multiple children inside it arranged vertically one after another. Column widget also does not scroll on-screen so you want widgets to be scrollable then consider using ListView class. Almost all properties in Row and Column widgets are the same.

Sample code of Column widget having multiple children in a flutter:-

import 'package:flutter/cupertino.dart';
import "package:flutter/material.dart";

void main() => runApp(MaterialApp(debugShowCheckedModeBanner: false, home: MyApp(),));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Review2Tech Application"),
        ),
        body: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                child: Text("This is Text Widget"),
              ),
              Container(
                child: RaisedButton(onPressed: (){ }, child: Text("Raised Button")),
              ),
              Text("This is third children of Column Widget"),
            ]
          )
        ),
    );
  }
}

CrossAxis Alignment in Row and Column

CrossAxis alignment is the process of aligning both Row and Column content/children either at the start of the screen, center of the screen, end of the screen, to stretch the children or in the baseline. It is basically the positioning of the children in different corners of the screen.

There is also another popular property of Row and Column to align the text like cross-axis alignment. Another one is MainAxis alignment which is used to positioning the child widgets on the main axis.

The output of Row and Column Widget in Flutter

Row and Column Widget in Flutter

Complete Flutter Series List: Click here 

Categories: Blog Tags: flutter, review2tech flutter series, column widget, row widget, children in flutter, flutter android, flutter ios


3 Comments

  • Comment

    air max 97

    2020-08-09 01:53:44

    The following time I learn a blog, I hope that it doesnt disappoint me as a lot as this one. I mean, I do know it was my choice to read, but I really thought youd have something fascinating to say. All I hear is a bunch of whining about something that you could possibly fix in case you werent too busy in search of attention.

    Reply

  • Comment

    kyrie 6 shoes

    2020-08-11 02:23:26

    I and my pals ended up going through the good advice on your web blog and all of the sudden I got a horrible feeling I had not expressed respect to the website owner for those techniques. All the men appeared to be as a result excited to see them and now have actually been taking advantage of them. Thanks for indeed being indeed kind and also for picking out this sort of quality useful guides most people are really desirous to know about. Our own honest apologies for not saying thanks to you earlier.

    Reply

  • Comment

    yeezy boost 700

    2020-08-25 12:09:22

    I want to voice my affection for your kind-heartedness for men and women who have the need for assistance with that area of interest. Your special commitment to passing the solution around had become certainly productive and have all the time helped women like me to get to their objectives. Your amazing warm and friendly key points implies much a person like me and even further to my office workers. Warm regards; from all of us.

    Reply

Leave a comment