CODEWITHSUNDEEP
flutterdartalignment
Enzo Saoud
Enzo Saoud

Reputation: 49

Container alignment inside a row

I'd like to know how can i align 3 different containers inside a row so 2 of then stay on the left and 1 stay on the right.

Like this: http://prntscr.com/tovlhw.

The way i did only works for this AVD as it uses pixels to make the position.


 
            GestureDetector(
            onTap: (){
              Navigator.push(context, MaterialPageRoute(builder: (context) => Favoritos()));
    },
                child: Row(
                   mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                         Container(
                            padding: EdgeInsets.fromLTRB(10,16,0,16),
                             color: Colors.white,
                                  child: Icon(Icons.favorite),
                                                                       ),

                           Container(
                              padding: EdgeInsets.fromLTRB(5,20,140,20),
                              color: Colors.white,
                                   child: Text('Favoritos'),
                                                                        ),

                           Container(
                              padding: EdgeInsets.fromLTRB(145,16,5,16),
                                color: Colors.white,
                                      child: Icon(Icons.keyboard_arrow_right),
                                                                        ),


    ],
    ),
    ),

Upvotes: 1

Views: 73

Answers (5)

S.R Keshav
S.R Keshav

Reputation: 2073

Container(
height: 100px
width:MediaQuery.of(context).size.width,
child:ListTile(
leading:Icon(Icons.favorite),
  title: Text(
      'Favourite',
    ),
    trailing: Icon(Icons.arrow_right),
)
)

Upvotes: 1

Laxman Kumar
Laxman Kumar

Reputation: 154

Hy, I would suggest you wrap the Row class inside a container class and give the height and width of the container to the maximum possible. This will give the row full rectangular area and then you can align children's of row class where ever you want.

Container(
        height: MediaQuery.of(context).size.height,
        padding: EdgeInsets.all(16),
        child:  Column(
            children: [
              Padding(
                padding: EdgeInsets.only(top: MediaQuery.of(context).size.height*0.08),
              ),
              Container(
                alignment: Alignment.centerRight,
                child: RaisedButton(
                ),
              ),
              Container(
                  alignment: Alignment.centerLeft,
                  child: Text()
              ),
             Container(
                alignment: Alignment.centerRight,
                padding: EdgeInsets.only(top: 28),
                child: RaisedButton(
                  child: Text('Submit',style: TextStyle(color: Colors.white),),
                ),
              ),
            ],
          ),
          ),

Upvotes: 1

Enzo Saoud
Enzo Saoud

Reputation: 49

Solved using:

                width: MediaQuery.of(context).size.width

Upvotes: 0

hewa jalal
hewa jalal

Reputation: 963

this can easily be done using the ListTile widget with a Card widget(if you also want the background color):

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      child: ListTile(
        title: Text(
          'Favourite',
          style: TextStyle(color: Colors.black),
        ),
        leading: Icon(Icons.favorite, color: Colors.black),
        trailing: Icon(Icons.arrow_right, color: Colors.black),
      ),
    );
  }
}

the result enter image description here

if you want to use the Row approach use Spacer like this: also keep in mind you can use Container height property to make your row bigger.

Container(
      color: Colors.white,
      child: Row(
        children: <Widget>[
          Icon(Icons.favorite, color: Colors.black),
          SizedBox(
            width: 10.0, // give the witdh you want between icon and text
          ),
          Text(
            'Favourite',
            style: TextStyle(color: Colors.black),
          ),
          Spacer(),
          Icon(Icons.arrow_right, color: Colors.black),
        ],
      ),
    );

the result: enter image description here

Upvotes: 1

A.J
A.J

Reputation: 726

Use a row with mainAxisAlignment: MainAxisAlignment.spaceBetween, to align two children evenly left and right, with the children being:

1) A row containing the 2 items to be placed on the left
2) container contating the item to be placed on the right

Check if this solves your problem

This works for any purpose but ListTile is the way to go for your case

Upvotes: 1

Related Questions