Flutter中实现状态栏与页面内容模糊融合的方法求助

你之前通过AppBar的systemOverlayStyle设置statusBarColor的方式只能给状态栏设置纯色，无法实现模糊融合效果。要达成目标，需要让页面内容延伸到状态栏下方，再在状态栏区域添加模糊层，具体实现方式如下：

核心思路 #

1. 让页面主体内容延伸至状态栏下方（通过extendBodyBehindAppBar或直接隐藏AppBar）
2. 在状态栏位置添加带模糊效果的遮罩层
3. 调整系统状态栏图标亮度，保证可读性

代码实现示例 #

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

class BlurStatusBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 允许页面内容延伸到AppBar和状态栏下方
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        // 把AppBar设为透明，移除阴影
        backgroundColor: Colors.transparent,
        elevation: 0,
        systemOverlayStyle: const SystemUiOverlayStyle(
          statusBarIconBrightness: Brightness.dark, // Android状态栏图标深色
          statusBarBrightness: Brightness.light, // iOS状态栏图标深色
        ),
      ),
      body: Stack(
        children: [
          // 页面背景（可以是图片、渐变色等）
          Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.blueAccent, Colors.purpleAccent],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
            ),
          ),
          // 状态栏模糊遮罩
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            // 获取状态栏高度
            height: MediaQuery.of(context).padding.top,
            child: BackdropFilter(
              // 调整sigma值控制模糊程度，值越大越模糊
              filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
              child: Container(
                // 模糊层透明度，可根据背景调整
                color: Colors.white.withOpacity(0.2),
              ),
            ),
          ),
          // 页面主体内容，需要避开状态栏区域
          Padding(
            padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
            child: const Center(
              child: Text(
                "状态栏模糊融合效果",
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键注意点 #

• extendBodyBehindAppBar: true是必须的，它能让页面内容延伸到状态栏下方，为模糊融合提供基础
• BackdropFilter依赖dart:ui的ImageFilter，需要确保导入该包
• 模糊层的背景色透明度和sigma值可以根据实际页面背景调整，达到最佳融合效果
• 如果不需要AppBar，可以直接隐藏它，用SystemChrome.setSystemUIOverlayStyle提前设置状态栏图标亮度

内容的提问来源于stack exchange，提问作者Gohar Khachatryan