WoltModalSheet

WoltModalSheet is designed to revolutionize the use of modal sheets in Flutter apps. Built with Wolt-grade design quality and used extensively in Wolt products, this UI component offers a visually appealing and highly customizable modal sheets with multiple pages, motion for page transitions, and scrollable content within each page.

• Usage
  • Basic Starter App
  • Basic Multi Page Example app
  • Playground app with imperative navigation
  • Playground app with declarative navigation
  • Coffee maker app for state management example
  • CupertinoApp support
• Features
  • Multi-Page Layout
  • Scrollable Content
  • Responsive Design
  • Custom Modal Types
  • Motion
  • Imperative and Declarative Navigation
  • Dynamic Pagination
  • State Management Integration
• Modal Types
  • Defining Custom Modal Types
  • Modal Type Responsiveness
• Decorating modal types, modal, and pages
  • Decoration Approaches
    • Modal Type Level Decoration
    • Modal Level Decoration
  • Types of Decoration
    • Page Content Decoration
    • Modal Decoration
      • Why use modalDecorator for state management?
  • Migration to v0.8.0
• Usage of WoltModalSheet Pages
  • SliverWoltModalSheetPage
  • WoltModalSheetPage
  • NonScrollingWoltModalSheetPage
• In-Modal Navigation
  • Managing Navigation Stack
    • Adding Pages to the Stack
    • Modifying Existing Pages
      • Replace a specific page
      • Replace or update the current page
      • Remove a specific page
      • Add or replace pages
  • Navigation Between Pages
    • Direct navigation
    • Pushing Pages
    • Popping Page
  • Dynamic Navigation with ValueNotifiers
    • Navigation by Page Index Notifier
    • Dynamic Page List Management by Page List Builder Notifier
• Design Guidelines
  • Overview
  • Breakpoints
  • Modal Types
    • Alert Dialog
    • Dialog
    • Side Sheet
    • Bottom Sheet
• Understanding the page elements
  • Navigation bar widgets
  • Top bar and top bar title
  • Sticky action bar (SAB)
  • Hero image
  • Page Title
  • Main content
• Designer's Collaboration Guide
  • What's Inside the Figma File
• Customizable Animations
  • Default Animation Style Specifications
    • Pagination Animation
    • Scrolling Animation
  • Example Configuration
• Additional information

Usage

This package includes five example projects, but if you're looking to get a quick feel for it, check out the basic starter app.

Besides the "Basic Starter App," be sure to clone the related example repository to get a feel for the fully functioning samples.

Basic Starter App

Install the library to your project by running:

flutter pub add wolt_modal_sheet

Afterwards, if you copy and paste following code to your main.dart file and run it, it will help you get started:

This is the beginning of the README. Read the rest at the original. Read the full README ↗