Question 214051 in Flutter Question posted in
The official Flutter documentation can be found here.

how to change background color of a customized bottom navigation bar in flutter?

return Scaffold(
      //  key: scaffoldKey,
extendBody: true,
       // bottomNavigationBar:
        bottomNavigationBar: Container(
          height: 80,
          child: ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(80.0),
            topRight: Radius.circular(80.0),
          ),
          child: BottomNavigationBar(
          //  currentIndex: _selectedIndex,
            selectedItemColor: Colors.amber[800],
           // onTap: _onItemTapped,
            items: <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.search),
                label: 'Search',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: 'Profile',
              ),
            ],
          ),
              ),
        ),
     
        backgroundColor: Color.fromARGB(255, 214, 7, 135),

enter image description hereI want to change the color of bottom navigation bar from green into transparent…I already gave white but showing like this(given photo)..how to do this?enter image description here
(that green color is background color of my scaffold)

Tags:

2

Answers


  1. 0

    add color to your Container like this
    bottomNavigationBar: Container(
    color:Colors.red,
    height: 80,
    child: ClipRRect(…)
    )

    Login or Signup to reply.
  2. 0

    I don’t understand your problem. It seems like OK for me. Your code is working on my code.

    Bottom Nav Screenshot

    And here is my full code:

    class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _current = 0;

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
      backgroundColor: Color.fromARGB(255, 214, 7, 135),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              const HomeAppBarWidget(),
              const SizedBox(height: kPadding24),
              const SearchAndFilterWidget(),
              const SizedBox(height: kPadding24),
              HomeCategoriesWidget(
                current: _current,
                onTap: (index) {
                  setState(() {
                    _current = index;
                  });
                },
              ),
              const SizedBox(height: kPadding24),
              const NearForYouWidget()
            ],
          ),
        ),
      ),
      bottomNavigationBar: Container(
        height: 80,
        child: ClipRRect(
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(30.0),
            topRight: Radius.circular(30.0),
          ),
          child: BottomNavigationBar(
            //  currentIndex: _selectedIndex,
            selectedItemColor: Colors.amber[800],
            // onTap: _onItemTapped,
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.search),
                label: 'Search',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: 'Profile',
              ),
            ],
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search