Glassmorphism In Flutter

We all at some point have been fascinated with how a glass refracts the background. The same effect we will be achieving with Flutter.

https://dribbble.com/shots/14970215-Design-of-the-Task-app-in-glass-morphism

Today I will show you how you can create designs like this with flutter.

Understanding the basic

My basic process for developing any design with flutter is to analyse the design first. In this above beautiful example, we can see that there is a coloured background upon which our UI element sits with some gaussian blur.

With this let's create a widget which will be responsible for this effect.

Building the base widget

This widget will be responsible for creating a glass effect. Check the below code for the widget structure.

import 'dart:ui';

import 'package:flutter/material.dart';

class GlassMorphism extends StatelessWidget {
  const GlassMorphism(
      {Key? key,
      required this.child,
      required this.blur,
      required this.opacity,
      required this.color,
      this.borderRadius})
      : super(key: key);
  final Widget child;
  final double blur;
  final double opacity;
  final Color color;
  final BorderRadius? borderRadius;
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
        child: Container(
          decoration: BoxDecoration(
              color: color.withOpacity(opacity), borderRadius: borderRadius),
          child: child,
        ),
      ),
    );
  }
}

This widget is responsible for creating glass effect. you have you simply wrap your widget in this GlassMorphism Widget to get the desired result.

GlassMorphism(
                blur: 10,
                color: Colors.black,
                opacity: 0.2,
                borderRadius: BorderRadius.circular(12),
                child: Widget()),

Keep fluttering !!