Unlocking Seamless Navigation and Sheet Management with smooth_sheets

Published on by Flutter News Hub

Unlocking Seamless Navigation and Sheet Management with smooth_sheets

smooth_sheets is a Flutter package that empowers developers to create highly customizable, animated sheets and navigation systems. With smooth_sheets, you can craft engaging user experiences with minimal effort.

Key Features

  • Smooth and Graceful Motion: Sheets respond to user interaction with elegant, natural animations.
  • Versatile Design: No restrictions on sheet design. Support for both modal and persistent sheets, as well as scrollable and non-scrollable content.
  • Nested Navigation: Sheets enable navigation between multiple pages, complete with smooth page transition animations.
  • Navigator Compatibility: Works seamlessly with both imperative and declarative Navigator APIs, including the latest Navigator 2.0.
  • iOS Aesthetic: Support for modal sheets in the style of iOS 15.

Core Components

DraggableSheet:

  • Draggable sheet with height equal to its content.
  • Physics-driven behavior for over-dragging and under-dragging.

ScrollableSheet:

  • Sheet designed for integration with scrollable widgets.
  • Automatically begins dragging when content is over-scrolled or under-scrolled.

NavigationSheet:

  • Sheet with multiple pages and animated page transitions.
  • Compatible with both imperative and declarative navigation styles.

ModalSheets:

  • Display sheets as modal dialogs using ModalSheetRoute or ModalSheetPage.
  • Enable "pull-to-dismiss" behavior with SheetDismissible.
  • Style sheets in the manner of iOS 15 modal sheets using CupertinoModalSheetRoute or CupertinoModalSheetPage.

SheetPhysics:

  • Physics that determine sheet behavior during dragging and when the user releases the drag.
  • Predefined physics include ClampingSheetPhysics, StretchingSheetPhysics, and SnappingSheetPhysics, which can be combined for complex effects.

SheetController:

  • Control sheet extent through animation or observation.
  • Similar to ScrollController for scrollable widgets.

SheetContentScaffold:

  • Special type of Scaffold designed for sheets.
  • Auto-adjusts height to fit content.
  • Includes slots for app bar and bottom bar, with customizable visibility.

SheetDraggable:

  • Enables non-scrollable content within a ScrollableSheet to be used as a drag handle.
  • Implicitly used in DraggableSheet.

ExtentDrivenAnimation:

  • Animation whose value is driven by the extent of a sheet.
  • Useful for creating animations that are synchronized with sheet movement.

SheetNotification:

  • Dispatched when sheet extent changes.
  • Allows widgets to observe sheet extent from an ancestor widget.

SheetKeyboardDismissBehavior:

  • Controls when an on-screen keyboard is dismissed when interacting with a sheet.
  • Includes predefined behaviors for various drag scenarios.

Usage Guide

1. Draggable Sheet:

DraggableSheet(
  child: Container(
    color: Colors.blue,
    height: 200,
    child: Text('Draggable Sheet'),
  ),
  physics: ClampingSheetPhysics(),
)

2. Scrollable Sheet:

ScrollableSheet(
  child: ListView.builder(
    itemCount: 100,
    itemBuilder: (context, index) => Text('Item $index'),
  ),
)

3. Navigation Sheet (Declarative Navigator 2.0):

NavigationSheet(
  pageBuilder: (_, child) => Page(child: child),
  pages: [
    Page1(),
    Page2(),
    Page3(),
  ],
)

4. Modal Sheet (Imperative Navigation):

Navigator.push(
  context,
  ModalSheetRoute(
    builder: (context) => ModalSheet(
      child: Container(
        color: Colors.red,
        child: Text('Modal Sheet'),
      ),
    ),
  ),
);

Conclusion

smooth_sheets offers a comprehensive toolkit for creating highly polished sheet and navigation experiences in Flutter apps. With its flexible design, smooth animations, and extensive features, you can effortlessly implement custom sheet layouts, navigation systems, and modal dialogs. Embrace smooth_sheets and elevate your app's user experience to the next level.

Flutter News Hub