27

Trying to right align a container with text view child, it has a row parent which is inside another column, tried number of solutions from Stack Overflow, didn't work.

Code

///Transactions Heading
        new Column(
         children: <Widget>[
            new Row(
              children: <Widget>[
                new Container(
                  alignment: Alignment.centerLeft,
                  margin: new EdgeInsets.only(top: 20.0, left: 10.0),
                  child: new Text(
                    "Transactions",
                    style: new TextStyle(
                      color: primaryTextColor,
                      fontSize: 25.0,
                      fontWeight: FontWeight.w700,
                      letterSpacing: 0.1,
                    ),
                  ),
                ),
                new Container(
                  margin: new EdgeInsets.only(top: 25.0),
                  child: new Text(
                    currentGoalTransactions.length.toString() + " items",
                    style: new TextStyle(
                        color: darkHeadingsTextColor, fontSize: 15.0),
                  ),
                ),
              ],
            ),
       ]);

Want to align the 2 items text to the right

Screenshot

Musa Usman
  • 691
  • 4
  • 10
  • 21

3 Answers3

50

Use the mainAxisAlignment property in Row widget.

new Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween, 
    ...
)
Vinoth Kumar
  • 12,637
  • 5
  • 32
  • 38
8

Use Spacer which will get remaining space and will divide the widget equally

     Row(
        children: <Widget>[
          Text("Text 1", style: TextStyle(fontSize: 20),),
          Spacer(),
          Text("Text 2", style: TextStyle(fontSize: 20),),
          Spacer(),
          Text("Text 3", style: TextStyle(fontSize: 20),),
        ],
      ),

Output:

enter image description here

Jitesh Mohite
  • 31,138
  • 12
  • 157
  • 147
2

Screenshot:

enter image description here


You can also try Wrap like this:

Wrap(
  spacing: 50, // spacing between each of the widgets below
  children: <Widget>[
    Text("One"),
    Text("Two"),
    Text("Three"),
  ],
)
CopsOnRoad
  • 237,138
  • 77
  • 654
  • 440