how do i center widgets inside row?

Question

So I have this code I tried using center() widget but I can't get the element in the center here's how they look.

the funny thing is the green container consumes all the screen width but the widgets inside the container are not aligned to center horizontally.

here's the code

    Center(
        child: Container(
          color : Colors.green,
          alignment: Alignment(0.0, 0.0),
            child:  Row(
                children: <Widget>[
                    InkWell(
                        child: Text(
                            " Likes \n" + document['likes'].toString()),
                        onTap: () => LikeQuote(document),
                    ),
                    InkWell(
                        child: Text(" Dislikes \n" +
                            document['dislikes'].toString()),
                        onTap: () => DislikeQuote(document),
                    ),
                    InkWell(
                        child: Text(" Shares \n" +
                            document['shares'].toString()),
                        onTap: () => ShareQuote(),
                    ),
                ],
            ),
        ),
    ),

I want the like dislike and share to be in the center . How do i do that?

In your Row, try mainAxisAlignment: MainAxisAlignment.center — mirkancal, Aug 23 '19 at 10:31
Possible duplicate of [How to centred column and row item in Flutter?](https://stackoverflow.com/questions/50871033/how-to-centred-column-and-row-item-in-flutter) — mirkancal, Aug 23 '19 at 10:32

Atree Leaf · Answer 1 · 2019-08-23T10:46:32.093

2

You should use mainAxisAlignment

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children:[ comp1(), comp2()

edited Aug 23 '19 at 10:46

answered Aug 23 '19 at 10:34

Atree Leaf

87
3

where should i use this? – professional debugger Aug 23 '19 at 10:43
as a property of the Row constructor, I've updated the answer – Atree Leaf Aug 23 '19 at 10:47

score 1 · Accepted Answer · answered Aug 25 '19 at 05:33

1

To align the widget within a Row or Columns, we can use these parameters inside Row or Columns.

  mainAxisAlignment: MainAxisAlignment.center,              
  crossAxisAlignment: CrossAxisAlignment.center,

Row:

mainAxisAlignment determine horizontally align the path
crossAxisAlignment determine vertically align the path

Column:

mainAxisAlignment determine vertically align the path
crossAxisAlignment determine horizontally align the path

answered Aug 25 '19 at 05:33

Hamed Rahimvand

582
1
5
13

ok that works fine what if i want it like dislike and share widgets to get a width of 33% of the screen width each. – professional debugger Aug 25 '19 at 14:04
to use percent in height and width, you can use of FractionallySizedBox widget. if you want to fill empty places in Row or Column, you can use of Expanded widget for them children. @TauseefAhmad – Hamed Rahimvand Aug 26 '19 at 04:47

score 0 · Answer 3 · answered Aug 23 '19 at 10:40

Container(
          color : Colors.green,
          alignment: Alignment(0.0, 0.0),

          child:  Row(
             mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(
                child: Text(
                    " Likes \n" + document['likes'].toString()),
                onTap: () => LikeQuote(document),
              ),
              InkWell(
                child: Text(" Dislikes \n" +
                    document['dislikes'].toString()),
                onTap: () => DislikeQuote(document),
              ),
              InkWell(
                child: Text(" Shares \n" +
                    document['shares'].toString()),
                onTap: () => ShareQuote(),
              ),
            ],
          )
          ,
        ),

how do i center widgets inside row?

3 Answers3