flutter_glass_appbar #

A Flutter AppBar with a smooth glass (blur) effect that appears when the user scrolls.

✨ Features #

• 🧊 Beautiful Glass/Blur Effect - Smooth frosted glass appearance on scroll
• 📜 Scroll-Aware - Automatically activates when user scrolls past threshold
• 🎨 Highly Customizable - Control colors, opacity, gradients, blur intensity, and more
• 🧩 Works Everywhere - Compatible with CustomScrollView, SliverList, ListView, and any scrollable widget
• ⚡ Lightweight - Zero external dependencies, pure Flutter implementation
• 💎 Production-Ready - Battle-tested and pub.dev friendly

🎥 Demo #

Here’s how FlutterGlassAppBar looks in action:


📦 Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_glass_appbar: ^0.0.4

Then run:

flutter pub get

🚀 Quick Start #

Basic Usage #

import 'package:flutter/material.dart';
import 'package:flutter_glass_appbar/glass_app_bar.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true, 
      appBar: FlutterGlassAppBar(
        title: 'Glass AppBar',
        scrollController: scrollController,
      ),
      body: ListView.builder(
        controller: scrollController,
        itemCount: 50,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
      ),
    );
  }
}

⚠️ Important Requirement (Must Read) #

To make the glass blur effect visible behind the AppBar, you must enable the following in your Scaffold:

Scaffold(
  extendBodyBehindAppBar: true, 
  appBar: FlutterGlassAppBar(...),
  body: ...,
)

Without this, the blur effect won't work because there will be no content behind the AppBar to blur.

🎨 Customization Examples #

Custom Colors & Opacity #

FlutterGlassAppBar(
  title: 'Custom Glass',
  scrollController: scrollController,
  backgroundColor: Colors.blue.shade50,
  glassColor: Colors.white,
  glassOpacity: 0.3,
  glassGradientTopOpacity: 0.4,
  glassGradientBottomOpacity: 0.1,
)

Custom Blur Intensity #

FlutterGlassAppBar(
  title: 'Strong Blur',
  scrollController: scrollController,
  blurSigma: 15.0, 
)

Custom Scroll Threshold #

FlutterGlassAppBar(
  title: 'Late Activation',
  scrollController: scrollController,
  scrollThreshold: 50.0, 
)

With Custom Widget Title #

FlutterGlassAppBar(
  titleWidget: Row(
    children: [
      Icon(Icons.home),
      SizedBox(width: 8),
      Text('Home'),
    ],
  ),
  scrollController: scrollController,
)

With Actions #

FlutterGlassAppBar(
  title: 'With Actions',
  scrollController: scrollController,
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {},
    ),
  ],
)

Disable Glass Effect #

FlutterGlassAppBar(
  title: 'Regular AppBar',
  scrollController: scrollController,
  glassEffect: false, 
)

💡 Tips & Best Practices #

1. Always set extendBodyBehindAppBar: true - This is required for the blur effect to work
2. Add padding to your content - Since the body extends behind the AppBar, add top padding to your first widget:

   SliverPadding(
     padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top + kToolbarHeight),
     sliver: YourContent(),
   )
   

3. Use with CustomScrollView - For best results with complex layouts
4. Adjust scroll threshold - Fine-tune scrollThreshold based on your UI needs
5. Test blur intensity - Different blurSigma values work better with different backgrounds

🐛 Troubleshooting #

Glass effect not visible? #

• ✅ Make sure extendBodyBehindAppBar: true is set in your Scaffold
• ✅ Verify your scroll controller is attached to your scrollable widget
• ✅ Check that content extends behind the AppBar

Blur is too strong/weak? #

• Adjust the blurSigma parameter (range: 3-20 works well)
• Modify glassOpacity and gradient opacity values
• Test with different backgrounds and content

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.

You are free to:

• ✅ Use this package in personal and commercial projects
• ✅ Modify the source code
• ✅ Share and redistribute it

No attribution is required, but it is appreciated! ⭐

Enjoy building beautiful apps with FlutterGlassAppBar! 🎉