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:

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

void main() {
  runApp(
    const WoltModalSheetApp(),
  );
}

class WoltModalSheetApp extends StatelessWidget {
  const WoltModalSheetApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: WoltModalSheetHomePage(),
    );
  }
}

class WoltModalSheetHomePage extends StatelessWidget {
  const WoltModalSheetHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Wolt Modal Bottom Sheet Sample'),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          WoltModalSheet.show(
            context: context,
            pageListBuilder: (bottomSheetContext) => [
              SliverWoltModalSheetPage(
                mainContentSliversBuilder: (context) => [
                  SliverList.builder(
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text('Index is $index'),
                        onTap: Navigator.of(bottomSheetContext).pop,
                      );
                    },
                  ),
                ],
              )
            ],
          );
        },
        label: const Text('Trigger Wolt Sheet'),
      ),
    );
  }
}

The code above will show you the screen below:

Basic Multi Page Example app

The example app demonstrates how to display a two-pages modal sheet that can be customized for dark and light themes using WoltModalSheetThemeData theme extension.

@override
Widget build(BuildContext context) {
  SliverWoltModalSheetPage page1(BuildContext modalSheetContext, TextTheme textTheme) {
    return WoltModalSheetPage(
      hasSabGradient: false,
      stickyActionBar: Padding(
        padding: const EdgeInsets.all(_pagePadding),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: Navigator.of(modalSheetContext).pop,
              child: const SizedBox(
                height: _buttonHeight,
                width: double.infinity,
                child: Center(child: Text('Cancel')),
              ),
            ),
            const SizedBox(height: 8),
            ElevatedButton(
              onPressed: WoltModalSheet.of(modalSheetContext).showNext,
              child: const SizedBox(
                height: _buttonHeight,
                width: double.infinity,
                child: Center(child: Text('Next page')),
              ),
            ),
          ],
        ),
      ),
      topBarTitle: Text('Pagination', style: textTheme.titleSmall),
      isTopBarLayerAlwaysVisible: true,
      trailingNavBarWidget: IconButton(
        padding: const EdgeInsets.all(_pagePadding),
        icon: const Icon(Icons.close),
        onPressed: Navigator.of(modalSheetContext).pop,
      ),
      child: const Padding(
              padding: EdgeInsets.fromLTRB(
                _pagePadding,
                _pagePadding,
                _pagePadding,
                _bottomPaddingForButton,
              ),
              child: Text(
                '''
Pagination involves a sequence of screens the user navigates sequentially. We chose a lateral motion for these transitions. When proceeding forward, the next screen emerges from the right; moving backward, the screen reverts to its original position. We felt that sliding the next screen entirely from the right could be overly distracting. As a result, we decided to move and fade in the next page using 30% of the modal side.
''',
              )),
    );
  }

  SliverWoltModalSheetPage page2(BuildContext modalSheetContext, TextTheme textTheme) {
    return SliverWoltModalSheetPage(
      pageTitle: Padding(
        padding: const EdgeInsets.all(_pagePadding),
        child: Text(
          'Material Colors',
          style: textTheme.headlineMedium!.copyWith(fontWeight: FontWeight.bold),
        ),
      ),
      heroImage: Image(
        image: NetworkImage(
          'https://raw.githubusercontent.com/woltapp/wolt_modal_sheet/main/example/lib/assets/images/material_colors_hero${_isLightTheme ? '_light' : '_dark'}.png',
        ),
        fit: BoxFit.cover,
      ),
      leadingNavBarWidget: IconButton(
        padding: const EdgeInsets.all(_pagePadding),
        icon: const Icon(Icons.arrow_back_rounded),
        onPressed: WoltModalSheet.of(modalSheetContext).showPrevious,
      ),
      trailingNavBarWidget: IconButton(
        padding: const EdgeInsets.all(_pagePadding),
        icon: const Icon(Icons.close),
        onPressed: Navigator.of(modalSheetContext).pop,
      ),
      mainContentSliversBuilder: (context) => [
        SliverGrid(