sliver_snap

Description:

sliver snap

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.2.0
copied to clipboard
or you can add the latest version from the command line:
flutter pub add sliver_snap
copied to clipboard
2. Install it #
You can install packages from the command line with Flutter:
$ flutter pub get
copied to clipboard
3. Import it #
Now in your Dart code, you can use:
import 'package:sliver_snap/sliver_snap.dart';
copied to clipboard
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(),
),
);
copied to clipboard
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.


elevation
double
0.0
The elevation of the app bar


forceElevated
bool
false
Whether to show the shadow appropriate for the elevation even if the content is not scrolled under the app bar. Defaults to false, meaning that the elevation is only applied when the app bar is being displayed over content that is scrolled under it.



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:

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.
title: The middle widget between the leading and the trailing of the collapsedContent Appbar.,
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,
),
),
),
copied to clipboard
2. Expanded Content widget #
This can be used to create a custom expanded widget. It has the following properties:

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'),
);
copied to clipboard
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.