Effetti glassmorphism in Flutter con BackdropFilter e ImageFilter

L'effetto glassmorphism ha bisogno di uno sfondo interessante dietro cui applicare la sfocatura: senza dettagli visivi il blur non si nota. Creiamo uno Scaffold con uno sfondo composto da forme colorate (o un'immagine) usando uno Stack.

Qui usiamo un gradiente e due cerchi colorati come base.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // Sfondo con gradiente
          Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [Color(0xFF6A11CB), Color(0xFF2575FC)],
              ),
            ),
          ),
          // Cerchio decorativo 1
          Positioned(
            top: 80,
            left: -40,
            child: _circle(180, Colors.pinkAccent.withOpacity(0.6)),
          ),
          // Cerchio decorativo 2
          Positioned(
            bottom: 120,
            right: -30,
            child: _circle(220, Colors.orangeAccent.withOpacity(0.6)),
          ),
        ],
      ),
    );
  }

  Widget _circle(double size, Color color) => Container(
        width: size,
        height: size,
        decoration: BoxDecoration(shape: BoxShape.circle, color: color),
      );
}

Il cuore dell'effetto è BackdropFilter, che applica un filtro (in questo caso ImageFilter.blur) a tutto ciò che sta dietro al suo child.

È fondamentale racchiudere il BackdropFilter in un ClipRRect (o ClipRect): senza clipping la sfocatura si estenderebbe oltre i bordi del widget, causando artefatti visivi.

import 'dart:ui';

Widget buildGlass() {
  return ClipRRect(
    borderRadius: BorderRadius.circular(24),
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
      child: Container(
        width: 300,
        height: 200,
        color: Colors.white.withOpacity(0.15),
      ),
    ),
  );
}

Per un vero effetto vetro servono tre ingredienti:

• un colore bianco a bassa opacità (0.1–0.2) come riempimento
• un bordo sottile bianco semitrasparente che simula il riflesso del vetro
• un borderRadius coerente con il ClipRRect

Risistemiamo la card usando un Container con BoxDecoration completa.

Widget glassCard({required Widget child}) {
  return ClipRRect(
    borderRadius: BorderRadius.circular(24),
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
      child: Container(
        padding: const EdgeInsets.all(24),
        decoration: BoxDecoration(
          color: Colors.white.withOpacity(0.15),
          borderRadius: BorderRadius.circular(24),
          border: Border.all(
            color: Colors.white.withOpacity(0.3),
            width: 1.5,
          ),
        ),
        child: child,
      ),
    ),
  );
}

Ora aggiungiamo del contenuto testuale e iconografico all'interno della card. Usiamo testo bianco per garantire il contrasto sopra lo sfondo colorato e centriamo la card nello Stack.

Widget centeredCard() {
  return Center(
    child: SizedBox(
      width: 320,
      child: glassCard(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Icon(Icons.lock_outline, color: Colors.white, size: 40),
            SizedBox(height: 16),
            Text(
              'Accesso sicuro',
              style: TextStyle(
                color: Colors.white,
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 8),
            Text(
              'I tuoi dati sono protetti con crittografia end-to-end.',
              style: TextStyle(color: Colors.white70, fontSize: 14),
            ),
          ],
        ),
      ),
    ),
  );
}

Uniamo lo sfondo del primo passo con la card centrale. Ricorda di importare dart:ui per ImageFilter. Aggiungiamo la card come ultimo figlio dello Stack così da sfocare tutto ciò che sta sotto.

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [Color(0xFF6A11CB), Color(0xFF2575FC)],
              ),
            ),
          ),
          Positioned(top: 80, left: -40, child: _circle(180, Colors.pinkAccent.withOpacity(0.6))),
          Positioned(bottom: 120, right: -30, child: _circle(220, Colors.orangeAccent.withOpacity(0.6))),
          centeredCard(),
        ],
      ),
    );
  }

  Widget _circle(double size, Color color) => Container(
        width: size,
        height: size,
        decoration: BoxDecoration(shape: BoxShape.circle, color: color),
      );
}

BackdropFilter è costoso: forza la GPU a ricalcolare la sfocatura ad ogni frame. Alcune buone pratiche:

• Limita l'area sfocata: sfoca solo la card, non l'intero schermo, mantenendo il ClipRRect stretto.
• Evita blur animati continui su widget grandi; se necessari, riduci il sigma.
• Su liste, non applicare BackdropFilter a decine di elementi visibili contemporaneamente.
• Valuta RepaintBoundary per isolare i ridisegni.
• Testa sempre su dispositivi reali di fascia bassa, non solo sull'emulatore.

Seguendo queste accortezze otterrai un glassmorphism elegante senza penalizzare la fluidità dell'app.

// Esempio: isolare il ridisegno della card
RepaintBoundary(
  child: glassCard(child: /* ... */ const SizedBox()),
);