sliver_snap 1.1.1

Allows you to use powerful snapping slivers with expanded and collapsed bars.

Sliver Snap

🚀 Sliver Snap is a Flutter package that simplifies the process of adding collapsible and expandable app bars to your app. It offers smooth transitions that respond seamlessly to user scrolling and snaps to the appropriate mode when the user stops scrolling midway. 💻 It's highly customizable and provides a user-friendly experience.
Say goodbye to manual implementation and make your Flutter app more interactive and intuitive with Sliver Snap. 🤯

Table of contents

• Table of contents
• Preview
• Installing
  • 1. Depend on it
  • 2. Install it
  • 3. Import it
• Basic Usage
  • Properties
• Extra Components
  • 1. Collapsed AppBar Content widget
  • 2. Expanded Content widget
• Additional information
• Bugs or Requests

Preview

basic	Performance

Installing

1. Depend on it

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

dependencies:
  sliver_snap: ^1.1.1

or you can add the latest version from the command line:

flutter pub add sliver_snap

2. Install it

You can install packages from the command line with Flutter:

$ flutter pub get

3. Import it

Now in your Dart code, you can use:

import 'package:sliver_snap/sliver_snap.dart';

Basic Usage

  SliverSnap(
    onCollapseStateChanged: (isCollapsed, scrollingOffset, maxExtent) {},
    collapsedBackgroundColor: Colors.black,
    expandedBackgroundColor: Colors.transparent,
    backdropWidget: Image.network(
      "https://picsum.photos/800/1200",
      fit: BoxFit.cover,
    ),
    bottom: const PreferredSize(
      preferredSize: Size.fromHeight(50),
      child: Icon(
        Icons.directions_boat,
        color: Colors.blue,
        size: 45,
      ),
    ),
    expandedContentHeight: 400,
    expandedContent: const Center(
      child: Icon(
        Icons.ac_unit_sharp,
        color: Colors.amber,
        size: 70,
      ),
    ),
    collapsedContent:
    const Icon(Icons.car_crash, color: Colors.green, size: 45),
    body: const Material(
      elevation: 7,
      child: Placeholder(),
    ),
  );

Properties

Property	Type	Default Value	Description
expandedContent	Widget	N/A	The content that is shown when expanded. It is a required property.
collapsedContent	Widget	N/A	The appbar Which is shown when collapsed. It is a required property.
body	Widget	N/A	The content shown below the appbar. It is a required property.
pinned	boolean	true	Whether the appbar will be fixed at the top of the scroll view. For more information check the documentation For more information check the flutter docs.
collapsedBarHeight	double	60.0	The height of the collapsedContent.
animationDuration	Duration	300 milliseconds	The duration of the scroll animation which happens when automatically snapping to the collapsed or the expanded widgets.
animationCurve	Curve	Curves.easeInOut	The Curve of the scroll animation which happens when automatically snapping to the collapsed or the expanded widgets.
snap	boolean	false	Whether the app bar behave in a smooth or a rigid way as the it is scrolling. For more information check the documentation flutter docs.
floating	boolean	false	Whether the app bar should become visible as soon as the user scrolls towards the app bar. For more information check the flutter docs.
stretch	boolean	false	Whether the app bar should stretch to fill the over-scroll area. For more information check the flutter docs.
expandedContentHeight	double?	N/A	The height of the expandedContent.
bottom	PreferredSizeWidget?	N/A	The widget that appears across the bottom of the appbar. For example a TabBar. This widget has to implement a PreferredSizeWidget.
automaticallyImplyLeading	bool?	false	Provides Control of the AppBar's leading widget. When set to true, the framework will automatically add a leading widget When set to false , no leading widget will be added automatically. For more information check the flutter docs.
leading	Widget?	N/A	The leading widget at the start both the expandedContent and the collapsedContent, typically an Icon or an IconButton. It can also be a BackButton.
actions	List	N/A	A list of action widgets to display in a row after the collapsedContent widget.
backdropWidget	Widget?	N/A	The content that is shown below the appbar. In most cases it's just the page content.
expandedBackgroundColor	Color?	N/A	The background Color of the expandedContent widget.
collapsedBackgroundColor	Color?	N/A	The background Color of the collapsedContent widget.
scrollController	ScrollController?	N/A	Can be used to pass your own scrollController to customize the appbar even more.
scrollBehavior	ScrollBehaviour?	N/A	How the scrollable widgets behave, either Material or Cupertino Scrolling behaviors.
onCollapseStateChanged	CollapsingStateCallback?	N/A	This is a callback function that is triggered when the bar is either collapsed or expanded. It can be used to customize the animation and behavior of the widget to better suit your needs.

Extra Components

The below are supplementary widgets that can help you build the appbar faster.

1. Collapsed AppBar Content widget

This can be used to create a custom collapsedContent widget. It has the following properties:

1. leading: This is the leading widget specifically for the collapsedContent Appbar. Don't add the leading widget to the ExpandedContent widget or the SliverSnap widget, as they might overlap.
2. title: The middle widget between the leading and the trailing of the collapsedContent Appbar.,
3. trailing: The widget that is displayed at the rightmost part of the collapsedContent.

      CollapsedAppBarContent(
        leading: const Text('Leading Widget'),
        title: const Text('title'),
        trailing: SizedBox(
          height: 40,
          child: Image.network(
            'https://picsum.photos/800/1200',
            fit: BoxFit.cover,
          ),
        ),
      ),

2. Expanded Content widget

This can be used to create a custom expanded widget. It has the following properties:

1. leading: This is the leading widget specifically for the expandedContent Appbar. Don't add the leading widget to the CollapsedAppBarContent widget or the SliverSnap widget, as they might overlap.

    ExpandedContent(
      leading: const Text('Leading Widget'),
      child: const Text('Expanded Content'),
    );

Additional information

Feel free to check the example for more usage info.

Bugs or Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket. Pull request are also welcome.