Set the space between Elements in Row Flutter

Question

Code:

new Container(           alignment: FractionalOffset.center,           child: new Row(             mainAxisAlignment: MainAxisAlignment.spaceEvenly,             children: <Widget>[               new FlatButton(                 child: new Text('Don\'t have an account?', style: new TextStyle(color: Color(0xFF2E3233))),               ),               new FlatButton(                 child: new Text('Register.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),                 onPressed: moveToRegister,               )             ],           ),         ),   

And here is the result: https://dartpad.dev/?id=6bbfc6139bdf32aa7b47eebcdf9623ba

How to fix that the two FlatButton elements are side by side without space between the center of the screen width?

Answer 1

There are many ways of doing it, I'm listing a few here:

1. Use SizedBox if you want to set some specific space

   Row(   children: <Widget>[     Text("1"),     SizedBox(width: 50), // give it width     Text("2"),   ], ) 

   

---

2. Use Spacer if you want both to be as far apart as possible.

   Row(   children: <Widget>[     Text("1"),     Spacer(), // use Spacer     Text("2"),   ], ) 

   

---

3. Use mainAxisAlignment according to your needs:

   Row(   mainAxisAlignment: MainAxisAlignment.spaceEvenly, // use whichever suits your need   children: <Widget>[     Text("1"),     Text("2"),   ], ) 

   

---

4. Use Wrap instead of Row and give some spacing

   Wrap(   spacing: 100, // set spacing here   children: <Widget>[     Text("1"),     Text("2"),   ], ) 

   

---

5. Use Wrap instead of Row and give it alignment

   Wrap(   alignment: WrapAlignment.spaceAround, // set your alignment   children: <Widget>[     Text("1"),     Text("2"),   ], ) 

   

Answer 2

MainAxisAlignment

start - Place the children as close to the start of the main axis as possible.

end - Place the children as close to the end of the main axis as possible.

center - Place the children as close to the middle of the main axis as possible.

spaceBetween - Place the free space evenly between the children.

spaceAround - Place the free space evenly between the children as well as half of that space before and after the first and last child.

spaceEvenly - Place the free space evenly between the children as well as before and after the first and last child.

Example:

  child: Row(         mainAxisAlignment: MainAxisAlignment.spaceBetween,         children: <Widget>[           Text('Row1'),           Text('Row2')         ],       )