zeba_academy_glass_blocks

A modern Flutter package that brings beautiful glassmorphism UI components to your applications with minimal effort.

Create stunning frosted-glass interfaces using ready-to-use widgets such as glass cards, blur containers, navigation bars, dialogs, and loaders.

✨ Features

  • 🪟 Glass Cards
  • 🌫️ Blur Containers
  • 🧭 Glass Navigation Bars
  • 💬 Glass Dialogs
  • ⏳ Glass Loaders
  • 🎨 Customizable Blur Effects
  • 📱 Responsive Design
  • ⚡ Lightweight & Performant
  • 🛡️ Null Safety Support
  • ❤️ Material 3 Compatible

📦 Installation

Add the package to your pubspec.yaml:

dependencies:
  zeba_academy_glass_blocks: ^1.0.0

Then run:

flutter pub get

🚀 Import

import 'package:zeba_academy_glass_blocks/zeba_academy_glass_blocks.dart';

GlassCard

A beautiful frosted-glass card widget.

GlassCard(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: const [
      Icon(Icons.star, size: 50),
      SizedBox(height: 10),
      Text('Glass Card'),
    ],
  ),
)

Properties

Property Type Default
child Widget Required
blur double 20
borderRadius double 20
padding EdgeInsets EdgeInsets.all(16)

BlurContainer

Reusable blur container for overlays and sections.

BlurContainer(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text(
      'Blur Container',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

Properties

Property Type Default
child Widget Required
blur double 15
radius double 18
color Color Glass Color

GlassNavigationBar

Glassmorphism bottom navigation bar.

GlassNavigationBar(
  currentIndex: 0,
  onTap: (index) {},
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile',
    ),
  ],
)

GlassDialog

Modern glass-style dialog.

showDialog(
  context: context,
  builder: (_) => const GlassDialog(
    title: 'Welcome',
    message: 'This is a glass dialog.',
  ),
);

GlassLoader

Glassmorphism loading indicator.

const GlassLoader()

Custom size:

const GlassLoader(
  size: 80,
)

Complete Example

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        extendBody: true,
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.purple,
                Colors.blue,
              ],
            ),
          ),
          child: Center(
            child: GlassCard(
              child: const Text(
                'Zeba Academy Glass Card',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 22,
                ),
              ),
            ),
          ),
        ),
        bottomNavigationBar: GlassNavigationBar(
          currentIndex: 0,
          onTap: (index) {},
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
        ),
      ),
    );
  }
}

🎯 Use Cases

  • Modern Dashboards
  • Portfolio Apps
  • Finance Applications
  • Social Media Apps
  • Productivity Tools
  • Premium UI Designs
  • Landing Pages
  • Admin Panels

📱 Platform Support

Platform Supported
Android ✅
iOS ✅
Web ✅
Windows ✅
macOS ✅
Linux ✅

🧪 Testing

Run tests using:

flutter test

📋 Roadmap

Upcoming Features

  • Animated Glass Cards
  • Glass Buttons
  • Glass AppBar
  • Glass Bottom Sheets
  • Glass Text Fields
  • Glass Dropdowns
  • Glass Sliders
  • Glass Dashboard Widgets
  • Glass Side Navigation
  • Advanced Blur Presets
  • Dark Mode Enhancements

🤝 Contributing

Contributions, issues, and feature requests are welcome.

Feel free to submit a pull request to improve the package.

📄 License

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

Copyright (C) 2026 Sufyan bin Uzayr

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

For full license text, see the LICENSE file.

About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at https://sufyanism.com/ or connect with me on LinkedIn at https://www.linkedin.com/in/sufyanism.

Your all-in-one learning hub!

🚀 Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience. Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development.

➡ Visit our main site: https://zeba.academy

➡ Explore hands-on courses and resources: https://code.zeba.academy

➡ YouTube: https://www.youtube.com/@zeba.academy

➡ Instagram: https://www.instagram.com/zeba.academy/

⭐ If you find this package useful, please consider giving it a star and sharing it with the Flutter community.

Thank you for visiting!

Libraries

zeba_academy_glass_blocks