All Projects → AdamJonsson → snapping_sheet

AdamJonsson / snapping_sheet

Licence: MIT license
A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions!

Programming Languages

dart
5743 projects
HTML
75241 projects

Projects that are alternatives of or similar to snapping sheet

flutter scatter
A widget that displays a collection of dispersed and non-overlapping children
Stars: ✭ 85 (-76.52%)
Mutual labels:  flutter-package
Motion-Tab-Bar
A beautiful animated flutter widget package library. The tab bar will attempt to use your current theme out of the box, however you may want to theme it.
Stars: ✭ 237 (-34.53%)
Mutual labels:  flutter-package
FlutterLoadingGIFs
Loading indicator GIFs. Material and Cupertino (Android and iOS) loading indicators in assorted sizes. Use as placeholders for loading remote image assets. Demo: https://gallery.codelessly.com/flutterwebsites/loadinggifs/
Stars: ✭ 28 (-92.27%)
Mutual labels:  flutter-package
code editor
A code editor (dart, js, html, ...) for Flutter with syntax highlighting and custom theme.
Stars: ✭ 48 (-86.74%)
Mutual labels:  flutter-package
flutter google maps
A Flutter plugin for integrating Google Maps in iOS, Android and Web applications. It is a wrapper of google_maps_flutter for Mobile and google_maps for Web.
Stars: ✭ 86 (-76.24%)
Mutual labels:  flutter-package
flutter section table view
A iOS like table view including section, row, section header and divider
Stars: ✭ 73 (-79.83%)
Mutual labels:  flutter-package
Liquid
An advance flutter UI Kit for developing responsive, cross platform applications.
Stars: ✭ 27 (-92.54%)
Mutual labels:  flutter-package
rainbow container
🌈 A magical container which changes colors whenever its build method is called.
Stars: ✭ 21 (-94.2%)
Mutual labels:  flutter-package
wasm.dart
WebAssembly virtual machine for Dart [work in progress]
Stars: ✭ 43 (-88.12%)
Mutual labels:  flutter-package
liquid button
Liquify your buttons, web demo at website
Stars: ✭ 18 (-95.03%)
Mutual labels:  flutter-package
research.package
A Flutter package implementing support for surveys like ResearchStack and ResearchKit
Stars: ✭ 43 (-88.12%)
Mutual labels:  flutter-package
open route service
An encapsulation made around openrouteservice API for Dart and Flutter projects. Made for easy generation of Routes and Directions on Maps, Isochrones, Time-Distance Matrix, Pelias Geocoding, POIs, Elevation and routing Optimizations using their amazing API.
Stars: ✭ 20 (-94.48%)
Mutual labels:  flutter-package
dough
This package provides some widgets you can use to create a smooshy UI.
Stars: ✭ 518 (+43.09%)
Mutual labels:  flutter-package
date field
Flutter DateField and DateFormField
Stars: ✭ 33 (-90.88%)
Mutual labels:  flutter-package
flutter cache store
More configurable cache manager for Flutter
Stars: ✭ 20 (-94.48%)
Mutual labels:  flutter-package
sounds
Flutter plugin for sound. Audio recorder and player.
Stars: ✭ 74 (-79.56%)
Mutual labels:  flutter-package
flutter-package-selection menu
A flutter widget, highly customizable, to select an item from a list of items.
Stars: ✭ 32 (-91.16%)
Mutual labels:  flutter-package
Flutter-Chat-Bar
Link to the package -. https://pub.dartlang.org/packages/flutter_chat_bar
Stars: ✭ 39 (-89.23%)
Mutual labels:  flutter-package
davinci
A flutter package to convert any widget to an Image.
Stars: ✭ 33 (-90.88%)
Mutual labels:  flutter-package
flutter dauth
A flutter package for authentication with DAuth(an OAuth2 based SSO (Single Sign On) for NITT students) authorisations service on behalf of the resource-owner/user.
Stars: ✭ 36 (-90.06%)
Mutual labels:  flutter-package

Snapping Sheet

example workflow pub points popularity likes License: MIT

A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions

Can adapt to scrollable
widgets inside the sheet.
Fully customizable animation
and content.
Not limited to the bottom part
of the app.

You can find and run the examples closing this repository and running the app from the example folder.

Getting started

As usual, begin by adding the package to your pubspec.yaml file, see install instruction.

Here is the most basic setup with the Snapping Sheet:

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

    class GettingStartedExample extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: SnappingSheet(
                    // TODO: Add your content that is placed
                    // behind the sheet. (Can be left empty)
                    child: MyOwnPageContent(), 
                    grabbingHeight: 75,
                    // TODO: Add your grabbing widget here,
                    grabbing: MyOwnGrabbingWidget(),
                    sheetBelow: SnappingSheetContent(
                        draggable: true,
                        // TODO: Add your sheet content here
                        child: MyOwnSheetContent(),
                    ),
                ),
            );
        }
    }

Customize snapping positions

To change the snap positions for the sheet, change the snappingPositions parameter witch takes in a list of SnappingPosition.factor or SnappingPosition.pixels. These two objects are used to specify the location using a factor or pixels. You also have the option to specify the duration and curve of how the sheet should snap to that given position.

    SnappingSheet(
        snappingPositions: [
            SnappingPosition.factor(
                positionFactor: 0.0,
                snappingCurve: Curves.easeOutExpo,
                snappingDuration: Duration(seconds: 1),
                grabbingContentOffset: GrabbingContentOffset.top,
            ),
            SnappingPosition.pixels(
                positionPixels: 400,
                snappingCurve: Curves.elasticOut,
                snappingDuration: Duration(milliseconds: 1750),
            ),
            SnappingPosition.factor(
                positionFactor: 1.0,
                snappingCurve: Curves.bounceOut,
                snappingDuration: Duration(seconds: 1),
                grabbingContentOffset: GrabbingContentOffset.bottom,
            ),
        ],
    )

Adding content to the sheet

You can place content both below or/and above the grabbing part of the sheet. If you do not want any content in the above or below part of the sheet, pass in null.

  • sizeBehavior: How the size of the content should behave. Can either be SheetSizeFill which fills the available height of the sheet, or SheetSizeStatic, which takes in a height that is respected in the sheet.
  • draggable: If the sheet itself can be draggable to expand or close the Snapping Sheet.
  • child: Any Widget of your choosing.
    SnappingSheet(
        sheetAbove: SnappingSheetContent(
            sizeBehavior: SheetSizeFill(),
            draggable: false,
            child: Container(color: Colors.blue),
        ),
        sheetBelow: SnappingSheetContent(
            sizeBehavior: SheetSizeStatic(size: 300),
            draggable: true,
            child: Container(color: Colors.red),
        ),
    )

Make SnappingSheet adapt to a scroll controller

In order to make the sheet know about the scroll controller, you need to provide it in the SnappingSheetContent class (See example below). It is recommended to set lockOverflowDrag to true to prevent the sheet to be dragged above or below its max and min snapping position.

     SnappingSheet(
        lockOverflowDrag: true, // (Recommended) Set this to true.
        sheetBelow: SnappingSheetContent(
            // Pass in the scroll controller here!
            childScrollController: _myScrollController,
            draggable: true,
            child: ListView(
                // And in the scrollable widget that you create!
                controller: _myScrollController,

                // OBS! Should be false if it is in sheetBelow.
                // OBS! Should be true if it is in sheetAbove.
                reverse: false,
            ),
        ),
    )

OBS that the scrollable widget, e.g ListView, SingleChildScrollView, etc. needs to have the correct reverse value depending on were it is located. If the scrollable widget is in the sheetBelow, the reverse value should be set to false. If it is located in the sheetAbove it should be set to true. The reason is that the current logic of the SnappingSheet only support that configuration of a scrollable widget.

Using the SnappingSheetController

You can control the Snapping Sheet using the SnappingSheetController

    // Create your controller
    final snappingSheetController = SnappingSheetController();
    SnappingSheet(

        // Connect it to the SnappingSheet
        controller: SnappingSheetController();

        sheetAbove: SnappingSheetContent(
            draggable: false,
            child: Container(color: Colors.blue),
        ),
        sheetBelow: SnappingSheetContent(
            draggable: true,
            child: Container(color: Colors.red),
        ),
    )

    // You can now control the sheet in multiple ways.
    snappingSheetController.snapToPosition(
      SnappingPosition.factor(positionFactor: 0.75),
    );
    snappingSheetController.stopCurrentSnapping();
    snappingSheetController.setSnappingSheetPosition(100);

    // You can also extract information from the sheet
    snappingSheetController.currentPosition;
    snappingSheetController.currentSnappingPosition;
    snappingSheetController.currentlySnapping;
    snappingSheetController.isAttached;

Listen to changes

You can listen to movement and when a snapping animation is completed by using the following parameters:

    SnappingSheet(
        onSheetMoved: (sheetPosition) {
            print("Current position ${sheetPosition.pixels}");
        },
        onSnapCompleted: (sheetPosition, snappingPosition) {
            print("Current position ${sheetPosition.pixels}");
            print("Current snapping position $snappingPosition");
        },
        onSnapStart: (sheetPosition, snappingPosition) {
            print("Current position ${sheetPosition.pixels}");
            print("Next snapping position $snappingPosition");
        },
    )

Horizontal Snapping Sheet

There also exist a horizontal mode for the snapping sheet. To use it, see the code below:

    SnappingSheet.horizontal(
        // TODO: Add your content that is placed
        // behind the sheet. (Can be left empty)
        child: MyOwnPageContent(), 
        grabbingWidth: 50,
        // TODO: Add your grabbing widget here,
        grabbing: MyOwnGrabbingWidget(),
        sheetLeft: SnappingSheetContent(
            draggable: true,
            // TODO: Add your sheet content here
            child: MyOwnSheetContent(),
        ),
    ),

A more complex example of a horizontal SnappingSheet can be found here.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].