Revolutionize Your Flutter Modal Sheet Experience with WoltModalSheet

WoltModalSheet is a game-changer for Flutter developers, introducing a visually striking and user-friendly modal sheet component. Designed with Wolt-grade quality and extensively used in Wolt products, this innovative UI component offers a multi-page layout, motion animation for seamless page transitions, and scrollable content within each page.

Unleash the Power of Multi-Page Navigation

Traverse multiple pages within a single sheet, allowing for a smooth and intuitive user flow.

SliverWoltModalSheetPage page1(BuildContext modalSheetContext) {
  return WoltModalSheetPage(
    mainContentSlivers: [
      SliverGrid(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 10.0,
          childAspectRatio: 2.0,
        ),
        delegate: SliverChildBuilderDelegate(
          (_, index) => ColorTile(color: materialColorsInGrid[index]),
          childCount: materialColorsInGrid.length,
        ),
      ),
      ...materialColorsInSpinner.map((e) => Shifter(child: ColorTile(color: e))).toList(),
    ],
  );
}

Embrace Scrollable Content for Enhanced Flexibility

Enjoy the freedom to create modal sheets with scrollable content per page, accommodating large amounts of data effortlessly.

SliverWoltModalSheetPage page2(BuildContext modalSheetContext) {
  return SliverWoltModalSheetPage(
    mainContentSlivers: [
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (_, index) => ColorTile(color: materialColorsInSliverList[index]),
          childCount: materialColorsInSliverList.length,
        ),
      ),
    ],
  );
}

Adaptive Design for All Screen Sizes

WoltModalSheet adjusts seamlessly to fit various screen sizes, appearing as a dialog on larger screens and a bottom sheet on smaller screens, guided by user-specified conditions.

WoltModalType modalTypeBuilder(BuildContext context) {
  final size = MediaQuery.of(context).size.width;
  if (size < _pageBreakpoint) {
    return WoltModalType.bottomSheet;
  } else {
    return WoltModalType.dialog;
  }
}

Engage Users with Motion Animation

Captivate users with dynamic motion animation for page transitions and scrolling, enhancing the overall user experience.

WoltModalSheetThemeData(
  animationStyle: WoltModalSheetAnimationStyle(
    paginationAnimationStyle: WoltModalSheetPaginationAnimationStyle(
      mainContentIncomingOpacityCurve: const Interval(
        150 / 350,
        350 / 350,
        curve: Curves.linear,
      ),
      modalSheetHeightTransitionCurve: const Interval(
        0 / 350,
        300 / 350,
        curve: Curves.fastOutSlowIn,
      ),
      incomingSabOpacityCurve: const Interval(
        100 / 350,
        300 / 350,
        curve: Curves.linear,
      ),
    ),
    scrollAnimationStyle: WoltModalSheetScrollAnimationStyle(
      heroImageScaleStart: 1.0,
      heroImageScaleEnd: 0.9,
      topBarTitleTranslationYInPixels: 8.0,
      topBarTranslationYInPixels: 4.0,
    ),
  ),
);

Imperative and Declarative Navigation for Flexibility

Showcase modal sheets on screen using either imperative or declarative navigation patterns, catering to diverse development needs.

// Imperative
WoltModalSheet.show(
  context: context,
  pageListBuilder: (modalSheetContext) {
    final textTheme = Theme.of(context).textTheme;
    return [page1(modalSheetContext, textTheme), page2(modalSheetContext, textTheme)];
  },
  modalTypeBuilder: (context) {
    final size = MediaQuery.of(context).size.width;
    if (size < _pageBreakpoint) {
      return WoltModalType.bottomSheet;
    } else {
      return WoltModalType.dialog;
    }
  },
);

// Declarative
Navigator.of(context).push(
  WoltModalSheetRoute(
    pageListBuilder: (modalSheetContext) {
      final textTheme = Theme.of(context).textTheme;
      return [page1(modalSheetContext, textTheme), page2(modalSheetContext, textTheme)];
    },
  ),
);

Dynamic Pagination for User-Driven Navigation

Enable user input to shape the modal sheet's page list, creating a dynamic and responsive interface.

WoltModalSheet.show(
  context: context,
  pageListBuilderNotifier: AddWaterModalPageBuilder.build(
    coffeeOrderId: coffeeOrderId,
    goToPreviousPage: () => pageIndexNotifier.value = pageIndexNotifier.value - 1,
    goToNextPage: () => pageIndexNotifier.value = pageIndexNotifier.value + 1,
  ),
);

State Management with Page Components

Provide each page component with an instance of WoltModalSheetPage class, allowing for flexible state management using popular libraries such as Bloc and Provider.

class DynamicPaginationPage extends WoltModalSheetPage {
  DynamicPaginationPage({
    required this.pageIndexNotifier,
  });

  final ValueNotifier pageIndexNotifier;

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: pageIndexNotifier,
      builder: (context, pageIndex, child) {
        return pageListBuilder[pageIndex](context);
      },
    );
  }
}

Conclusion

WoltModalSheet is designed to provide a seamless and intuitive modal sheet experience for Flutter developers. With its multi-page layout, scrollable content, responsive design, motion animation, and flexible navigation options, it empowers you to elevate your Flutter applications with a user interface that delights users. Embrace WoltModalSheet today and take your modal sheet design to the next level.