如何在flutter中模糊底部导航栏？

Question

几个小时以来，我一直在尝试使用 BackdropFilter 和 ImageFilter.blur 模糊底部导航栏，但无济于事。

在我的代码中，底部导航栏被包裹在一个 Cliprrect 小部件中，并且它们都被包裹在一个容器中。我尝试将容器、cliprrect 和bottomnavigationbar 包装在backgroundfilter 小部件中，但它们都不起作用。我将剪辑包裹在堆栈小部件中，然后将底部导航栏包裹在背景过滤器小部件中，但它仍然不起作用。我已经在这几个小时了，不，请帮忙。这是代码：

bottomNavigationBar: Container(
        height: 50,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.only(
            topRight: Radius.circular(10),
            topLeft: Radius.circular(10),
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.2),
              spreadRadius: 2,
              blurRadius: 5,
              offset: Offset(0, 3),
            ),
          ],
        ),
        child: Stack(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(5),
                topRight: Radius.circular(5),
              ),
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                child: BottomNavigationBar(
                  showSelectedLabels: false,
                  showUnselectedLabels: false,
                  type: BottomNavigationBarType.fixed,
                  selectedItemColor: Colors.lightBlue,
                  unselectedItemColor: Colors.grey[200],
                  currentIndex: _currentIndex,
                  onTap: navigationTapped,
                  items: const [
                    BottomNavigationBarItem(icon: Icon(Icons.crop_square_rounded), label: ''),
                    BottomNavigationBarItem(icon: Icon(Icons.square_rounded), label: ''),
                    BottomNavigationBarItem(icon: Icon(Icons.circle), label: ''),
                    BottomNavigationBarItem(icon: Icon(Icons.star), label: ''),
                    BottomNavigationBarItem(icon: Icon(Icons.square_rounded), label: ''),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),

Answer 1

有多种解决方案。您可以在当前的

blendMode

中使用

BackDropFilter

，也可以在模糊的

Container

上方放置

BottomNavigationBar

：

bottomNavigationBar: Container(
    height: 50,
    decoration: BoxDecoration(
      borderRadius: const BorderRadius.only(
        topRight: Radius.circular(10),
        topLeft: Radius.circular(10),
      ),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.2),
          spreadRadius: 2,
          blurRadius: 5,
          offset: Offset(0, 3),
        ),
      ],
    ),
    clipBehavior: Clip.antiAlias,
    child: Stack(
      children: [
        BottomNavigationBar(
          showSelectedLabels: false,
          showUnselectedLabels: false,
          type: BottomNavigationBarType.fixed,
          selectedItemColor: Colors.lightBlue,
          unselectedItemColor: Colors.grey[200],
          currentIndex: _currentIndex,
          onTap: navigationTapped,
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.crop_square_rounded), label: ''),
            BottomNavigationBarItem(icon: Icon(Icons.square_rounded), label: ''),
            BottomNavigationBarItem(icon: Icon(Icons.circle), label: ''),
            BottomNavigationBarItem(icon: Icon(Icons.star), label: ''),
            BottomNavigationBarItem(icon: Icon(Icons.square_rounded), label: ''),
          ],
        ),
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: Container(color: Colors.grey.withOpacity(0.1)),
        ),
      ],
    ),
  ),

注意，我还删除了看起来没用的

ClipRRect

，并在主

clipBehavior

中放了一个

Container

代替。