CODEWITHSUNDEEP
flutter
Oto-obong Eshiett
Oto-obong Eshiett

Reputation: 1679

How to align 2 text widgets in the same row to the start and end of a row in flutter?

i have a row in flutter which contains 2 text widget, i want to add one text widget to the beginning of the row and another to the end:

this is my code :

  Row(
                            children: <Widget>[
                              Text(
                                "eshiett1995",
                                textAlign: TextAlign.left,
                                style: TextStyle(fontWeight: FontWeight.bold),
                              ),
                              Padding(padding: EdgeInsets.only(right: 10.0),),
                              Text(
                                "4:33am",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.left,
                                style: TextStyle(fontWeight: FontWeight.bold),
                              )

                            ],
                          ),

and presently this is how my code looks visually :

enter image description here

i want the eshiett1995 to stay at the beginning, while the time which is 4:33am, to move to the end

Upvotes: 10

Views: 34423

Answers (6)

Jesswin
Jesswin

Reputation: 281

You can Use the Spacer() Widget to push the other Widget at End of the Row.

Row(children:[Text("Some Data"), Spacer(), Text("Some Data")]),

This will give you the output you want, without setting any other Alignments

Upvotes: 14

user1462442
user1462442

Reputation: 8202

Did you try the Spacer class? https://docs.flutter.io/flutter/widgets/Spacer-class.html

Add Spacer widget between the two text.

Upvotes: 26

Hitesh Dhamshaniya
Hitesh Dhamshaniya

Reputation: 2182

As you have taken row widget. you only need to set a property called of that widget. Adding another widget will may added unnecessary complexity. 

mainAxisAlignment: MainAxisAlignment.spaceBetween,

Only above property of row required to add. 

Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    title,
                    style: TextStyle(
                        color: Colors.black54,
                        fontSize: 18.0,
                        fontWeight: FontWeight.w500),
                  ),
                  Text(
                    price,
                    softWrap: true,
                  )
                ],
              ),
              RaisedButton(
                color: Colors.amberAccent[100],
                onPressed: () {},
                child: Text("Buy"),
              )
            ],
          )

Output : Row property MainAxisAlignment.spaceBetween

Upvotes: 3

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29438

You could also use Expanded with right alignment in second Text

Row(
                        children: <Widget>[
                          Text(
                            "eshiett1995",
                            textAlign: TextAlign.left,
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          Expanded(
                              child: Text(
                            "4:33am",
                            textDirection: TextDirection.ltr,
                            textAlign: TextAlign.right,
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ))
                        ],
                      )

Upvotes: 8

chemamolins
chemamolins

Reputation: 20548

You just have to add the Row property mainAxisAlignment: MainAxisAlignment.spaceBetween,.

You can remove the Padding.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  //mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    Text(
      "eshiett1995",
      textAlign: TextAlign.left,
      style: TextStyle(fontWeight: FontWeight.bold),
    ),
    Text(
      "4:33am",
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.left,
      style: TextStyle(fontWeight: FontWeight.bold),
    )
  ],
),

Upvotes: 10

Manish Dubey
Manish Dubey

Reputation: 4306

You can use AxisAlignment or SizedBox to separate both texts on the most left and most right positions.

Upvotes: 2

Related Questions