fadable_app_bar #

The Missing Fadable AppBar for Flutter. #

This Package is simple implementation of a fadable app bar for flutter. A wrapper on flutter's AppBar() to create a fade effect on the app bar when scrolling. This is a very common effect in many apps and is missing from flutter's default widgets.

Demo #

demo with material 3 and with material 2 respectively

Features #

• Fadable AppBar
• Customizable
• Easy to use

Getting started #

dependencies:
  fadable_app_bar: ^0.1.0

import 'package:fadable_app_bar/fadable_app_bar.dart';

Usage Example #

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

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

class MainApp extends StatelessWidget {
  MainApp({Key? key}) : super(key: key);

  final ScrollController _controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: FadableAppBar(
            scrollController: _controller,
            title: const Text('Fadable App Bar Demo'),
            foregroundColor: Colors.white,
            foregroundColorOnFaded: Colors.black,
            backgroundColor: Colors.green,
          ),
          body: ListView.builder(
              controller: _controller,
              itemCount: 100,
              itemBuilder: (context, index) {
                return ListTile(
                  style: ListTileStyle.drawer,
                  title: Text('Item $index'),
                );
              })),
    );
  }
}

Additional Parameters #

• scrollController is the controller of the scrollable widget that the app bar is in.
• foregroundColorOnFade is the color of the title and icons when the app bar is faded.
• fadeFactor is the factor by which the app bar fades. The higher the value, the slower the app bar fades.

Additional information #

Please file feature requests and bugs at the issue tracker.