CODEWITHSUNDEEP
flutterflutter-layout
TrulaBanana
TrulaBanana

Reputation: 21

How to use space between and Text in Row?

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

enter image description here

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

Upvotes: 1

Views: 754

Answers (3)

mjhansen3
mjhansen3

Reputation: 1003

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

Desired outcome!

Upvotes: 2

CopsOnRoad
CopsOnRoad

Reputation: 268404

Use Spacer() between two Text. 

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

Upvotes: 0

Ashish Rawat
Ashish Rawat

Reputation: 74

Use mainAxisAlignment to spaceBetween

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

Upvotes: 0

Related Questions