Position StackWidget in Center

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?

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: [
          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:

Stack Widget - Flutter Widget Guide By Flutter Agency

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 GuideFlutter ProjectsCode 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.

Abhishek Dhanani

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.

ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

✓ Valid number ✕ Invalid number
our share of the limelight

as seen on