'How to remove background color to a container in Bottom Navigation bar (Flutter)?

I'm creating a Bottom Navigation Bar with Container. there is this color in the background which I'm trying to eliminate. I need to solve it

How can I remove that color in the background?

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      body: pages[pageIndex],
      bottomNavigationBar: Container(
        width: double.infinity,
        height: Sizes.height_120,
        decoration: BoxDecoration(
          color: Colors.black.withOpacity(0.5),
          boxShadow: AppShadows.navBarBoxShadow,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: List.generate(
            pages.length,
            (index) => BottomNavigationIcons(
              imageName: pageIndex == index
                  ? activeIcons[index]
                  : inactiveIcons[index],
              vertical: index == 0 ? 28 : 36,
              onTap: () {
                setState(() {
                  pageIndex = index;
                });
              },
            ),
          ),
        ),
      ),
    );
  }

Solution 1:^[1]

Add a ClipRRect around your main Container of your Bottom Navigation Bar

bottomNavigationBar: ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10),
            topRight: Radius.circular(10),
          ),
          child: Container()

Solution 2:^[2]

Wrap the container with another container and set color to Colors.transparent

bottomNavigationBar: Container(
          color: Colors.transparent,
          width: double.infinity,
          height: 120,
          child: Container(
            decoration:  const BoxDecoration(
              color: Colors.red,
              //color: Colors.black.withOpacity(0.5),
              borderRadius: BorderRadiusDirectional.only(
                topStart: Radius.circular(35),
                topEnd: Radius.circular(35),
              ),
              boxShadow: AppShadows.navBarBoxShadow,

Solution 3:^[3]

Wrap the Bottom Navigation bar with a Container with a rounded BoxDecoration. Use the cliprect to remove the background. Setup the child BottomNavigationBar with the BottomNavigationBarItems for the actions and routing.

    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Test_BottomNavBar(),
    );
  }
}

class Test_BottomNavBar extends StatefulWidget {
  Test_BottomNavBar({Key? key}) : super(key: key);

  @override
  State<Test_BottomNavBar> createState() => _Test_BottomNavBarState();
}

class _Test_BottomNavBarState extends State<Test_BottomNavBar> {
  int _current_index=0;
  @override
  Widget build(BuildContext context) {
    return 
    Scaffold(appBar: AppBar(title:Text("Bottom Nav Bar")),body:
    
    Container(
      height: double.infinity,
      width:double.infinity,
      decoration: BoxDecoration(
        image: DecorationImage(
          image:AssetImage("assets/images/background.png"),
          fit:BoxFit.cover),
        
      ),
      child:
      Center(
      child:Text("Bottom Nav Bar",style:TextStyle(fontSize: 60,color:Colors.white))
      
      ),
    ),
     

    bottomNavigationBar:
    Container(                                             
  decoration: BoxDecoration(                                                   
    borderRadius: BorderRadius.only(                                           
      topRight: Radius.circular(20), topLeft: Radius.circular(20)),            
    boxShadow: [                                                               
      BoxShadow(color: Colors.green, spreadRadius: 0, blurRadius: 10),       
    ],                                                                         
  ),                                                                           
  child: ClipRRect(                                                            
    borderRadius: BorderRadius.only(                                           
    topLeft: Radius.circular(20.0),                                            
    topRight: Radius.circular(20.0),                                           
    ),         
    
     child:BottomNavigationBar(
      currentIndex: _current_index,
      selectedItemColor: Colors.orange,
        
      onTap:(int index){
          setState(() {
            _current_index=index;
          });

      },
      items:[
        BottomNavigationBarItem(
          icon: Icon(Icons.home)
          ,label:"Home"
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.email),
          label:"Email"
        )
      ]

    ),
    )))
    ;
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Novice Coder
Solution 2
Solution 3

'How to remove background color to a container in Bottom Navigation bar (Flutter)?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]