Add theme extensions for wolt modal sheet

example/lib/main.dart

@@ -10,10 +10,19 @@ const double _buttonHeight = 56.0;
 const double _pagePadding = 16.0;
 const double _pageBreakpoint = 768.0;
 const double _heroImageHeight = 200.0;
+const Color _lightThemeShadowColor = Color(0xFFE4E4E4);
+const Color _darkThemeShadowColor = Color(0xFF121212);
 
-class MainApp extends StatelessWidget {
+class MainApp extends StatefulWidget {
   const MainApp({super.key});
 
+  @override
+  State<MainApp> createState() => _MainAppState();
+}
+
+class _MainAppState extends State<MainApp> {
+  bool _isLightTheme = true;
+
   @override
   Widget build(BuildContext context) {
     final pageIndexNotifier = ValueNotifier(0);
@@ -89,9 +98,10 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
             style: textTheme.headlineMedium!.copyWith(fontWeight: FontWeight.bold),
           ),
         ),
-        heroImageHeight: _heroImageHeight,
-        heroImage: const Image(
-          image: AssetImage('lib/assets/images/material_colors_hero.png'),
+        heroImage: Image(
+          image: AssetImage(
+            'lib/assets/images/material_colors_hero${_isLightTheme ? '' : '_dark'}.png',
+          ),
           fit: BoxFit.cover,
         ),
         leadingNavBarWidget: IconButton(
@@ -117,14 +127,52 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
     }
 
     return MaterialApp(
-      theme: ThemeData(colorSchemeSeed: const Color(0xFF009DE0), useMaterial3: true),
+      themeMode: _isLightTheme ? ThemeMode.light : ThemeMode.dark,
+      theme: ThemeData.light(useMaterial3: true).copyWith(
+        extensions: const <ThemeExtension>[
+          WoltModalSheetThemeData(
+            heroImageHeight: _heroImageHeight,
+            topBarShadowColor: _lightThemeShadowColor,
+            modalBarrierColor: Colors.black54,
+          ),
+        ],
+      ),
+      darkTheme: ThemeData.dark(useMaterial3: true).copyWith(
+        extensions: const <ThemeExtension>[
+          WoltModalSheetThemeData(
+            heroImageHeight: _heroImageHeight,
+            topBarShadowColor: _darkThemeShadowColor,
+            modalBarrierColor: Colors.white12,
+            dialogShape: BeveledRectangleBorder(),
+            bottomSheetShape: BeveledRectangleBorder(),
+          ),
+        ],
+      ),
       home: Scaffold(
         body: Builder(
           builder: (context) {
-            return Center(
-              child: SizedBox(
-                width: _heroImageHeight,
-                child: ElevatedButton(
+            return Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    const Text('Light Theme'),
+                    Padding(
+                      padding: const EdgeInsets.all(16.0),
+                      child: Switch(
+                        value: !_isLightTheme,
+                        onChanged: (value) {
+                          setState(() {
+                            _isLightTheme = !_isLightTheme;
+                          });
+                        },
+                      ),
+                    ),
+                    const Text('Dark Theme'),
+                  ],
+                ),
+                ElevatedButton(
                   onPressed: () {
                     WoltModalSheet.show<void>(
                       pageIndexNotifier: pageIndexNotifier,
@@ -156,11 +204,12 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
                     );
                   },
                   child: const SizedBox(
+                    width: 200,
                     height: _buttonHeight,
                     child: Center(child: Text('Show Modal Sheet')),
                   ),
                 ),
-              ),
+              ],
             );
           },
         ),

lib/src/content/components/main_content/wolt_modal_sheet_main_content.dart

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:wolt_modal_sheet/src/content/components/main_content/wolt_modal_sheet_hero_image.dart';
 import 'package:wolt_modal_sheet/src/modal_page/wolt_modal_sheet_page.dart';
 import 'package:wolt_modal_sheet/src/modal_type/wolt_modal_type.dart';
+import 'package:wolt_modal_sheet/src/theme/wolt_modal_sheet_default_theme_data.dart';
+import 'package:wolt_modal_sheet/wolt_modal_sheet.dart';
 
 /// The main content widget within the scrollable modal sheet.
 ///
@@ -37,10 +39,19 @@ class _WoltModalSheetMainContentState extends State<WoltModalSheetMainContent> {
 
   @override
   Widget build(BuildContext context) {
+    final themeData = Theme.of(context).extension<WoltModalSheetThemeData>();
+    final defaultThemeData = WoltModalSheetDefaultThemeData(context);
     final page = widget.page;
-    final heroImageHeight = page.heroImage == null ? 0.0 : (widget.page.heroImageHeight ?? 0.0);
-    final pageHasTopBarLayer = page.hasTopBarLayer;
-    final navigationBarHeight = page.navigationBarHeight;
+    final heroImageHeight = page.heroImage == null
+        ? 0.0
+        : (widget.page.heroImageHeight ??
+            themeData?.heroImageHeight ??
+            defaultThemeData.heroImageHeight);
+    final pageHasTopBarLayer =
+        page.hasTopBarLayer ?? themeData?.hasTopBarLayer ?? defaultThemeData.hasTopBarLayer;
+    final navigationBarHeight = page.navigationBarHeight ??
+        themeData?.navigationBarHeight ??
+        defaultThemeData.navigationBarHeight;
     final topBarHeight =
         pageHasTopBarLayer || page.leadingNavBarWidget != null || page.trailingNavBarWidget != null
             ? navigationBarHeight

lib/src/content/components/main_content/wolt_modal_sheet_top_bar.dart

@@ -1,34 +1,37 @@
 import 'package:flutter/material.dart';
-import 'package:wolt_modal_sheet/src/modal_page/wolt_modal_sheet_page.dart';
+import 'package:wolt_modal_sheet/src/theme/wolt_modal_sheet_default_theme_data.dart';
+import 'package:wolt_modal_sheet/wolt_modal_sheet.dart';
 
 class WoltModalSheetTopBar extends StatelessWidget {
   final WoltModalSheetPage page;
 
   const WoltModalSheetTopBar({required this.page, Key? key}) : super(key: key);
 
-  // TODO: get this information from ThemeData extensions
-  /// Constant elevation value that gives the top bar a raised appearance.
-  static const _elevation = 1.0;
-
-  // TODO: get this information from ThemeData extensions
-  /// The color for the elevation effect, typically a shade that contrasts with `topBarColor`.
-  static const _shadowColor = Color(0xFFE4E4E4);
-
   @override
   Widget build(BuildContext context) {
-    final topBarHeight = page.navigationBarHeight;
-    final backgroundColor = page.backgroundColor;
-
+    final theme = Theme.of(context);
+    final themeData = theme.extension<WoltModalSheetThemeData>();
+    final defaultThemeData = WoltModalSheetDefaultThemeData(context);
+    final elevation = themeData?.topBarElevation ?? defaultThemeData.topBarElevation;
+    final shadowColor = themeData?.topBarShadowColor ??
+        (theme.brightness == Brightness.light ? const Color(0xFFE4E4E4) : const Color(0xFF121212));
+    final topBarHeight = page.navigationBarHeight ??
+        themeData?.navigationBarHeight ??
+        defaultThemeData.navigationBarHeight;
+    final backgroundColor =
+        page.backgroundColor ?? themeData?.backgroundColor ?? defaultThemeData.backgroundColor;
+    final surfaceTintColor = themeData?.surfaceTintColor ?? defaultThemeData.surfaceTintColor;
     return Column(
       children: [
         Material(
           type: MaterialType.canvas,
           color: backgroundColor,
-          shadowColor: _shadowColor,
-          elevation: _elevation,
-          child: SizedBox(height: topBarHeight - _elevation, width: double.infinity),
+          surfaceTintColor: surfaceTintColor,
+          shadowColor: shadowColor,
+          elevation: elevation,
+          child: SizedBox(height: topBarHeight - elevation, width: double.infinity),
         ),
-        const SizedBox(height: _elevation),
+        SizedBox(height: elevation),
       ],
     );
   }

lib/src/content/components/main_content/wolt_modal_sheet_top_bar_flow.dart

@@ -1,8 +1,9 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:wolt_modal_sheet/src/content/components/main_content/wolt_modal_sheet_top_bar.dart';
-import 'package:wolt_modal_sheet/src/modal_page/wolt_modal_sheet_page.dart';
+import 'package:wolt_modal_sheet/src/theme/wolt_modal_sheet_default_theme_data.dart';
 import 'package:wolt_modal_sheet/src/utils/wolt_layout_transformation_utils.dart';
+import 'package:wolt_modal_sheet/wolt_modal_sheet.dart';
 
 /// `WoltModalSheetTopBarFlow` controls the top bar behavior within the modal sheet page
 /// provided by the [WoltModalSheetPage] when `isTopBarLayerAlwaysVisible` is set to true.
@@ -27,8 +28,14 @@ class WoltModalSheetTopBarFlow extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final topBarHeight = page.navigationBarHeight;
-    final heroImageHeight = page.heroImage == null ? 0.0 : (page.heroImageHeight ?? 0.0);
+    final themeData = Theme.of(context).extension<WoltModalSheetThemeData>();
+    final defaultThemeData = WoltModalSheetDefaultThemeData(context);
+    final topBarHeight = page.navigationBarHeight ??
+        themeData?.navigationBarHeight ??
+        defaultThemeData.navigationBarHeight;
+    final heroImageHeight = page.heroImage == null
+        ? 0.0
+        : (page.heroImageHeight ?? themeData?.heroImageHeight ?? defaultThemeData.heroImageHeight);
 
     return Flow(
       delegate: _TopBarFlowDelegate(

lib/src/content/components/main_content/wolt_modal_sheet_top_bar_title_flow.dart

@@ -1,7 +1,9 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:wolt_modal_sheet/src/modal_page/wolt_modal_sheet_page.dart';
+import 'package:wolt_modal_sheet/src/theme/wolt_modal_sheet_default_theme_data.dart';
 import 'package:wolt_modal_sheet/src/utils/wolt_layout_transformation_utils.dart';
+import 'package:wolt_modal_sheet/wolt_modal_sheet.dart';
 
 /// This class represents the top bar title behavior within a modal sheet page.
 class WoltModalSheetTopBarTitleFlow extends StatelessWidget {
@@ -22,9 +24,14 @@ class WoltModalSheetTopBarTitleFlow extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final topBarHeight = page.navigationBarHeight;
-    final heroImageHeight = page.heroImage == null ? 0.0 : (page.heroImageHeight ?? 0.0);
-
+    final themeData = Theme.of(context).extension<WoltModalSheetThemeData>();
+    final defaultThemeData = WoltModalSheetDefaultThemeData(context);
+    final topBarHeight = page.navigationBarHeight ??
+        themeData?.navigationBarHeight ??
+        defaultThemeData.navigationBarHeight;
+    final heroImageHeight = page.heroImage == null
+        ? 0.0
+        : (page.heroImageHeight ?? themeData?.heroImageHeight ?? defaultThemeData.heroImageHeight);
     return Flow(
       delegate: _TopBarTitleFlowDelegate(
         topBarHeight: topBarHeight,

lib/src/content/wolt_modal_sheet_animated_switcher.dart

@@ -8,6 +8,7 @@ import 'package:wolt_modal_sheet/src/content/components/main_content/wolt_modal_
 import 'package:wolt_modal_sheet/src/content/components/outgoing/outgoing_navigation_toolbar_animated_builder.dart';
 import 'package:wolt_modal_sheet/src/content/components/paginating_group/paginating_widgets_group.dart';
 import 'package:wolt_modal_sheet/src/content/wolt_modal_sheet_layout.dart';
+import 'package:wolt_modal_sheet/src/theme/wolt_modal_sheet_default_theme_data.dart';
 import 'package:wolt_modal_sheet/src/widgets/wolt_navigation_toolbar.dart';
 import 'package:wolt_modal_sheet/src/widgets/wolt_sticky_action_bar_wrapper.dart';
 import 'package:wolt_modal_sheet/wolt_modal_sheet.dart';
@@ -42,7 +43,11 @@ class _WoltModalSheetAnimatedSwitcherState extends State<WoltModalSheetAnimatedS
 
   WoltModalSheetPage get _page => widget.pages[_pageIndex];
 
-  bool get _hasTopBarLayer => _page.hasTopBarLayer;
+  bool get _hasTopBarLayer {
+    final themeData = Theme.of(context).extension<WoltModalSheetThemeData>();
+    final defaultThemeData = WoltModalSheetDefaultThemeData(context);
+    return _page.hasTopBarLayer ?? themeData?.hasTopBarLayer ?? defaultThemeData.hasTopBarLayer;
+  }
 
   double get _topBarTranslationY => _hasTopBarLayer ? 4 : 0;
 
@@ -213,9 +218,16 @@ class _WoltModalSheetAnimatedSwitcherState extends State<WoltModalSheetAnimatedS
   }
 
   CurrentPageWidgets _createCurrentWidgets(AnimationController animationController) {
+    final themeData = Theme.of(context).extension<WoltModalSheetThemeData>();
+    final defaultThemeData = WoltModalSheetDefaultThemeData(context);
+    final hasTopBarLayer = _hasTopBarLayer;
+    final isTopBarLayerAlwaysVisible = _page.isTopBarLayerAlwaysVisible ??
+        themeData?.isTopBarLayerAlwaysVisible ??
+        defaultThemeData.isTopBarLayerAlwaysVisible;
     final topBarTitle = WoltModalSheetTopBarTitle(page: _page, pageTitleKey: _pageTitleKey);
-    final navigationBarHeight = _page.navigationBarHeight;
-    final isTopBarLayerAlwaysVisible = _page.isTopBarLayerAlwaysVisible;
+    final navigationBarHeight = _page.navigationBarHeight ??
+        themeData?.navigationBarHeight ??
+        defaultThemeData.navigationBarHeight;
     return CurrentPageWidgets(
       mainContentAnimatedBuilder: CurrentMainContentAnimatedBuilder(
         mainContent: _createMainContent(
@@ -231,7 +243,7 @@ class _WoltModalSheetAnimatedSwitcherState extends State<WoltModalSheetAnimatedS
       offstagedMainContent: _createMainContent(titleKey: _offstagedTitleKeys[_pageIndex]),
       topBarAnimatedBuilder: CurrentTopBarAnimatedBuilder(
         controller: animationController,
-        child: _page.hasTopBarLayer
+        child: hasTopBarLayer
             ? (isTopBarLayerAlwaysVisible
                 ? WoltModalSheetTopBar(page: _page)
                 : WoltModalSheetTopBarFlow(
@@ -249,7 +261,7 @@ class _WoltModalSheetAnimatedSwitcherState extends State<WoltModalSheetAnimatedS
           child: WoltNavigationToolbar(
             middleSpacing: 16.0,
             leading: _page.leadingNavBarWidget,
-            middle: _hasTopBarLayer
+            middle: hasTopBarLayer
                 ? (isTopBarLayerAlwaysVisible
                     ? Center(child: topBarTitle)
                     : WoltModalSheetTopBarTitleFlow(

lib/src/content/wolt_modal_sheet_layout.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:wolt_modal_sheet/src/content/components/paginating_group/paginating_widgets_group.dart';
-import 'package:wolt_modal_sheet/src/modal_page/wolt_modal_sheet_page.dart';
-import 'package:wolt_modal_sheet/src/modal_type/wolt_modal_type.dart';
+import 'package:wolt_modal_sheet/src/theme/wolt_modal_sheet_default_theme_data.dart';
 import 'package:wolt_modal_sheet/src/utils/drag_scroll_behavior.dart';
 import 'package:wolt_modal_sheet/src/widgets/wolt_bottom_sheet_drag_handle.dart';
+import 'package:wolt_modal_sheet/wolt_modal_sheet.dart';
 
 /// The layout for the Wolt Modal Sheet.
 class WoltModalSheetLayout extends StatelessWidget {
@@ -22,9 +22,17 @@ class WoltModalSheetLayout extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final hasTopBarLayer = page.hasTopBarLayer;
-    final topBarHeight = hasTopBarLayer ? page.navigationBarHeight : 0.0;
-    final shouldShowDragHandle = woltModalType == WoltModalType.bottomSheet;
+    final themeData = Theme.of(context).extension<WoltModalSheetThemeData>();
+    final defaultThemeData = WoltModalSheetDefaultThemeData(context);
+    final hasTopBarLayer =
+        page.hasTopBarLayer ?? themeData?.hasTopBarLayer ?? defaultThemeData.hasTopBarLayer;
+    final topBarHeight = hasTopBarLayer
+        ? (page.navigationBarHeight ??
+            themeData?.navigationBarHeight ??
+            defaultThemeData.navigationBarHeight)
+        : 0.0;
+    final showDragHandle = woltModalType == WoltModalType.bottomSheet &&
+        (themeData?.showDragHandle ?? defaultThemeData.showDragHandle);
     return ScrollConfiguration(
       behavior: const DragScrollBehavior(),
       child: Stack(
@@ -50,7 +58,7 @@ class WoltModalSheetLayout extends StatelessWidget {
             bottom: 0,
             child: paginatingWidgetsGroup.sabAnimatedBuilder,
           ),
-          if (shouldShowDragHandle)
+          if (showDragHandle)
             const Positioned(
               left: 0,
               right: 0,