scroll_app_bar 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 88

ScrollAppBar #

Hide or show app bar while scrolling. This package works without custom scroll views and slivers. So, you can use this widget in a scaffold widget, that turns your code more simple.

Simple scrollSnap behavior
n1n2

Roadmap #

This is currently our roadmap, please feel free to request additions/changes.

FeatureProgress
Simple scroll
Snap behavior
Pin/unpin
Gradient background

NOTE: Try use this package with scroll_bottom_navigation_bar package to a better user experience. See an example.

Usage #

Getting started #

Add scroll_app_bar package to your project. You can do this following this steps.

Basic implementation #

First, you need a ScrollController instance.

final controller = ScrollController(); 

This controller is required in order to get the main functionality of this package. You need to pass it on ScrollAppBar's controller and inside your ListView, also in controller property. Without this, you'll get an ordinary App Bar.

Now, you can use the ScrollAppBar widget in a Scaffold widget, and attach ScrollController instance in your scrollable main widget.

NOTE: Showing only essencial code. See example section to a complete implementation.

@override
Widget build(BuildContext context) {
  Scaffold(
    appBar: ScrollAppBar(
      controller: controller, // Note the controller here
      title: Text("App Bar"),
    ),
    body: ListView.builder(
      controller: controller, // Controller is also here
      itemBuilder: ...,
    ),
  );
}

Snap behavior #

To enable the snap behavior, you need just wrap the main scrollable widget with a Snap widget and attach controller.

@override
Widget build(BuildContext context) {
  Scaffold(
    appBar: ScrollAppBar(
      controller: controller, // Note the controller here
      title: Text("App Bar"),
    ),
    body: Snap(
      controller: controller.appBar,
      child: ListView.builder(
        controller: controller, // Controller is also here
        itemBuilder: ...,
      ),
    ),
  );
}

Example #

See a complete example.

API Reference #

// Returns the total height of the bar
controller.appBar.height;

// Notifier of the visible height factor of bar
controller.appBar.heightNotifier;

// Notifier of the pin state changes
controller.appBar.isPinned;

// Returns [true] if the bar is pinned or [false] if the bar is not pinned
controller.appBar.pinNotifier;

// Set a new pin state
controller.appBar.setPinState(state);

// Toogle the pin state
controller.appBar.tooglePinState();

// Discards resource
controller.appBar.dispose();

Change log #

Please see CHANGELOG for more information on what has changed recently.

Troubleshooting #

My AppBar doesn't move like intended #

Have you assigned the ScrollController to the controller property of ScrollAppBar and inside your ListView? This is required in order to get the main functionality.

Contributing #

Please send feature requests and bugs at the issue tracker.

Credits #

License #

BSD 3-Clause License. Please see License File for more information.

[1.0.2] - May 27, 2020 #

  • Fix ScrollAppBar cannot update with setState

[1.0.1] - May 26, 2020 #

  • Added web support

[1.0.0+2] - May 12, 2020 #

  • Updated documentation

[1.0.0+1] - April 30, 2020 #

  • Updated documentation

[1.0.0] - April 29, 2020 #

  • Fixed snap behavior.
  • Used dart extension on ScrollController instaed ScrollAppBarController.
  • Renamed arguments to simplify code.

[0.2.0+1] - April 09, 2020 #

  • Fix pub issues.

[0.2.0] - April 09, 2020 #

  • Added pin/unpin option.
  • Change scroll_bars_common version.
  • Fix others issues.

[0.1.1] - April 07, 2020 #

  • Added gradient background option.

[0.1.0] - April 06, 2020 #

  • Initial release.

example/lib/main.dart

import 'dart:math';

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

void main() => runApp(App());

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  final controller = ScrollController();

  bool notification;

  @override
  void initState() {
    super.initState();
    notification = false;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: ScrollAppBar(
          controller: controller, // Note the controller here
          title: Text("App Bar"),
          actions: [
            IconButton(
              icon: Icon(
                notification ? Icons.notifications : Icons.notifications_off,
              ),
              onPressed: () {
                setState(() => notification = !notification);
              },
            ),
          ],
        ),
        body: Snap(
          controller: controller.appBar,
          child: ListView.builder(
            controller: controller, // Controller is also here
            itemBuilder: _listBuildItem,
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }

  Widget _listBuildItem(BuildContext context, int index) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 50),
      color: Color(Random().nextInt(0xffffffff)),
      child: Center(child: Text("$index")),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  scroll_app_bar: ^1.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:scroll_app_bar/scroll_app_bar.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
76
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
88
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • scroll_app_bar that is a package requiring null.

Package not compatible with runtime flutter-web on web

Because:

  • package:scroll_app_bar/scroll_app_bar.dart that imports:
  • package:scroll_app_bar/src/scroll_app_bar_controller.dart that imports:
  • dart:io

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0 <3.0.0
flutter 0.0.0
scroll_bars_common ^2.0.0 2.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test