Modern UI design is all about aesthetics and user experience, and Flutter makes it easy to create visually stunning interfaces. In this guide, we'll explore three popular design trends:

✅ Glassmorphism — Frosted glass effect with blur & transparency ✅ Neumorphism — Soft UI with shadows & highlights for depth ✅ Material You — Dynamic color theming based on user preferences

By the end, you'll be able to implement all three styles in your Flutter apps to create modern, stylish UIs. 🚀

1. Understanding Glassmorphism, Neumorphism, and Material You

What is Glassmorphism?

Glassmorphism gives UI elements a frosted glass appearance, making them look translucent with a blurred background.

🔹 Main Features: ✅ Blur effect ✅ Semi-transparent background ✅ Subtle shadows and borders

What is Neumorphism?

Neumorphism (Soft UI) combines light and dark shadows to create elements that look embedded or protruded.

🔹 Main Features: ✅ Soft shadows for depth ✅ Minimalist look ✅ Smooth & rounded edges

What is Material You?

Material You (Material 3) is Google's design system that adapts UI colors dynamically based on the user's wallpaper and theme preferences.

🔹 Main Features: ✅ Dynamic color themes ✅ Adaptive UI components ✅ Consistent across devices

2. Implementing Glassmorphism in Flutter

Glassmorphism relies on the BackdropFilter widget to create a blurred, transparent background.

Flutter Code for Glassmorphism

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

void main() {
  runApp(MaterialApp(home: GlassmorphismScreen()));
}

class GlassmorphismScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey.shade900,
      body: Center(
        child: ClipRRect(
          borderRadius: BorderRadius.circular(20),
          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 background
                borderRadius: BorderRadius.circular(20),
                border: Border.all(color: Colors.white.withOpacity(0.3)),
              ),
              child: Center(
                child: Text(
                  "Glassmorphism UI",
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

🔹 How it works: ✅ BackdropFilter adds the blur effect ✅ Container has a semi-transparent background ✅ White border enhances the glassy look

3. Implementing Neumorphism in Flutter

Neumorphism uses light and dark shadows to create a soft, embossed look.

Flutter Code for Neumorphic Buttons

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: NeumorphismScreen()));
}

class NeumorphismScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFE0E5EC), // Soft background
      body: Center(
        child: Container(
          width: 150,
          height: 150,
          decoration: BoxDecoration(
            color: Color(0xFFE0E5EC),
            borderRadius: BorderRadius.circular(20),
            boxShadow: [
              BoxShadow(
                color: Colors.white, // Light shadow
                offset: Offset(-5, -5),
                blurRadius: 10,
              ),
              BoxShadow(
                color: Colors.black12, // Dark shadow
                offset: Offset(5, 5),
                blurRadius: 10,
              ),
            ],
          ),
          child: Icon(Icons.lightbulb, size: 50, color: Colors.blueGrey.shade700),
        ),
      ),
    );
  }
}

🔹 How it works: ✅ Two shadows create depth ✅ Soft background color blends shadows ✅ Minimalistic, embossed effect

4. Implementing Material You (Material 3) in Flutter

Flutter supports Material You using the dynamic_color package for adaptive theming.

Adding Material You Support

1️⃣ Enable Material 3 in pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  dynamic_color: ^1.6.0

2️⃣ Use Material You Colors

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

void main() {
  runApp(MaterialYouApp());
}

class MaterialYouApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DynamicColorBuilder(
      builder: (ColorScheme? lightScheme, ColorScheme? darkScheme) {
        return MaterialApp(
          theme: ThemeData(
            colorScheme: lightScheme ?? ColorScheme.fromSeed(seedColor: Colors.blue),
            useMaterial3: true,
          ),
          darkTheme: ThemeData(
            colorScheme: darkScheme ?? ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.dark),
            useMaterial3: true,
          ),
          home: MaterialYouScreen(),
        );
      },
    );
  }
}

class MaterialYouScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Material You in Flutter")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text("Adaptive Button"),
        ),
      ),
    );
  }
}

🔹 How it works: ✅ DynamicColorBuilder fetches Material You colors ✅ Theme adapts to system preferences ✅ Buttons and widgets match the user's wallpaper

Final Thoughts

With Flutter, you can easily implement modern UI trends like: ✅ Glassmorphism — Frosted glass effects with blur & transparency ✅ Neumorphism — Soft shadows for realistic depth ✅ Material You — Dynamic colors for adaptive UI

If you found this story helpful, you can support me at Buy Me a Coffee!