如何在Flutter中实现卡片的悬浮玻璃毛玻璃UI效果？

核心实现思路 #

• 基于Stack层叠布局，将玻璃卡片放在背景内容上层
• 用BackdropFilter组件对卡片覆盖区域的底层背景做高斯模糊处理
• 用ClipRRect对模糊区域做圆角裁剪，避免模糊效果溢出卡片边界
• 给卡片添加半透明白色填充+半透明白色边框，强化玻璃悬浮质感

可运行完整代码 #

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 玻璃卡片 demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const GlassCardDemo(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        // 示例背景：渐变色，也可以替换为图片等其他背景内容
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Color(0xFF1a2a6c), Color(0xFFb21f1f), Color(0xFFfdbb2d)],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: Center(
          // 玻璃卡片核心实现
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
              child: Container(
                width: 320,
                padding: const EdgeInsets.symmetric(vertical: 32, horizontal: 24),
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.12),
                  borderRadius: BorderRadius.circular(20),
                  border: Border.all(color: Colors.white.withOpacity(0.2), width: 1.2),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.1),
                      blurRadius: 20,
                      offset: const Offset(0, 8),
                    )
                  ],
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Icon(Icons.cloud_circle, color: Colors.white, size: 64),
                    const SizedBox(height: 20),
                    const Text(
                      'Good Morning',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 28,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    const SizedBox(height: 12),
                    const Text(
                      '24°C',
                      style: TextStyle(
                        color: Colors.white70,
                        fontSize: 48,
                        fontWeight: FontWeight.w300,
                      ),
                    ),
                    const SizedBox(height: 24),
                    const Text(
                      'Mostly sunny. Winds W at 10 to 15 km/h.\nHigh 24°C. Low 16°C.',
                      style: TextStyle(
                        color: Colors.white70,
                        fontSize: 16,
                        height: 1.5,
                      ),
                      textAlign: TextAlign.center,
                    ),
                    const SizedBox(height: 32),
                    ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.white.withOpacity(0.2),
                        elevation: 0,
                        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 32),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(30),
                        ),
                      ),
                      onPressed: () {},
                      child: const Text('See Details', style: TextStyle(color: Colors.white, fontSize: 16)),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

效果调整技巧 #

• 模糊强度：修改ImageFilter.blur的sigmaX和sigmaY参数，数值越高模糊效果越明显，建议取值范围5~20
• 通透度：修改卡片背景色的透明度，0.1~0.3之间的半透明白色适配大多数场景，深色背景可适当降低透明度
• 视觉层次：可以给卡片添加轻微的阴影和半透边框，进一步强化悬浮感

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