How to Position Stack Widget in Center in Flutter?

How to Position Stack Widget in Center in Flutter?

Hello Guys, Hope you doing amazing with Flutter. So in this article, we will discuss How to Position the Stack Widget in the Center in Flutter. Let’s take a brief look at Stack Widget and Positioned Widget again in Flutter.

What is Stack Widget in Flutter?

A 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

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: [
          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: const Center(
                      child: Text(
                        'Hello',
                        style: TextStyle(
                            color: Color(0xffF6C37F),
                            fontSize: 46,
                            fontWeight: FontWeight.bold),
                      ),
                    )),
              )),
        ],
      ),
    ),

This would be the output of the above code:

Hence 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!!!

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency 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.