CODEWITHSUNDEEP
flutterflutter-layout
Deepak Kumar
Deepak Kumar

Reputation: 1294

Align element independent in flutter Row/Column

I am new to the flutter and recently wide coding I came to a scenario where I have to indecently align the elements in the row. I have 3 child elements lets call it A, B and C. My requirement is to to the A and B to the extreme left of the row and the element C to the extreme right.

Expectation: enter image description here

My code:

Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              CircleAvatar(
                backgroundImage: NetworkImage(''),
                radius: 30,
              ),
              SizedBox(
                width: 10,
              ),
              Flexible(
                child: Text('name', overflow: TextOverflow.ellipsis,),
              ),
              SizedBox(
                width: 10,
              ),
              Container(
                child: ButtonTheme(
                  height: 25.0,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(100.0)),
                  child: RaisedButton(
                    child: Text(
                      'Challenge',
                      style: TextStyle(color: Colors.white, fontSize: 12),
                    ),
                    onPressed: () {},
                  ),
                ),
              ),
            ],
          ),

But the output is coming like this: enter image description here

When I tried using Spacer() the output comes like this: enter image description here

Anyone can please help me with this. Thanks in advance.

Upvotes: 2

Views: 395

Answers (3)

timilehinjegede
timilehinjegede

Reputation: 14033

You have to wrap your Text widget in an Expanded widget like the example below. Try this, it works perfectly, Check code below:


 Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                CircleAvatar(
                  backgroundImage: NetworkImage(''),
                  radius: 30,
                ),
                SizedBox(
                  width: 10,
                ),
                Expanded(
                 // wrap your text widget with an Expanded widget
                  child: Text(
                    'name',
                    overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.start,
                  ),
                ),
                SizedBox(
                  width: 10,
                ),
                Container(
                  child: ButtonTheme(
                    height: 25.0,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(100.0)),
                    child: RaisedButton(
                      child: Text(
                        'Challenge',
                        style: TextStyle(color: Colors.white, fontSize: 12),
                      ),
                      onPressed: () {},
                    ),
                  ),
                ),
              ],
            ),

I hope this helps you.

Upvotes: 2

Alok
Alok

Reputation: 8978

Try this, it should work for you. 

Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
      CircleAvatar(
         backgroundImage: NetworkImage(''),
         radius: 30,
      ),
      SizedBox(width: 10),
      Expanded(
        child: Text('name', align: TextAlign.start, overflow: TextOverflow.ellipsis),
      ),
      SizedBox(width: 10),
      Container(
        child: ButtonTheme(
           height: 25.0,
           shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(100.0)),
               child: RaisedButton(
                  child: Text('Challenge', style: TextStyle(color: Colors.white, fontSize: 12)),
                  onPressed: () {},
               )
           )
        )
  ]
)

Upvotes: 2

Payam Zahedi
Payam Zahedi

Reputation: 855

wrap your text with Expanded widget and set your textAlign of your text widget to TextAlign.start like below code:

 Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                CircleAvatar(
                  backgroundImage: NetworkImage(''),
                  radius: 30,
                ),
                SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: Text(
                    'name',
                    overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.start,
                  ),
                ),
                SizedBox(
                  width: 10,
                ),
                Container(
                  child: ButtonTheme(
                    height: 25.0,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(100.0)),
                    child: RaisedButton(
                      child: Text(
                        'Challenge',
                        style: TextStyle(color: Colors.white, fontSize: 12),
                      ),
                      onPressed: () {},
                    ),
                  ),
                ),
              ],
            ),

Upvotes: 3

Related Questions