Home > Blockchain >  how to make the first container to be the last in flutter Row widget
how to make the first container to be the last in flutter Row widget

Time:12-29

I can do that using VerticalDirection.down in the Colum widget, but there is no horizontal direction property in the Row widget. Is there a way to put this into practice?

 Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blueGrey,
        body: SafeArea(
            child: Row(
                children: <Widget>[
            Container(
              child: Text("Hello world"),
              height: 100.0,
              width: 100.0,
              color: Colors.blueAccent,
            ),

            Container(
              child: Text("Hello World"),
              height: 100.0,
              width: 100.0,
              color: Colors.greenAccent,
            ),
            Container(
              child: Text("Hello World"),
              height: 100.0,
              width: 100.0,
              color: Colors.amberAccent,
            ),
          ],
        )),
      ),
    );
  }

CodePudding user response:

Try adding

Row(
  textDirection: TextDirection.rtl
  //...
)

Add mainAxisAlignment: MainAxisAlignment.end If you want the items to remain on the left side

Row(
  textDirection: TextDirection.rtl,
  mainAxisAlignment: MainAxisAlignment.end,
  //...
)

CodePudding user response:

Just add to this line, mainAxisAlignment: MainAxisAlignment.end

 Row(
    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                Container(
                  child: Text("Hello world"),
                  height: 100.0,
                  width: 100.0,
                  color: Colors.blueAccent,
                ),
    
                Container(
                  child: Text("Hello World"),
                  height: 100.0,
                  width: 100.0,
                  color: Colors.greenAccent,
                ),
                Container(
                  child: Text("Hello World"),
                  height: 100.0,
                  width: 100.0,
                  color: Colors.amberAccent,
                ),
              ],
            )

CodePudding user response:

put mainAxisAlignment: MainAxisAlignment.end inside row

  • Related