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?

check, [Flutter — Row/Column Cheat Sheet](https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041) — ArtiomLK, Feb 08 '19 at 03:02
Add sizedbox. Check this https://mightytechno.com/flutter-row-widget/ — Ishan Fernando, Dec 28 '19 at 09:50

CopsOnRoad · Answer 1 · 2019-12-01T07:25:25.140

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

Use SizedBox if you want to set some specific space

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

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

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

Use mainAxisAlignment according to your needs:

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

Use Wrap instead of Row and give some spacing

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

Use Wrap instead of Row and give it alignment

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

I think `Flex` isn't necessary as per Flutter docs: `If you know the main axis in advance, then consider using a Row (if it's horizontal) or Column (if it's vertical) instead, because that will be less verbose` — elllot, Feb 17 '23 at 04:39

score 200 · Answer 2 · answered Nov 22 '18 at 17:30

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

I'm looking for a solution where both of my text are of different length, so when I place them in center close to each other, together they seem off-center. — Karan Owalekar, Jul 30 '20 at 13:55

anmol.majhail · Accepted Answer · 2018-11-04T15:23:45.767

Removing Space-:

new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              GestureDetector(
                child: new Text('Don\'t have an account?',
                    style: new TextStyle(color: Color(0xFF2E3233))),
                onTap: () {},
              ),
              GestureDetector(
                onTap: (){},
                  child: new Text(
                'Register.',
                style: new TextStyle(
                    color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),
              ))
            ],
          ),

OR

GestureDetector(
            onTap: (){},
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Text('Don\'t have an account?',
                    style: new TextStyle(color: Color(0xFF2E3233))),
                new Text(
                  'Register.',
                  style: new TextStyle(
                  color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),
                )
              ],
            ),
          ),

Thanks for your help. With `GestureDetector` everything works great. — marcelo.wdrb, Nov 04 '18 at 15:27
One downside of using `GestureDetector`, you have to manage ripple effect (button feedback) on your own and without having this, you end up having a weird UX — CopsOnRoad, Nov 04 '18 at 16:03
Replace "GestureDetector" with "InkWell" and you will get back at least some kind of ripple effect. — gundrabur, May 15 '22 at 14:19

score 24 · Answer 4 · edited Dec 07 '20 at 02:48

You can use Spacers if all you want is a little bit of spacing between items in a row. The example below centers 2 Text widgets within a row with some spacing between them.

Spacer creates an adjustable, empty spacer that can be used to tune the spacing between widgets in a Flex container, like Row or Column.

In a row, if we want to put space between two widgets such that it occupies all remaining space.

    widget = Row (
    children: <Widget>[
      Spacer(flex: 20),
      Text(
        "Item #1",
      ),
      Spacer(),  // Defaults to flex: 1
      Text(
        "Item #2",
      ),
      Spacer(flex: 20),
    ]
  );

score 6 · Answer 5 · answered Nov 25 '20 at 08:31

6

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

answered Nov 25 '20 at 08:31

Guvanch

838
7
10

2

Since you are going down this road, why not just use SizedBox(width: 10).... – LearnToday Mar 25 '21 at 02:22

score 5 · Answer 6 · answered Apr 16 '20 at 15:21

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

score 5 · Answer 7 · answered Sep 19 '20 at 08:41

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

score 2 · Answer 8 · answered Mar 06 '20 at 14:16

2

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

answered Mar 06 '20 at 14:16

JTE

1,301
12
14

1

Thank you I cant believe they don't even have a padding property. I spent almost half an hour trying to figure out this imaginary space!!! – Zach Gonzalez Jan 18 '22 at 17:08

score 1 · Answer 9 · answered Jul 18 '23 at 10:08

With a column extension, use like:

Column.withSpacing(
  spacing: 20,
  children: [
    Text('One'),
    Text('Two'),
  ],
)

Extension:

import 'package:flutter/material.dart';

extension SpacingExtension on Column {
  static Column withSpacing({
    Key? key,
    required List<Widget> children,
    int spacing = 10,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline,
  }) {
    var spacedChildren = children.expand((widget) => [widget, SizedBox(height: spacing.toDouble())]).toList();
    spacedChildren.removeLast(); // Remove the extra SizedBox

    return Column(
      key: key,
      mainAxisAlignment: mainAxisAlignment,
      mainAxisSize: mainAxisSize,
      crossAxisAlignment: crossAxisAlignment,
      textDirection: textDirection,
      verticalDirection: verticalDirection,
      textBaseline: textBaseline,
      children: spacedChildren,
    );
  }
}

Or as a widget:

Use:

SpacingColumn(
  spacing: 20,
  children: [
    Text('One'),
    Text('Two'),
  ],
)

Widget:

import 'package:flutter/material.dart';

class SpacingColumn extends StatelessWidget {
  final List<Widget> children;
  final int spacing;
  final MainAxisAlignment mainAxisAlignment;
  final MainAxisSize mainAxisSize;
  final CrossAxisAlignment crossAxisAlignment;
  final TextDirection? textDirection;
  final VerticalDirection verticalDirection;
  final TextBaseline? textBaseline;

  SpacingColumn({
    Key? key,
    required this.children,
    this.spacing = 10,
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.mainAxisSize = MainAxisSize.max,
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    this.textBaseline,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: mainAxisAlignment,
      mainAxisSize: mainAxisSize,
      crossAxisAlignment: crossAxisAlignment,
      textDirection: textDirection,
      verticalDirection: verticalDirection,
      textBaseline: textBaseline,
      children: children.expand((widget) => [widget, SizedBox(height: spacing.toDouble())]).toList()..removeLast(),
    );
  }
}

score 0 · Answer 10 · answered Apr 26 '23 at 11:43

Here the another Custom method we can use everywhere for both Horizontal and Vertical Spacing

This method for custom Horizontal spacing

SizedBox horizontalSpace(space) => SizedBox(width: space);

This method for custom Vertical spacing

SizedBox verticalSpace(space) => SizedBox(height: space);

Set the space between Elements in Row Flutter

10 Answers10

Linked