expand container in front of other elements flutter

Question

I want to expand the blue container on top of the grey container when I click the up arrow, but i have no idea how i can do that. I used the ExpandablePanel widget other times but I can only expand down with it. Here's an image to show what I want to do. Does anyone have any idea how I can do this or if there is a widget for this?

return Column(
  children: [
    Container(
      color: Colors.grey,
      width: widthScreen,
      height: MediaQuery.of(context).padding.top,
    ),
    Container(
      color: Colors.amber,
      width: widthScreen,
      height: heightScreen * 0.32,
      child: Column(
        children: [
          Row(
            children: [
              IconButton(
                iconSize: 30,
                color: ThemeColor.fontGrey,
                icon: const Icon(CustomIcons.arrow_back),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ],
      ),
    ),
    Container(
      height: heightScreen * .5,
      color: Colors.grey,
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
              IconButton(
                iconSize: 30,
                color: Colors.black,
                icon: const Icon(CustomIcons.chevron_cima),
                onPressed: () {
                },
              )
            ]),
          ],
        ),
      ),
    ),
  ],
);

Answer 1

AnimatedContainer feels better to me,

class YF extends StatefulWidget {
  const YF({
    Key? key,
  }) : super(key: key);

  @override
  State<YF> createState() => _YFState();
}

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

          final topPadding = MediaQuery.of(context).padding.top;

          return Column(
            children: [
              Container(
                color: Colors.grey,
                width: widthScreen,
                height: topPadding,
              ),
              Container(
                color: Colors.amber,
                width: widthScreen,
                height: heightScreen * 0.32,
                child: Column(
                  children: [
                    Row(
                      children: [
                        IconButton(
                          iconSize: 30,
                          // color: ThemeColor.fontGrey,
                          icon: const Icon(Icons.arrow_back),
                          onPressed: () {},
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Container(
                  height: heightScreen * .5,
                  alignment: Alignment.bottomCenter,
                  color: Colors.grey,
                  child: AnimatedContainer(
                    duration: Duration(milliseconds: 300),
                    height: isExpanded
                        ? heightScreen - topPadding - heightScreen * 0.32
                        : heightScreen * .2,

                    ///dynamic height
                    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 2

Try using Stack widget

Stack(
  children: [
    GreyContainer,
    BlueContainer,
  ]
)

Change the height of the blue container when the arrow is clicked.