Animated Container over the contents of another flutter container

Question

I'm trying to make a screen that the blue container is on top of the content of the grey container, but the way I'm doing the blue container is pushing the content of the grey container. How could I make the blue container when expanded to be on top of the grey one? Do I have to use stack? I couldn't understand how I can do it.

 class _TestScreenState extends State<TestScreen> {
   bool isExpanded = false;
   @override
   Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
    title: const Text('Title'),
  ),
  body: LayoutBuilder(
    builder: (p0, p1) {
      final widthScreen = p1.maxWidth;
      final heightScreen = p1.maxHeight;

      return Column(
        children: [
          Container(
            color: Colors.amber,
            width: widthScreen,
            height: heightScreen * 0.32,
            child: Column(
              children: [
                Row(
                  children: [
                    IconButton(
                      iconSize: 30,
                      icon: const Icon(Icons.arrow_back),
                      onPressed: () {},
                    ),
                  ],
                ),
              ],
            ),
          ),
          Expanded(
            child: Container(
              height: heightScreen * .5,
              alignment: Alignment.bottomCenter,
              color: Colors.grey,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Text("line 1"),
                  Text("line 2"),
                  Text("line 3"),
                  AnimatedContainer(
                    duration: Duration(milliseconds: 300),
                    height: isExpanded
                        ? heightScreen - heightScreen * 0.32
                        : heightScreen * .2,
                    color: Colors.blue,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              IconButton(
                                iconSize: 30,
                                color: Colors.black,
                                icon: const Icon(Icons.ac_unit),
                                onPressed: () {
                                  setState(() {
                                    isExpanded = !isExpanded;
                                  });
                                },
                              )
                            ]),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      );
    },
  ),
  );
 }
}

Answer 1

Yes you have to use a Stack:

Columns and Rows only put UI elements next to each other.

Stack(
  children: [
    BottomWidget(),
    MiddleWidget(),
    TopWidget(),
  ]
),

If you want your TopWidget to also be at the top of the screen wrap it with an Align widget.

In your case replace TopWidget() with whatever you want to be on top (probably the blue container).

Also watch this 1 min video about the Stack widget: Stack - Flutter.