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

Bottom nav bar is not getting transparent in flutter

My implementation of bottom nav bar in flutter is not getting transparent when I am using Colors.red.withOpacity(0.2), I am applying transparency to my nav bar because later I want to use backdrop filter to apply guassion blurr on it. However it is not getting transparent.

Scaffold(
      drawer: DrawerReskined(
        drawerItems: drawerItems,
      ),
      key: drawerKey,
      body: _children[_currentIndex],
      extendBody: true,
      bottomNavigationBar: BottomNavigationBar(
        showSelectedLabels: false,
        showUnselectedLabels: false,
        elevation: 0.0,
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.red.withOpacity(0.2),
        iconSize: 30,
        currentIndex: _currentIndex,
        onTap: (int index) {
          Provider.of<NavigationBarModel>(context, listen: false).setSelectedIndex(index);
        },
        items: [
          BottomNavigationBarItem(
              icon: Column(
                children: [
                  SvgPicture.asset(
                    "assets/svg/home.svg",
                    width: 19,
                    height: 20,
                    color: _currentIndex == 0 ? Colors.blue : ProjectColors.fireFly,
                  ),
                  SizedBox(height: 8),
                  SvgPicture.asset(
                    "assets/svg/selected.svg",
                    color: _currentIndex == 0 ? ProjectColors.warning : Colors.white,
                  ),
                ],
              ),
              label: ''),
          BottomNavigationBarItem(
              icon: Column(
                children: [
                  SvgPicture.asset(
                    "assets/svg/on_going.svg",
                    color: _currentIndex == 1 ? Colors.blue : ProjectColors.fireFly,
                  ),
                  SizedBox(height: 8),
                  SvgPicture.asset(
                    "assets/svg/selected.svg",
                    color: _currentIndex == 1 ? ProjectColors.warning : Colors.white,
                  ),
                ],
              ),
              label: ''),
          BottomNavigationBarItem(
            icon: Padding(
              padding: const EdgeInsets.only(bottom: 15.0),
              child: Container(
                width: 45,
                height: 45,
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(10),
                ),
                child: IconButton(
                  icon: isTemplatesLoading
                      ? CircularProgressIndicator(
                          color: Colors.white,
                        )
                      : Icon(Icons.add, color: Colors.white),
                  onPressed: () async {
                    setState(() => isTemplatesLoading = true);
                    Boxes.addAllTemplate(await TemplateCorba.templates());
                    setState(() => isTemplatesLoading = false);
                    AddTemplateRoles.show(
                      context,
                      AddTemplate(position: _floatingButtonKey.getOffset),
                    );
                  },
                ),
              ),
            ),
            label: '',
          ),
          BottomNavigationBarItem(
              icon: Column(
                children: [
                  SvgPicture.asset(
                    "assets/svg/business_overview.svg",
                    color: _currentIndex == 3 ? Colors.blue : ProjectColors.fireFly,
                  ),
                  SizedBox(height: 8),
                  SvgPicture.asset(
                    "assets/svg/selected.svg",
                    color: _currentIndex == 3 ? ProjectColors.warning : Colors.white,
                  ),
                ],
              ),
              label: ''),
          BottomNavigationBarItem(
              icon: Column(
                children: [
                  SvgPicture.asset(
                    "assets/svg/profile.svg",
                    color: _currentIndex == 4 ? Colors.blue : ProjectColors.fireFly,
                  ),
                  SizedBox(height: 8),
                  SvgPicture.asset(
                    "assets/svg/selected.svg",
                    color: _currentIndex == 4 ? ProjectColors.warning : Colors.white,
                  ),
                ],
              ),
              label: ''),
        ],
      ),
    ))

also it would be helpful if someone suggest good ways to apply backdrop filter for guasion blur.

Tags:

2

Answers


  1. 0

    Try wrapping your bottom navigation bar in a theme data and aligning it at the bottom-center

    ...
bottomNavigationBar: Align(
alignment: Alignment.bottomCenter,
                child: Theme(
                    data: Theme.of(context)
                        .copyWith(canvasColor: Colors.transparent),///Try this
                       child: BottomNavigationBar()
...
    Login or Signup to reply.
  2. 0

    Its working on me are you sure it is not transparent??

    class DemoView extends StatelessWidget {
  const DemoView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ListView(
          shrinkWrap: true,
          children: List.generate(
              20,
              (index) => Padding(
                    padding: const EdgeInsets.all(4),
                    child: ListTile(
                      tileColor:
                          index & 1 == 1 ? Colors.blue : Colors.deepPurple,
                      title: Text(
                        'Item $index',
                      ),
                    ),
                  )),
        ),
      ),
      extendBody: true,
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.teal,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        backgroundColor: Colors.red.withOpacity(0.2),
        useLegacyColorScheme: false,
        elevation: 0,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
          BottomNavigationBarItem(icon: Icon(Icons.place), label: 'place'),
          BottomNavigationBarItem(icon: Icon(Icons.book), label: 'book'),
        ],
      ),
    );
  }
}

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search