Modern Glassmorphism in Flutter: Beyond Basic Containers

Elevating UI with Glassmorphism in Flutter

Modern UI design often leans into depth and texture. One of the most popular trends is glassmorphism—a frosted-glass effect that allows background colors to bleed through a blurred, semi-transparent layer. While many developers attempt this with simple opacity, the real secret lies in Flutter's BackdropFilter.

The Architecture of a Glass Card

To achieve a realistic glass effect, you need three specific layers: a blur filter, a light translucent tint, and a subtle border to define the edges. In Flutter, the BackdropFilter widget applies an image filter to the existing painted content beneath its child. However, without a Clip widget, the blur will bleed across the entire screen. This is why we always wrap our glass components in a ClipRRect.

Let's look at a practical implementation of a reusable glass card that you can use for dashboards or profile headers.

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

class GlassCard extends StatelessWidget {
  final Widget child;
  final double blur;
  final double opacity;

  const GlassCard({
    required this.child,
    this.blur = 15.0,
    this.opacity = 0.1,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(24),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(opacity),
            borderRadius: BorderRadius.circular(24),
            border: Border.all(
              color: Colors.white.withOpacity(0.2),
              width: 1.5,
            ),
          ),
          padding: const EdgeInsets.all(20),
          child: child,
        ),
      ),
    );
  }
}

Why Use ImageFilter.blur?

The sigmaX and sigmaY values determine the intensity of the Gaussian blur. A value of 10.0 to 15.0 is usually the sweet spot for a frosted look. If you go too high, the background becomes unrecognizable; too low, and it just looks like a dirty window. By setting a slight white border with 0.2 opacity, we simulate the 'edge' of the glass where light hits the corner, giving it a 3D feel.

Performance Considerations

While Flutter's Impeller engine handles blur effects much better than the old Skia backend, BackdropFilter is still an expensive operation. If you are building a list with fifty glass cards, you will see a frame drop. To optimize this, only use glass effects on static elements or a single primary overlay. If you must use it in a list, consider using a static 'frosted' image asset as a fallback for lower-end devices.

Creative Use Cases

Don't just use glass for cards. It works exceptionally well for bottom navigation bars or custom app bars. When the user scrolls content under a glass app bar, the shifting colors create a sense of continuity that solid colors cannot match. Try pairing this with a vibrant, gradient-heavy background to truly make the glass effect pop.