Building glassmorphic bottom navigation bar in flutter

I am replicating a glassmorphic bottom navigation bar in flutter found on dribble.com, but i am no where close to the design the following code snippet is the closest i can get.

I have researched on this topic, but havent seen any easy tips and tricks to make this work, or either its too complicated.

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
        child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
      child: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.compass),
            label: 'Explore',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.bolt),
            label: 'Workout',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.zzz),
            label: 'Meditation',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: 0,
        onTap: (index) {
          //
        },
        backgroundColor: const Color(0x00181818).withOpacity(0.9),
        unselectedItemColor: Colors.white.withOpacity(0.5),
        selectedItemColor: const Color(0xFFF6E71D),
        elevation: 0,
      ),
    ));
  }

Your implementation looks good!

A Few Tips:

• If you're using Scaffold and assigning this navigation bar to bottomNavigationBar, make sure to set extendBody: true in the Scaffold. This will allow the body content to extend beneath the navigation bar, which is a common practice in glassmorphic designs.
• To fine-tune the glassmorphic effect, you can adjust the sigmaX and sigmaY values of ImageFilter.blur, as well as the opacity of backgroundColor.

Here’s a full working example that incorporates a glassmorphic bottom navigation bar:

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: const ExampleApp(),
      themeMode: ThemeMode.dark,
      darkTheme: ThemeData.dark(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true, // Allows body content to extend behind the navigation bar
      appBar: AppBar(title: const Text('Example App')),
      bottomNavigationBar: const GlassmorphismBottomNavigationBar(),
      body: Align(
        alignment: Alignment.bottomCenter,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            // Sample content to show beneath the bottom navigation bar
            Container(
              height: 200,
              width: 50,
              color: Colors.red,
            ),
            const FlutterLogo(size: 200),
            Container(
              height: 200,
              width: 50,
              color: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 35, sigmaY: 35), // Adjust the blur to enhance the glassmorphism effect
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.black.withOpacity(0.3),
          unselectedItemColor: Colors.grey.shade600,
          selectedItemColor: Colors.limeAccent,
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.explore),
              label: 'Explore',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
        ),
      ),
    );
  }
}