CODEWITHSUNDEEP
androidflutter
professional debugger
professional debugger

Reputation: 345

how do i center widgets inside row?

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. here's the snip

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?

Upvotes: 0

Views: 655

Answers (3)

Hamed Rahimvand
Hamed Rahimvand

Reputation: 630

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

Upvotes: 1

Atree Leaf
Atree Leaf

Reputation: 83

You should use mainAxisAlignment

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

Upvotes: 2

BIS Tech
BIS Tech

Reputation: 19514

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(),
              ),
            ],
          )
          ,
        ),

Upvotes: 0

Related Questions