The code below has 3 buttons and a container, Inside the container are two positioned widgets, The bottom positioned widget contains a IndexedStack with 3 containers, When I click on the buttons I want the containers to show as per the code, all fine but the containers are aligned to the top of its parent widget, I want them to align to the bottom center.

I did use the Align widget to align to bottom center but couldn't get it to work,

I want the last three containers with red, blue and green align to the bottom of the yellow container, Right now it will align towards the mid/ mid top, Only the green aligns to the bottom center. How can I achieve this ?

DART PAD

import 'package:flutter/material.dart';

class Istack extends StatefulWidget {
  @override
  _IstackState createState() => _IstackState();
}

class _IstackState extends State<Istack> {
  int _selectedIndex = 0;

  void _showContainer(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 600,
        // color: Colors.purpleAccent,
        child: Column(
          children: [
            const SizedBox(
              height: 50,
            ),
            ElevatedButton(
              onPressed: () => _showContainer(0),
              child: const Text('Show Container 1'),
            ),
            ElevatedButton(
              onPressed: () => _showContainer(1),
              child: const Text('Show Container 2'),
            ),
            ElevatedButton(
              onPressed: () => _showContainer(2),
              child: const Text('Show Container 3'),
            ),
            Container(
              color: Colors.yellow,
              height: 400,
              child: Stack(
                children: [
                  Positioned(
                    top: 0,
                    child: Container(
                      color: Color.fromARGB(255, 222, 136, 136),
                      height: 200,
                    ),
                  ),
                  Positioned(
                    bottom: 0,
                    left: 0,
                    right: 0,
                    child: IndexedStack(
                      index: _selectedIndex,
                      children: <Widget>[
                        Container(
                          height: 50,
                          color: Colors.red,
                        ),
                        Container(
                          height: 100,
                          color: Colors.blue,
                        ),
                        Container(
                          height: 300,
                          color: Colors.green,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

You need to remove the fixed height on top and add Spacer() widget just before yellow widget, Spacer widget will push other.

And use alignment: Alignment.bottomCenter on IndexedStack

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        // color: Colors.purpleAccent,
        child: Column(
          children: [
            const SizedBox(
              height: 50,
            ),
            ElevatedButton(
              onPressed: () => _showContainer(0),
              child: const Text('Show Container 1'),
            ),
            ElevatedButton(
              onPressed: () => _showContainer(1),
              child: const Text('Show Container 2'),
            ),
            ElevatedButton(
              onPressed: () => _showContainer(2),
              child: const Text('Show Container 3'),
            ),
            Spacer(),
            Container(
              color: Colors.yellow,
              height: 400,
              alignment: Alignment.bottomCenter,
              child: Stack(
                children: [
                  Positioned(
                    top: 0,
                    child: Container(
                      color: Color.fromARGB(255, 222, 136, 136),
                      height: 200,
                    ),
                  ),
                  Positioned(
                    bottom: 0,
                    left: 0,
                    right: 0,
                    child: IndexedStack(
                      alignment: Alignment.bottomCenter
                      index: _selectedIndex,
                      children: <Widget>[
                        Container(
                          height: 50,
                          color: Colors.red,
                        ),
                        Container(
                          height: 100,
                          color: Colors.blue,
                        ),
                        Container(
                          height: 300,
                          color: Colors.green,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }