BoxShadow to Container child of SizeTransition Flutter

I created a stretch nabar, when I click on the "autres" icon, there's a transition like the screen below.

I'm trying to put a BoxShadow to a Container which is child of a SizeTransition.

I made this code:

Here's the sandbox: https://flutlab.io/editor/1c7de2dd-edc4-4e09-b1b3-4a4d63f1a162

@override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
///Here's the part i talk about
        SizeTransition(
          sizeFactor: _animation,
          axisAlignment: -1,
          child: Container(
            decoration: BoxDecoration(
              color: ColorResources.white,
              boxShadow: [
                BoxShadow(
                  color: const Color.fromARGB(255, 0, 0, 0).withOpacity(0.5),
                  spreadRadius: 2,
                  blurRadius: 7,
                  offset: Offset(0, 3),
                ),
              ],
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                GestureDetector(
                  onTap: () {},
                  child: const SizedBox(
                    height: kBottomNavigationBarHeight,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.menu_outlined),
                        const SizedBox(height: 0.0),
                        Text(
                          "Menu",
                          style: TextStyle(
                            fontSize: 12.0,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
        Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: const Color.fromARGB(255, 0, 0, 0).withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 7,
                offset: const Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
          child: BottomNavigationBar(
            backgroundColor: ColorResources.white,
            type: BottomNavigationBarType.fixed,
            currentIndex: _selectedIndex,
            fixedColor: ColorResources.blue,
            onTap: _onItemTapped,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.menu_outlined),
                label: "Fil d'actu",
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.ac_unit),
                label: 'Idées',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.output),
                label: 'Entraide',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.keyboard_option_key_outlined),
                label: 'Projets',
              ),
              const BottomNavigationBarItem(
                icon: Icon(Icons.menu_outlined),
                label: 'Autres',
              ),
            ],
          ),
        ),
      ],
    );
  }

For the moment, the only result that I have is like this:

How can I add the same Shadow as the navbar?

The reason the shadow is not appearing on the SizeTransition widget is that it does not have a size until it is animated, so the shadow is not visible. One solution is to wrap the SizeTransition widget with a Container, which will allow the shadow to be visible.

We also add height to the SizedBox to kBottomNavigationBarHeight (you can set your own height, instead)

Here's the updated code snippet:

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: const Color.fromARGB(255, 0, 0, 0).withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: const Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
  child: SizeTransition(
    sizeFactor: _animation,
    axisAlignment: -1,
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          GestureDetector(
            onTap: () {},
            child: SizedBox(
              height: kBottomNavigationBarHeight,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.menu_outlined),
                  const SizedBox(height: 0.0),
                  Text(
                    "Menu",
                    style: TextStyle(
                      fontSize: 12.0,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    ),
  ))

This should create a fixed height container for the SizeTransition widget, allowing the shadow to be visible.

Result: