How to use space between and Text in Row?

Question

I am trying to use space between to separate two Text widgets but none of mainAxisAlignment options works. Screenshot of code below.

In the picture, you can see Text2 and Text3 are glued together I want them separated. First child in main Row needs to be expanded 1. Second (the problematic one) needs to be like expanded 0.

Container(
  color: Colors.blue,
  child: Row(
    children: [
      Expanded(
        child: Container(
          color: Colors.orange,
          child: Text('Text1'),
        ),
        flex: 1,
      ),
      Column(
        children: [
          Row(
            children: [Text('Text2'), Text('Text3')],
          ),
          Text('Long text Long text Long text'),
        ],
      )
    ],
  ),
)

mjhansen3 · Accepted Answer · 2019-06-16 15:30:21Z

so I realized you used Expanded widget for the first child but not for the second. Also, you need to add mainAxisAlignment: MainAxisAlignment.spaceBetween to the Row widget. Below is a complete code for what you want to achieve.

Container(
    color: Colors.blue,
    child: Row(
        children: [
            Expanded(
                child: Container(
                    color: Colors.orange,
                    child: Text('Text1'),
                ),
                flex: 1,
            ),
            Expanded(
                child: Column(
                    children: [
                        Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                                Text('Text2'),
                                Text('Text3')
                            ],
                        ),
                        Text('Long text Long text Long text'),
                    ],
                ),
            )
        ],
    ),
)

Ashish Rawat · Accepted Answer · 2019-06-16 13:10:21Z

0

Use mainAxisAlignment to spaceBetween

 Row(
      mainAxisAlignment:MainAxisAlignment.spaceBetween,
      children: [Text('Text2'), Text('Text3')],
     ),

answered Jun 16, 2019 at 13:10

Ashish Rawat

744 bronze badges

1 Comment

TrulaBanana Over a year ago

It doesn't work. None of the mainAxisAlignment options works. Maby is the way flutter calculate Text widgets?

CopsOnRoad · Accepted Answer · 2019-06-16 15:24:52Z

0

Use Spacer() between two Text.

Text("Text2"), 
Spacer(), 
Text("Text3")

answered Jun 16, 2019 at 15:24

CopsOnRoad

271k97 gold badges702 silver badges471 bronze badges

3 Comments

TrulaBanana Over a year ago

This throws some layout error. I ended up using IntrinsicWidth on Column widget.

CopsOnRoad Over a year ago

Try to avoid IntrinsicWidth as much as possible.

TrulaBanana Over a year ago

Read that in doc :) but really have no idea what use instead to get desired design.

Collectives™ on Stack Overflow

How to use space between and Text in Row?

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related