颤动中的透明底部导航栏 [英] Transparent bottom navigation bar in flutter

问题描述

我是颤振的新手.我正在尝试实现此 UI

i am new to flutter. I am trying to achieve this UI

我还没有找到任何使用完整的解决方案来在 flutter 中创建透明的底部导航栏.

I haven't found any use full solution to create transparent bottom navigation bar in flutter.

我试过使用

BottomNavigationBarItem(
        backgroundColor: Colors.transparent,
        icon: e,
        activeIcon: _activeIcons[_index],
        title: Text(
          title[_index],
          style: AppStyle.tabBarItem,
        ),
      )

但这似乎不起作用.请帮忙.

But this doesn't seems to work. Please help.

推荐答案

我尝试使用评论中讨论的 Stack 方法:

My attempt using the Stack method discussed in the comments:

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/background.jpg'),
                    fit: BoxFit.cover),
              ),
            ),
            Align(
                alignment: Alignment.bottomCenter,
                child: Theme(
                    data: Theme.of(context)
                        .copyWith(canvasColor: Colors.transparent),
                    child: BottomNavigationBar(
                      currentIndex: 0,
                      items: [
                        BottomNavigationBarItem(
                            icon: Icon(Icons.home), title: Text('Home')),
                        BottomNavigationBarItem(
                            icon: Icon(Icons.home), title: Text('Home')),
                        BottomNavigationBarItem(
                            icon: Icon(Icons.home), title: Text('Home'))
                      ],
                    ))),
          ],
        ),
      ),
    );
  }

BottomNavigationBar 具有 8.0 的内置高度，您无法更改它并导致奇怪的阴影效果.如果你想删除它，你可以像这样实现你自己的底栏:

The BottomNavigationBar has an inbuilt elevation of 8.0 which you can't change and is causing that weird shadow effect. If you want to remove it, you could just implement your own kind of bottom bar like so:

Align(
                alignment: Alignment.bottomCenter,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                  IconButton(icon: Icon(Icons.home, color: Theme.of(context).accentColor,), onPressed: () {},),
                  IconButton(icon: Icon(Icons.home, color: Theme.of(context).accentColor,), onPressed: () {},),
                  IconButton(icon: Icon(Icons.home, color: Theme.of(context).accentColor,), onPressed: () {},),
                ],)),

这篇关于颤动中的透明底部导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！