Merge pull request #306 from woltapp/show-bottom-padding-example-in-e…

…xample-app [Example app] Add sliver padding to bottom to demonstrate how to show the area behind the sticky action bar
woltapp · Aug 17, 2024 · 9df72ed · 9df72ed
2 parents fed3802 + e2bed74
commit 9df72ed
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -285,7 +285,7 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
 
   return MaterialApp(
     themeMode: _isLightTheme ? ThemeMode.light : ThemeMode.dark,
-    theme: ThemeData.light(useMaterial3: true).copyWith(
+    theme: ThemeData.light().copyWith(
       extensions: const <ThemeExtension>[
         WoltModalSheetThemeData(
           heroImageHeight: _heroImageHeight,
@@ -295,7 +295,7 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
         ),
       ],
     ),
-    darkTheme: ThemeData.dark(useMaterial3: true).copyWith(
+    darkTheme: ThemeData.dark().copyWith(
       extensions: const <ThemeExtension>[
         WoltModalSheetThemeData(
           topBarShadowColor: _darkThemeShadowColor,

diff --git a/demo_ui_components/lib/src/theme_data/app_theme_data.dart b/demo_ui_components/lib/src/theme_data/app_theme_data.dart
@@ -25,7 +25,6 @@ class AppThemeData {
       cardTheme: _cardThemeData,
       outlinedButtonTheme: _outlinedButtonThemeData(textTheme),
       navigationBarTheme: _navigationBarThemeData(textTheme),
-      useMaterial3: true,
       colorScheme: colorScheme,
     );
   }

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -106,6 +106,17 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
           icon: const Icon(Icons.close),
           onPressed: Navigator.of(modalSheetContext).pop,
         ),
+        stickyActionBar: Padding(
+          padding: const EdgeInsets.all(_pagePadding),
+          child: ElevatedButton(
+            onPressed: Navigator.of(modalSheetContext).pop,
+            child: const SizedBox(
+              height: _buttonHeight,
+              width: double.infinity,
+              child: Center(child: Text('Close')),
+            ),
+          ),
+        ),
         mainContentSliversBuilder: (context) => [
           SliverGrid(
             gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
@@ -125,13 +136,25 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
               childCount: materialColorsInSliverList.length,
             ),
           ),
+          const SliverPadding(
+            padding: EdgeInsets.only(bottom: _bottomPaddingForButton),
+            sliver: SliverToBoxAdapter(
+              child: Padding(
+                padding: EdgeInsets.all(_pagePadding),
+                child: Text(
+                  'Last Item',
+                  textAlign: TextAlign.center,
+                ),
+              ),
+            ),
+          ),
         ],
       );
     }
 
     return MaterialApp(
       themeMode: _isLightTheme ? ThemeMode.light : ThemeMode.dark,
-      theme: ThemeData.light(useMaterial3: true).copyWith(
+      theme: ThemeData.light().copyWith(
         extensions: const <ThemeExtension>[
           WoltModalSheetThemeData(
             heroImageHeight: _heroImageHeight,
@@ -141,7 +164,7 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
           ),
         ],
       ),
-      darkTheme: ThemeData.dark(useMaterial3: true).copyWith(
+      darkTheme: ThemeData.dark().copyWith(
         extensions: const <ThemeExtension>[
           WoltModalSheetThemeData(
             topBarShadowColor: _darkThemeShadowColor,

diff --git a/playground/lib/main.dart b/playground/lib/main.dart
@@ -69,7 +69,6 @@ class _DemoAppState extends State<DemoApp> {
       theme: ThemeData.light().copyWith(
         brightness: Brightness.light,
         inputDecorationTheme: inputDecorationTheme,
-        useMaterial3: true,
         colorScheme: ColorScheme.fromSeed(seedColor: WoltColors.blue),
         extensions: const <ThemeExtension>[
           WoltModalSheetThemeData(
@@ -78,11 +77,10 @@ class _DemoAppState extends State<DemoApp> {
           ),
         ],
       ),
-      darkTheme: ThemeData.dark(useMaterial3: true).copyWith(
+      darkTheme: ThemeData.dark().copyWith(
         brightness: Brightness.dark,
         inputDecorationTheme: inputDecorationTheme,
         colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF009DE0)),
-        useMaterial3: true,
         extensions: const <ThemeExtension>[
           WoltModalSheetThemeData(
             backgroundColor: Color(0xFF242424),

diff --git a/playground_navigator2/lib/main.dart b/playground_navigator2/lib/main.dart
@@ -72,7 +72,6 @@ class _DemoAppState extends State<DemoApp> {
             focusColor: WoltColors.blue,
           ),
           primaryColor: WoltColors.blue,
-          useMaterial3: true,
           fontFamily: 'Inter',
           textTheme: TextTheme(
             headlineMedium: TextStyle(