Flutter中如何为Scaffold背景添加模糊透明图片

要实现带透明模糊背景图的Scaffold，核心是用Stack层叠背景与内容，再通过BackdropFilter添加模糊效果。以下是修改后的完整代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Image.asset(
          "assets/tree.png",
        ),
      ),
      centerTitle: true,
      title: Text(
        "Welcome To Plants",
        style: TextStyle(
          color: Colors.green,
          fontWeight: FontWeight.w800,
        ),
      ),
      // 可选：让AppBar透明，模糊背景可贯穿顶部
      backgroundColor: Colors.transparent,
      elevation: 0,
    ),
    // 用Stack实现背景与内容的层叠
    body: Stack(
      children: [
        // 背景图片层
        Positioned.fill(
          child: Image.asset(
            "assets/your_bg_image.png", // 替换为你的背景图路径
            fit: BoxFit.cover, // 图片铺满屏幕
          ),
        ),
        // 模糊滤镜层
        Positioned.fill(
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6), // 调整模糊强度
            child: Container(
              color: Colors.black.withOpacity(0.2), // 半透明黑层增强文本可读性
            ),
          ),
        ),
        // 原有内容层（最上层）
        Positioned.fill(
          child: Column(
            children: [
              Flexible(
                child: ListView.builder(
                  itemCount: _messages.length,
                  reverse: true,
                  itemBuilder: (context, index) => Padding(
                    padding: const EdgeInsets.all(8.0),
                    // 消息气泡设为半透明，避免遮挡背景
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                      decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.8),
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: _messages[index],
                    ),
                  ),
                ),
              ),
              const Divider(
                color: Color.fromARGB(255, 51, 223, 56),
                thickness: 1,
              ),
              _istyping ? LinearProgressIndicator() : Container(),
              Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: Row(
                  children: [
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: TextField(
                          controller: _controller,
                          onSubmitted: (value) => _sendMessage(),
                          style: TextStyle(color: Colors.black87),
                          decoration: InputDecoration(
                            filled: true,
                            fillColor: Colors.white.withOpacity(0.8),
                            hintText: "Type Here",
                            hintStyle: TextStyle(fontSize: 20),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8),
                              borderSide: BorderSide.none,
                            ),
                          ),
                        ),
                      ),
                    ),
                    ButtonBar(children: [
                      IconButton(
                        onPressed: () {
                          _isImageSearch = false;
                          _sendMessage();
                        },
                        icon: Icon(
                          Icons.send,
                          color: Theme.of(context).primaryColor,
                        ),
                      ),
                      TextButton(
                        onPressed: () {
                          _isImageSearch = true;
                          _sendMessage();
                        },
                        child: Text("Show Image"),
                      )
                    ]),
                  ],
                ),
              )
            ],
          ),
        ),
      ],
    ),
  );
}

关键修改说明： #

• 用Stack替代原Column作为Scaffold的body，实现背景与内容的层叠显示。
• Positioned.fill确保每个层级都铺满整个屏幕。
• BackdropFilter的sigmaX/sigmaY控制模糊程度，数值越大模糊效果越强。
• 给消息气泡、输入框添加半透明背景，既保证内容清晰可读，又不遮挡模糊背景。
• 可选将AppBar设为透明，让模糊背景贯穿页面顶部。

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