底部导航条在 Flutter 中不透明

f0brbegy  于 2023-05-08  发布在  Flutter
关注(0)|答案(2)|浏览(177)

当我使用Colors.red.withOpacity(0.2)时,我在flutter中实现的底部导航栏没有变得透明,我将透明度应用到导航栏,因为稍后我想使用背景过滤器来应用guassion blurr。但它并没有变得透明。

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: ''),
        ],
      ),
    ))

此外,如果有人建议好的方法来应用背景滤镜的guasion模糊,这将是有帮助的。

xtfmy6hx

xtfmy6hx1#

尝试 Package 您的底部导航栏在一个主题数据和调整它在底部中心

...
bottomNavigationBar: Align(
alignment: Alignment.bottomCenter,
                child: Theme(
                    data: Theme.of(context)
                        .copyWith(canvasColor: Colors.transparent),///Try this
                       child: BottomNavigationBar()
...
lb3vh1jj

lb3vh1jj2#

它对我起作用了,你确定它不是透明的吗??

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'),
        ],
      ),
    );
  }
}

相关问题