Flutter（Android应用）能否实现线性渐变模糊底部导航栏？

完全可以实现这种效果，核心是通过背景模糊与线性渐变遮罩的组合来达成，以下是具体实现方案：

实现思路 #

1. 使用BackdropFilter对导航栏下方的页面内容进行模糊处理
2. 叠加一层线性渐变的半透明容器，营造渐变模糊的视觉效果
3. 将原生BottomNavigationBar设为透明，让下层的模糊和渐变效果透出

代码示例 #

import 'dart:ui';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // 示例页面内容，用于展示模糊效果
        body: ListView.builder(
          itemCount: 20,
          itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
        ),
        bottomNavigationBar: Stack(
          children: [
            // 1. 背景模糊层
            BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
              child: Container(
                height: kBottomNavigationBarHeight,
                color: Colors.transparent,
              ),
            ),
            // 2. 线性渐变遮罩层
            Container(
              height: kBottomNavigationBarHeight,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  // 可根据设计需求调整渐变颜色和透明度
                  colors: [
                    Colors.grey.shade200.withOpacity(0.2),
                    Colors.grey.shade100.withOpacity(0.7),
                  ],
                ),
              ),
            ),
            // 3. 透明的底部导航栏
            BottomNavigationBar(
              items: const [
                BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
                BottomNavigationBarItem(icon: Icon(Icons.search), label: '搜索'),
                BottomNavigationBarItem(icon: Icon(Icons.library_music), label: '我的'),
              ],
              backgroundColor: Colors.transparent,
              elevation: 0,
              selectedItemColor: Colors.blueAccent,
              unselectedItemColor: Colors.grey.shade600,
            ),
          ],
        ),
      ),
    );
  }
}

细节调整说明 #

• 模糊程度：修改ImageFilter.blur的sigmaX和sigmaY值，数值越大模糊效果越强
• 渐变效果：调整LinearGradient的colors、begin和end属性，适配你的设计风格（比如换成深色渐变）
• 导航栏样式：可以自定义BottomNavigationBar的图标、文字样式，保持整体视觉统一

内容的提问来源于stack exchange，提问作者Emilio Yael Ruiz Sánchez