Flutter: bottom center widget in stack

flutter positioned center horizontally
flutter stack( alignment)
positioned widget - flutter
flutter stack height
flutter stack expanded
flutter stack widget overflow
flutter center widget
flutter container alignment center

I wanna achieve like this pic. to simplify I created a stack that contains two Containers. i want to bottom center the small container using Align widget but its not working! it is always remaining at the top

Stack(
              overflow: Overflow.visible,
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: 170,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(0),
                          bottomRight: Radius.circular(0))),
                  // child: Image.network(tutorImage),
                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    width: 60,
                    height: 60,
                    color: Colors.black,
                  ),
                )
              ],
            ),

You can use the Positioned.fill with Align inside a Stack:

Column(
  children: <Widget>[
    Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width,
          height: 170,
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.only(bottomLeft: Radius.circular(0), bottomRight: Radius.circular(0))),
          // child: Image.network(tutorImage),
        ),
        Positioned.fill(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              width: 60,
              height: 60,
              color: Colors.black,
            ),
          ),
        )
      ],
    ),
  ],
);

Stack class - widgets library - Dart API, API docs for the Stack class from the widgets library, for the Dart programming bottomCenter Duration: 1:18 Posted: Sep 5, 2019 Each child of a Stack widget is either positioned or non-positioned.Positioned children are those wrapped in a Positioned widget that has at least one non-null property. The stack sizes itself to contain all the non-positioned children, which are positioned according to alignment (which defaults to the top-left corner in left-to-right environments and the top-right corner in right-to-left

Try wrap your container into a Column and use axis align properties.

Stack(
          overflow: Overflow.visible,
          children: <Widget>[
            Container(
              //width: MediaQuery.of(context).size.width, In my test this line causes bad behavior
              height: 170,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(0),
                      bottomRight: Radius.circular(0))),
              // child: Image.network(tutorImage),
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.end, // start at end/bottom of column 
              crossAxisAlignment: CrossAxisAlignment.center, 
              children: <Widget>[
                Center( //  center in horizontal axis
                  child: Container(
                    width: 60,
                    height: 60,
                    color: Colors.black,
                  ),
                ),
              ],
            ),
          ],
        ),

Flutter Widget Positioning, Learn how to position, align, and build layouts with Flutter widgets, using the Padding widget, or if you just want to center a widget wrap it in Center. Stack( children: [ MyWidget(), Positioned( bottom: 20, left: 20, child:� Use the Positioned widget to position Flutter widgets in a Stack. Wrap the Stack’s children with a Positioned widget and set the parameters (top, bottom, left, right, height, and width) to

How about this?

Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width,
          height: 170,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(0),
                  bottomRight: Radius.circular(0))),
          // child: Image.network(tutorImage),
        ),
        Positioned(
          bottom: -30,
          left: 0,
          right: 0,
          child: Center(
            child: Container(
              width: 60,
              height: 60,
              color: Colors.black,
            ),
          ),
        )
      ],
    ),

Flutter Widget Positioning. Stacks vs Absolute/Fixed Positioning, A Stack allows you to stack elements on top of each other, with the last x,y values ranging from 1.0 to -1.0, with (0,0) being the center of the screen. to the parent widget. Stack( children: [ MyWidget(), Positioned( bottom: 20, The Stack is a layout that can contain multiple children widgets, but they are in different layers. Let’s look at an example. It shows as below, you can see the layers all in the same position

Exploring Stack and IndexedStack in Flutter, A Stack widget allows us to make multiple widgets overlay each An image here is overlaid by a card which is positioned at the bottom centre. Position element need to wrap with Positioned Widget and need to have one non-null property; Default non positioned children positioned in top left corner. We can change the alignment using alignment attribute and child views will be act according that. Stack paints its children in order with the first child being at the bottom.

Align (Flutter Widget of the Week), The Align widget lets you place a widget in a defined area of its parent widget. You can also Duration: 1:23 Posted: Feb 5, 2019 A widget that centers its child within itself. This widget will be as big as possible if its dimensions are constrained and widthFactor and heightFactor are null. If a dimension is unconstrained and the corresponding size factor is null then the widget will match its child's size in that dimension.

Flutter : Everything about Stack.. | by Parth Raval, A Stack Widget contains list of widgets and it place them one on top the other. result while rendering, It renders them from the ground up position — bottom to top. Stack( alignment: Alignment.topCenter, // Center of Top children: <Widget> [. Stack widget allows us to put up multiple layers of widgets into screen the widget takes the multiple children and orders them from bottom to top. so the last is the topmost and the first is the bottommost.

Comments
  • This worked for me in a situation. I still seek the understanding of "Align inside Positioned.fill" concept.
  • Worked like a charm here too, but I'm still wondering why I need an Align and a Positioned.fill, when simply using a Positioned(bottom: 0) should do the job, but it turns out it doesn't...
  • why should i use column here? what is the problem with align widget?
  • To be sincere I've never used Align widgets. I always make alignment with axis properties and Flex factors. Anyway after your question update now it's more clear what kind of effect you want and the column approach will not work in this case. Sorry about it.
  • its centered correctly, but there is a problem with this implementation. i want to overlap the small container like in the image above. when i set top : 50 or greater the container squeezes!
  • @M.Ali You do not need to use top. I will edit my answer to show you how you can do it.
  • remember the Widgets visible outside of stack's max size does not register the Gestures. Avoid if you need some GestureDetectors on Overflowing Widgets.