Flutter中模糊卡片效果实现：如何生成与示例图一致的模糊效果

Hey there! Let's break down how to create that polished blurred card effect in Flutter, including matching the subtle, sleek look you'd see in reference designs.

The go-to widget for background blur in Flutter is BackdropFilter — it blurs the content behind the widget, which is exactly what we need for a blurred card. Here's the basic setup:

• First, make sure your card sits on top of a background (an image, gradient, or other content that will show through the blur).
• Wrap your card's content with BackdropFilter, paired with ImageFilter.blur() to control the blur intensity.
• Use ClipRRect to round the card's corners (since BackdropFilter doesn't respect child borders by default).

Example snippet for the core blur:

ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    child: Container(
      width: 300,
      height: 200,
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.2), // Semi-transparent base
      ),
      child: const Center(child: Text('Blurred Card Content')),
    ),
  ),
)

To get that exact "reference image" look, you'll want to tweak these details:

• Adjust Transparency: Play with the opacity value in Colors.white.withOpacity() (or your base color) — values between 0.15 and 0.3 usually give that soft, frosted-glass feel.
• Add Subtle Shadows: A gentle shadow makes the card pop without looking harsh. Add this to the BoxDecoration:

  boxShadow: [
    BoxShadow(
      color: Colors.black.withOpacity(0.1),
      blurRadius: 8,
      offset: const Offset(0, 2),
    )
  ]
  

• Optional Thin Border: If your reference has a faint border, add it to the decoration:

  border: Border.all(color: Colors.white.withOpacity(0.3)),
  

• Blur Intensity: Tweak sigmaX and sigmaY — values between 8-12 work well for most designs. Higher values = more blur, lower = softer diffusion.

Here's a complete code snippet that puts it all together, with a background to showcase the blur effect:

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: Stack(
          fit: StackFit.expand,
          children: [
            // Background gradient (replace with an image if needed)
            Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.deepPurple, Colors.blueAccent],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
              ),
            ),
            // Blurred card positioned in the center
            Center(
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                  child: Container(
                    width: 320,
                    padding: const EdgeInsets.all(24),
                    decoration: BoxDecoration(
                      color: Colors.white.withOpacity(0.25),
                      borderRadius: BorderRadius.circular(20),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withOpacity(0.1),
                          blurRadius: 10,
                          offset: const Offset(0, 4),
                        ),
                      ],
                      border: Border.all(color: Colors.white.withOpacity(0.3)),
                    ),
                    child: const Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          'Frosted Glass Card',
                          style: TextStyle(
                            fontSize: 22,
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                          ),
                        ),
                        SizedBox(height: 16),
                        Text(
                          'This matches the subtle blurred effect you see in reference designs',
                          textAlign: TextAlign.center,
                          style: TextStyle(color: Colors.white70),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

• Performance: Always wrap BackdropFilter with ClipRRect (or another clipping widget) — this limits the blur area to just the card, which is more efficient than blurring the entire screen.
• Platform Differences: Blur effects might look slightly different on iOS vs. Android, but the core implementation works seamlessly across both.

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