please add null safety support because it's not compatible with dart 2.12

I'm using PreferredSize to make a custom app bar widget, there's a way to use PreferredSize as a child of ScrollBar, as far I know it's not possible, there's any workaround?

Some of the issues that i noticed is

1. Not working with BouncingScrollPhysics properly
2. Not working properly when scroll page size is only not bigger than screenSize+appBarSize
   3)The size of appBar is very less when used with android 11

Would be nice if the example showed exactly how to retrieve the current index and onTap, since the original bottom navigation bar provides this feature, I am currently struggling to make this work for me, the scrolling works but how do I use on tap to change screens.

Would be nice if the package allows to pass through a custom currentIndex & onTap.
Thank you!

I tried running the example screen.
But got overflow errors in BottomNavigationBar only on iOS notch devices.

Is there a way to fix this?

Bug

using oringinal Appbar

using scroll Appbar

I found this package while looking for an AppBar that was not "stuck" at the top of the screen.

However, when I went to use it, I didn't quite understand that the controller inside ListView.builder (or separated, custom) is required for the main functionality of the package. Otherwise, the package becomes a conventional AppBar.

This is what I'm talking about:

https://github.com/EdsonOnildoJR/scroll_app_bar/blob/c259b790f5ac88aa7e38ca2fa202e8d7f6c1c5c2/example/lib/main.dart#L19-L27

So, for this reason, I believe it would be better to put this information prominently in the README, with a slightly more detailed example.

this library doesn't work fine when i set BouncingScrollPhysics physic

I want to intergrate with other bottom navigation bar with fancy animations. I wonder whether this lib could give a thin wrapper of the hide/show on scrolling functionality, and provide a property as child (Widget) instead of items(Widget[]).

I think this package functionality just got released as part of flutter

https://medium.com/flutter/whats-new-in-flutter-3-7-38cbea71133c

and

https://api.flutter.dev/flutter/material/BottomAppBar-class.html

The ability to scroll the page and make the app bar appear and disappear depending on the scroll direction.

Not sure if it supports both directions, worth checking out.
If it does the same we need to change the readme to reflect that this package is no longer needed and users should move to the native flutter implementation.

Thank you for this useful package!

There's an issue when using a transparent AppBar with this package.
Because in the code the elevation is always set as elevation: 0.0, and added later using:

  Widget _elevation(double heightFactor) {
    return Material(
      elevation: elevation,
      child: _decoratedContainer(heightFactor),
    );
  }

Any AppBar with a transparent color will not be rendered as so.

This can be resolved in many ways, such as passing the Material widget a type property.
It'd be nice to fix this simple incompatibility in the package in any way you find appropriate!

I have a ScrollBottomNavigationBar that scrolls up or down when it has a ScrollController attached to it. However as my valueListenable only listens to one scrollController, I cannot assign multiple ScrollControllers with the same valueListenable.

This is my ScrollBottomNavigationBar

ValueListenableBuilder<int>(
      valueListenable: controller.bottomNavigationBar.tabNotifier,
      builder: (context, value, child) {
        return Scaffold(
          bottomNavigationBar: ScrollBottomNavigationBar(
            controller: taskController,
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.plus), label: 'Page1'),
              BottomNavigationBarItem(
                  icon: Icon(Icons.plus), label: 'Page2'),
              BottomNavigationBarItem(
                  icon: Icon(Icons.plus), label: 'Page3'),
            ],
          ),
          body: Column(
            children: [
              Expanded(
                child: Container(
                  child: IndexedStack(
                    index: value,
                    children: <Widget>[
                     Page1(),
                      Page2(),
                      Page3(),
                    ],
                  ),
                ),
              ),
            ],
          ),
        );
      })

This is my Page1() -

return Scaffold(
    body: ValueListenableBuilder<int>(
      valueListenable: controller.bottomNavigationBar.tabNotifier,
      builder: (context, tabIndex, child) => ListView.builder(
        controller: controller,
        itemBuilder: ...,
      ),
    ),
  );

This is my Page2()-

return Scaffold(
    body: ValueListenableBuilder<int>(
      valueListenable: controller.bottomNavigationBar.tabNotifier,
      builder: (context, tabIndex, child) => ListView.builder(
        controller: controller, //I cannot return the same controller here
        itemBuilder: ...,
      ),
    ),
  );

if the appbar contains Tab bar also, while scrolling tab bar is also hiding, it should not hide
any suggestions.

Hi,
thanks for fine component :)

I'd like to add some additional content to app bar using bottom property, ex:
bottom: PreferredSize(
preferredSize: Size.fromHeight(100),
child: Container(height: 50, color: Colors.amber)),

Above example works fine with normal AppBar, but in ScrollAppBar I'm getting error:
"A RenderFlex overflowed by 44 pixels on the bottom."

Regards,
Michał

Hi, this library is amazing but i got error when my content is little more big than page size.

I made this two video (first, second) to show you the behaviour.

This is my main.dart

import 'package:flutter/material.dart';
import 'package:scroll_app_bar/scroll_app_bar.dart';
import 'package:scroll_bottom_navigation_bar/scroll_bottom_navigation_bar.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(Civica());
}

class Civica extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'App title',
      home: CivicaState(),
    );
  }
}

class CivicaState extends StatefulWidget {
  CivicaState({Key key}) : super(key: key);

  @override
  _CivicaState createState() => _CivicaState();
}

class _CivicaState extends State<CivicaState> {

  int length = 3;
  final ScrollController scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ScrollAppBar(
        title: Text('Title'),
        centerTitle: true,
        controller: scrollController,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.miniEndFloat,
      body: ValueListenableBuilder<int>(
        valueListenable: scrollController.bottomNavigationBar.tabNotifier,
        builder: (context, tabIndex, child) => Snap(
          controller: scrollController.bottomNavigationBar,
          child: SafeArea(
            child: Center(
              child: Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Expanded(
                    child: ListView.builder(
                        controller: scrollController,
                        itemCount: length,
                        itemBuilder: (BuildContext context, int index) {
                          return Padding(
                            padding: EdgeInsets.all(10.0),
                            child: Column(children: [
                              Container(
                                height: 170,
                                color: index % 2 == 0 ? Colors.purple : Colors.yellow,
                              ),
                            ]),
                          );
                        }
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),

      bottomNavigationBar: ScrollBottomNavigationBar(
        controller: scrollController,
        fixedColor: Theme.of(context).tabBarTheme.labelColor,
        unselectedItemColor: Theme.of(context).secondaryHeaderColor,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            backgroundColor: Theme.of(context).primaryColor,
            icon: Icon(
              Icons.home,
            ),
            title: Text("Home"),
          ),
          BottomNavigationBarItem(
            backgroundColor: Theme.of(context).primaryColor,
            icon: Icon(Icons.share),
            title: Text("Settings"),
          ),
          BottomNavigationBarItem(
            backgroundColor: Theme.of(context).primaryColor,
            icon: Icon(Icons.notifications),
            title: Text("Settings"),
          ),
          BottomNavigationBarItem(
            backgroundColor: Theme.of(context).primaryColor,
            icon: Icon(Icons.settings),
            title: Text("Settings"),
          ),
        ],
      ),
      floatingActionButton: Container(
        height: 40.0,
        width: 40.0,
        child: FittedBox(
          child: FloatingActionButton(
            onPressed: () {},
            child: Icon(
              Icons.add,
              size: 30,
            ),
            elevation: 5,
          ),
        ),
      ),
    );
  }
}

I'm using your ScrollAppBar as well.

I test it on Nexus 6 emulator with API 29.

Hope that you or someone can help me, thanks,
Antonio.

Got bottom overflow with tab bars:

Thank you for developing something very useful, I would like to allow you to export one more feature: Show/ hide the appbar from anywhere.
Starting from the fact, I have a scrollbar tracker of all the pages, when there is a page changed event. I need to show the appbar.
Thanks,

I have tried adjusting BottomNavigationBar's iconSize, (selected / unselected) fontSize, or wrapping the whole Scaffold with SafeArea(), but none of them works. Any workaround here?

My code:

  Widget _buildAppContainer() {
    return Scaffold(
      appBar: AppBar(toolbarHeight: 0, elevation: 0),
      body: ValueListenableBuilder<int>(
        valueListenable: appScrollController.bottomNavigationBar.tabNotifier,
        builder: (context, tabIndex, child) => _pageOptions[tabIndex],
      ),
      bottomNavigationBar: ScrollBottomNavigationBar(
        controller: appScrollController,
        showUnselectedLabels: false,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.cloud_circle), label: 'Cloud'),
          BottomNavigationBarItem(icon: Icon(Icons.groups), label: 'Team'),
          BottomNavigationBarItem(icon: Icon(Icons.face), label: 'Me'),
        ],
        currentIndex: _selectedIndex,
        onTap: (index) => onTapNavItem(index),
        type: BottomNavigationBarType.shifting,
      ),
    );
  }

Hello,

If the content is enough to scroll down once and small enough to not be able to scroll when AppBar is hidden then you cannot show the AppBar back...
The issue is the listener not triggered when dragging page even if it has some "handle" effect.

https://github.com/ChangJoo-Park/flutter_tab_ui_template/blob/master/lib/main.dart#L117-L132

These lines using state with setState. I expected the UI to change. But It can't

Please see belows.

Using ScrollAppBar

https://i.imgur.com/y0nCyHB.mp4

Using AppBar

https://i.imgur.com/ev64b9O.mp4

When i run it in iphone X newer it not show fullcontent. Please test and check it. Thanks you so much

Devices which has notch on top, shows only 10-20% approx of app bar, because of which, leading icons are not visible