How to Position Widget in Stack Layout in Flutter

In this example, we are going to show you how to align or position widget in stack layout. You will learn to align at top, left, right, bottom, center, topCenter, bottomCenter, centerLeft, centerRight, or anywhere inside Stack in Flutter. See the example below:

Stack(
  children: [ 

     //manual position using left, top, right, bottom
      Positioned(
        left:0, 
        top:0,
        //you can use "right" and "bottom" too
        child:Container(
          height:100,
          width:100,
          color: Colors.purple,
          child: Text("Box VI"),
        )
      ),
  ]
)

Stack(
  alignment: Alignment.center,
  children: [ 
  ]
)

OR

Stack(
  children: [ 
    
     //Alignment at Center
      Container(
        alignment: Alignment.center,
        child:Container(
          height:100,
          width:100,
          color: Colors.blueAccent,
          child: Text("Box III"),
        ) 
      ),

  ]
)

You can use Container() widget or Align() widget for alignment purpose.

Stack(
  children: [ 

      //align to top center using Container();
      Container(
        alignment: Alignment.topCenter,
        child:Container(
          height:100,
          width:100,
          color: Colors.redAccent,
          child: Text("Box II"),
        )
      ),
    
  ]
)

Stack(
  children: [ 

      //align at bottom center using Align()
      Align(
        alignment: Alignment.bottomCenter,
        child:Container(
          height:100,
          width:100,
          color: Colors.greenAccent,
          child: Text("Box I"),
        )
      ),

  ]
)

Stack(
  children: [ 

      //alignment at veritically center, and at left horizontally
      Align(
        alignment: Alignment.centerLeft,
        child:Container(
          height:100,
          width:100,
          color: Colors.orangeAccent,
          child: Text("Box IV"),
        )
      ),

  ]
)

Stack(
  children: [ 

      //alignment at veritically center, and at right horizontally
      Align(
        alignment: Alignment.centerRight,
        child:Container(
          height:100,
          width:100,
          color: Colors.greenAccent,
          child: Text("Box V"),
        )
      ),

  ]
)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
         home: Home()
      );
  }
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Position Widget in Stack"),
            backgroundColor: Colors.redAccent
         ),
          body: Container(
            padding: EdgeInsets.all(10),
             child: 
              Stack(
                children: [ 

                    //align at bottom center using Align()
                    Align(
                      alignment: Alignment.bottomCenter,
                      child:Container(
                        height:100,
                        width:100,
                        color: Colors.greenAccent,
                        child: Text("Box I"),
                      )
                    ),

                    //align to top center using Container();
                    Container(
                      alignment: Alignment.topCenter,
                      child:Container(
                        height:100,
                        width:100,
                        color: Colors.redAccent,
                        child: Text("Box II"),
                      )
                    ),
                  
                  //Alignment at Center
                    Container(
                      alignment: Alignment.center,
                      child:Container(
                        height:100,
                        width:100,
                        color: Colors.blueAccent,
                        child: Text("Box III"),
                      ) 
                    ),

                    //alignment at veritically center, and at left horizontally
                    Align(
                      alignment: Alignment.centerLeft,
                      child:Container(
                        height:100,
                        width:100,
                        color: Colors.orangeAccent,
                        child: Text("Box IV"),
                      )
                    ),

                    //alignment at veritically center, and at right horizontally
                    Align(
                      alignment: Alignment.centerRight,
                      child:Container(
                        height:100,
                        width:100,
                        color: Colors.greenAccent,
                        child: Text("Box V"),
                      )
                    ),

                  //manual position with left, top, right, bottom
                    Positioned(
                      left:0, 
                      top:0,
                      //you can use "right" and "bottom" too
                      child:Container(
                        height:100,
                        width:100,
                        color: Colors.purple,
                        child: Text("Box VI"),
                      )
                    ),
                ]
              )
          )
    );
  } 
}

You can furthermore use the same method to position widget at left, right, top, bottom, or anywhere you want. 

In this way, you can position the widget inside stack layout at the center, topCenter, bottomCenter, top, bottom, left, right, centerLeft, centerRight in Flutter app.

No any Comments on this Article


Please Wait...