How to Position Stack Widget in Center in Flutter?

· 4 min read
Position StackWidget in Center
Position StackWidget in Center

Hello Guys, Hope you doing amazing with Flutter. In this article, we will discuss How to Position Stack Widget in the Center in Flutter.

Let me brief you about Stack Widget and Positioned Widget again in Flutter.

What is Stack Widget in Flutter?

Stack Widget is a Widget that stacks its child widgets on top of each other and displays a single child at any time.

What is Positioned Widget in Flutter?

Positioned Widget is used to align the children’s relative parent widget. If not Positioned Widget, Align Widget is used to position the member of Stack Widget.

How to Position Stack Widget in Center in Flutter?

I have Widgets in a stack so I’d like to position my button bar in the bottom center of the stack but nothing works. The widget just sticks to the left side.

Answer 1:

Consider a code snippet that will look like the below.

Stack(
            children: <Widget>[
              Container(
                height: 350,
                width: MediaQuery.of(context).size.width,
                color: Colors.orangeAccent,
              ),
              Container(
                height: 200,
                width: 200,
                color: Colors.purple,
              ),
              Container(
                height: 150,
                width: 150,
                color: Colors.green,
              ),
            ],
          ),

The above code will give us output like below:

Stack Widget - Flutter Widget Guide By Flutter Agency

Stack Widget

You can also refer to this video:

Answer 2: Probably the most elegant way.

You can simply use the Alignment option present in Stack Widget

child: Stack(
  alignment: Alignment.center,
  children: <Widget>[

  ],
),

In some certain cases when you use Positioned Widget: ( right: 0.0, left:0.0, bottom:0.0).

Padding(
       padding: const EdgeInsets.all(4.0),
       child: Stack(
         children: <Widget>[
           Positioned(
               bottom: 0.0,
               right: 0.0,
               left: 0.0,
               child: Padding(
                 padding: const EdgeInsets.symmetric(horizontal: 8.0),
                 child: Container(
                     color: Colors.blue,
                     child: Center(
                       child: Text('Hello',
                         style: TextStyle(color: Color(0xffF6C37F),
                         fontSize: 46, fontWeight: FontWeight.bold),),
                     )
                 ),
               )
           ),
         ],
       ),
     ),

This would be the output of the above code:

Stack Widget - Flutter Widget Guide By Flutter Agency

Stack Widget

As you can see it would fill the whole width with the container even though you don’t want it and you just want the container to wrap its children. so for this, you can try the trick below:

Padding(
  padding: const EdgeInsets.all(4.0),
  child: Stack(
    children: <Widget>[
      Positioned(
          bottom: 0.0,
          right: 0.0,
          left: 0.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: Container(
                    color: Colors.blue,
                    child: Text('Hello',
                      style: TextStyle(color: Color(0xffF6C37F), 
                      fontSize: 46, fontWeight: FontWeight.bold),)
                ),
              ),
              Container(),
            ],
          )
      ),
    ],
  ),
),

You can change the Positioned with Align inside a Stack Widget:

Align(
  alignment: Alignment.bottomCenter,
  child: ... ,
),

Conclusion:

So in this article, we have been through How to Position Stack Widget in Center in Flutter.

Thanks for being with us on the Flutter Journey !!!

Keep Learning!!! Keep Fluttering!!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply