Flutter Container Positioning or alignment inside Row widget

Issue

I’m new in flutter. right now learning how to positioning or aligning widgets. I have two containers inside my row widget. I want to set my first container(which is red container) at the top left, and also want to set my second container(which is blue container) at the top right. how can I achieve this?

here is code sample :

class MyRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Row(
            children: <Widget>[
              Container(
                width: 100.0,
                height: 100.0,
                color: Colors.red,
              ),
              Container(
                width: 100.0,
                height: 100.0,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Solution

Positioned widget only use with Stack widget, so you can solve your problem using below example but with Row widget its may be not possible

Stack(children: <Widget>[
            Positioned(
              top: 5,
              left: 5,
              child: Container(
                width: 100.0,
                height: 100.0,
                color: Colors.red,
              ),),
            Positioned(
              top: 5,
              right: 5,
              child: Container(
                width: 100.0,
                height: 100.0,
                color: Colors.blue,
              ),),
          ],
)

Output :

enter image description here

Answered By – Sanjayrajsinh

Answer Checked By – Cary Denson (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *