Search

Tut 4 Row || Flutter App Development

I am hoping that you guys already read the previous tutorials like Container , Basic etc. In Last Tutorial we studied about Container and its properties. It was a single child property which act a empty box which can modified according to user needs. Now in this tutorial we will study about how we can deal with multichild widgets.

Row :- Row is a multichild widget which contains more then one widget in the form of Row. As its name suggest Row widget align its child widgets in a Row. It is an array of widgets horizontally. For more proper understanding , You all guys have already seen the whatsapp home page. In this page on top you have some features like Whatsapp name , search icon and menu button which is shown in below image.



This can be done with Row widget because it align its child in a Row manner. There are different properties of Row widgets which are define below:-

Row({

Key key

MainAxisAlignment mainAxisAlignment

MainAxisSize mainAxisSize

CrossAxisAlignment crossAxisAlignment

TextDirection textDirection

VerticalDirection verticalDirection

TextBaseLine textBaseLine

List<Widget> children = <Widget>[]

})

Let’s discuss each property one by one

1. children :- children is a List of widget type which can take multiple widget in it. Like multiple containers with different size and colors. You can add as you want widgets in this List. Like




2. mainAxisAlignment:- This widget controls how the children Row widget align on Main Axis (Horizontally). It have many properties like mainAxisAlignment: MainAxisAlignment.center, start, spaceAround, start etc. For proper understanding see below images.




OUTPUT:-




If mainAxisAlignment : MainAxisAlignment.spaceAround


OUTPUT:-




Like this you can change the properties and find the changes J


3. mainAxisSize:- This property has two values max and min. This property means if its value is max then it takes complete size horizontally of the parent widget and If its value is min then its only take size according of the children total width.

4. crossAxisAlignment:- This widget controls how the children Row widget align on Cross Axis (Vertically). It have many properties like crossAxisAlignment: CrosssAxisAlignment.center, start , end , baseline etc. For proper understanding see below images.


If crossAxisAlignment: CrossAxisAlignment.start

Ouput




If crossAxisAlignment: CrossAxixAlignment.end

Output




Like this you can change the properties and find the changes J


5. verticalDirection:- Vertical Direction as its name suggest it controls the vertical alignment of Row. It is an enum which means it have some fix values as same as main and crossAxisAlignment. It have two properties up and down.


verticalDirection: VerticalDirection.up


Output




We will discuss the text properties when we will use text.


Full Code:-


return Scaffold(
      backgroundColor: Colors.lightBlue,
      body: Center(
        child: Container(
          height: 100,
          width: 300,
          color: Colors.lightGreen,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.end,
            verticalDirection: VerticalDirection.up,
            children: <Widget>[
 Container(
                height: 70,
                width: 70,
                color: Colors.red,
              ),
 Container(
                height: 70,
                width: 70,
                color: Colors.red,
              ),
 Container(
                height: 70,
                width: 70,
                color: Colors.red,
              ),
            ],
          ),
        ),
      ),
    );



1 view0 comments

Related Posts

See All

Tut 5 Column || Flutter App Development

If you already read about Row widget from our previous blog then it will be very easy for you to understand about Column widgets because properties are almost same with Row widget. Column:- Column is

  • Facebook
  • Instagram
  • LinkedIn
  • 1024px-Telegram_logo.svg
  • download
  • YouTube
  • Google Play