Set the space between Elements in Row Flutter

Question

Code:

new Container(
          alignment: FractionalOffset.center,
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
             


        

Answer 1

Just add "Container(width: 5, color: Colors.transparent)," between elements

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))),
          ),
            Container(width: 5, color: Colors.transparent),
          new FlatButton(
            child: new Text('Register.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
            onPressed: moveToRegister,
          )
        ],
      ),
    ),  

Answer 2

To make an exact spacing, I use Padding. An example with two images:

Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: <Widget>[
      Expanded(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Image.asset('images/user1.png'),
        ),
      ),
      Expanded(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Image.asset('images/user2.png'),
        ),
      )
    ],
  ),

Answer 3

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 4

Row(
 children: <Widget>[
  Flexible(
   child: TextFormField()),
  Container(width: 20, height: 20),
  Flexible(
   child: TextFormField())
 ])

This works for me, there are 3 widgets inside row: Flexible, Container, Flexible

Answer 5

I believe the original post was about removing the space between the buttons in a row, not adding space.

The trick is that the minimum space between the buttons was due to padding built into the buttons as part of the material design specification.

So, don't use buttons! But a GestureDetector instead. This widget type give the onClick / onTap functionality but without the styling.

See this post for an example.

https://stackoverflow.com/a/56001817/766115

Answer 6

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