如何在Flutter中实现类似Pinterest登录界面的模糊效果？

不用额外依赖包，用Flutter原生组件就能实现你要的效果，核心思路是通过Stack堆叠图片、模糊过渡层和登录内容，具体实现代码如下：

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

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 背景图片，替换成你的图片资源
          Image.asset(
            'assets/login_bg.jpg',
            fit: BoxFit.cover,
            height: double.infinity,
            width: double.infinity,
          ),
          // 模糊过渡层：从图片底部向上渐变模糊到白色
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            height: 220, // 可根据需求调整过渡区域高度
            child: ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
                child: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        Colors.white.withOpacity(0.05),
                        Colors.white.withOpacity(0.6),
                        Colors.white,
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
          // 登录表单内容
          Positioned(
            bottom: 50,
            left: 24,
            right: 24,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                TextField(
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.white.withOpacity(0.9),
                    hintText: '手机号/邮箱',
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide: BorderSide.none,
                    ),
                  ),
                ),
                SizedBox(height: 16),
                TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.white.withOpacity(0.9),
                    hintText: '密码',
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide: BorderSide.none,
                    ),
                  ),
                ),
                SizedBox(height: 24),
                ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.symmetric(vertical: 16),
                    backgroundColor: Colors.blueAccent,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                  child: Text('登录', style: TextStyle(fontSize: 16)),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

关键部分说明 #

• BackdropFilter：对下层的背景图片执行模糊处理，sigmaX/sigmaY数值越大，模糊程度越高，可根据视觉效果调整。
• LinearGradient：让模糊层从半透明渐变到完全白色，实现图片与白色背景的自然衔接，避免生硬的边界。
• Stack布局：确保图片在最底层，模糊层在中间，登录内容在最上层，层级关系清晰。

如果需要更复杂的模糊效果，也可以尝试flutter_blurhash包（不过原生方案已经能满足大部分场景，新手优先用原生更省心）。

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