How can i apply a gradient color to a CurvedNavigationBar in flutter?

Question

So I'm working on a flutter project. And while working, I have to follow the design that was provided to me. On a particular screen I had a Curved Labeled Navigation bar with a gradient as a background. But when I tried to implement it, I found some difficulties with adjusting the color.

here is the design :

and here is my code and output :

return Scaffold(
      body: _buildSelectedScreen(),
      bottomNavigationBar: Stack(
        children: [Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.vertical(
              top: Radius.circular(20),
            ),
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [color2, color1],
            ),
          ),
          child: CurvedNavigationBar(
            backgroundColor: Colors.transparent,
            color: Colors.transparent,
            buttonBackgroundColor: Color(0xFF011B85),
            animationDuration: Duration(milliseconds: 300),
            height: 80,
            items: [
              CurvedNavigationBarItem(
                child: ImageIcon(
                  AssetImage('assets/images/home.png'),
                  color: controller.selectedIndex == 0
                      ? Colors.white
                      : Colors.white,
                ),
                label: 'home',
                labelStyle: TextStyle(
                  color: Colors.white,
                  fontSize: 12,
                  fontFamily: 'Inria Sans',
                  fontWeight: FontWeight.w400,
                  height: 0,
                ),
              ),
              CurvedNavigationBarItem(
                child: ImageIcon(
                  AssetImage('assets/images/notification.png'),
                  color: controller.selectedIndex == 1
                      ? Colors.white
                      : Colors.white,
                ),
                label: 'Notifications',
                labelStyle: TextStyle(
                  color: Colors.white,
                  fontSize: 12,
                  fontFamily: 'Inria Sans',
                  fontWeight: FontWeight.w400,
                  height: 0,
                ),
              ),
              CurvedNavigationBarItem(
                child: ImageIcon(
                  AssetImage('assets/images/explore.png'),
                  color: controller.selectedIndex == 2
                      ? Colors.white
                      : Colors.white,
                ),
                label: 'Explore',
                labelStyle: TextStyle(
                  color: Colors.white,
                  fontSize: 12,
                  fontFamily: 'Inria Sans',
                  fontWeight: FontWeight.w400,
                  height: 0,
                ),
              ),
              CurvedNavigationBarItem(
                child: ImageIcon(
                  AssetImage('assets/images/Send.png'),
                  color: controller.selectedIndex == 3
                      ? Colors.white
                      : Colors.white,
                ),
                label: 'Message',
                labelStyle: TextStyle(
                  color: Colors.white,
                  fontSize: 12,
                  fontFamily: 'Inria Sans',
                  fontWeight: FontWeight.w400,
                  height: 0,
                ),
              ),
              CurvedNavigationBarItem(
                child: ImageIcon(
                  AssetImage('assets/images/user.png'),
                  color: controller.selectedIndex == 4
                      ? Colors.white
                      : Colors.white,
                ),
                label: 'Profile',
                labelStyle: TextStyle(
                  color: Colors.white,
                  fontSize: 12,
                  fontFamily: 'Inria Sans',
                  fontWeight: FontWeight.w400,
                  height: 0,
                ),
              ),
            ],
            onTap: (index) {
              setState(() => controller.updateSelectedIndex(index));
            },
          ),
        ),]
      ),);

this is the output:

I have tried to change the background color, color and navigation button color to transparent or white, but nothing worked.

I also thought about creating a custom Color class that returns the gradient that I want and use it in the color property of the navigation bar.

Can someone please tell me if this idea is feasible? If yes, then please provide me with the code. Else, please give me a solution to my problem.

I appreciate any help given!