Flutter – Efecto “Cristal”/Blur de un componente en flutter

Ahora que ya tenemos nuevo UI de iOS 26 con efecto cristal, se me ocurrio solo por diversion crear un componente con efecto blur y transparencia en flutter.

Para crear el efecto es bastante sencillo, solo hay que usar el widget BackdropFilter, se utiliza para aplicar efectos visuales de filtro (como desenfoque) a todo lo que esté detrás de su hijo en el árbol de widgets. Basicamente lo que hace este widget es crear el efecto glassmorphism.

El efecto básicamente se consigue con el efecto de configuración: ImageFilter.blur

Quedaria como se aprecia en la imagen.

Código

El código es muy sencillo:

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

class AeroContainer extends StatelessWidget {
  final Widget child;
  final VoidCallback onTap;

  const AeroContainer({super.key,required this.child, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(30),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
        child: Material(
          color: Colors.white.withValues(alpha: 0.1),
          child: InkWell(
            onTap: onTap,
            child: Container(
              height: 50,
              padding: const EdgeInsets.symmetric(horizontal: 16),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30),
                border: Border.all(color: Colors.white),
              ),
              child: child,
            ),
          ),
        ),
      ),
    );
  }
}

El widget en mi ejemplo se puede mover libremente para apreciar mejor el efecto, esa logica esta en el main y es sencilla de implementar.

Codigo en Github