Use navigation toolbar for navigation controls and title

woltapp · Aug 6, 2023 · 8120fc1 · 8120fc1
1 parent 9042e56
commit 8120fc1
Show file tree

Hide file tree

Showing 40 changed files with 1,459 additions and 380 deletions.
diff --git a/README.md b/README.md
diff --git a/coffee_maker/lib/home/online/modal_pages/add_water/add_water_description_modal_page.dart b/coffee_maker/lib/home/online/modal_pages/add_water/add_water_description_modal_page.dart
@@ -36,7 +36,7 @@ class AddWaterDescriptionModalPage {
         'Adding water for coffee',
         textAlign: TextAlign.center,
       ),
-      closeButton: WoltModalSheetCloseButton(onClosed: onClosed),
+      trailingNavBarWidget: WoltModalSheetCloseButton(onClosed: onClosed),
       child: const Padding(
         padding: EdgeInsets.only(bottom: (2 * WoltElevatedButton.height) + 8),
         child: ModalSheetContentText(

diff --git a/coffee_maker/lib/home/online/modal_pages/add_water/water_settings_modal_page.dart b/coffee_maker/lib/home/online/modal_pages/add_water/water_settings_modal_page.dart
@@ -29,8 +29,8 @@ class WaterSettingsModalPage {
         },
       ),
       pageTitle: const ModalSheetTitle(pageTitle),
-      closeButton: WoltModalSheetCloseButton(onClosed: onClosed),
-      backButton: WoltModalSheetBackButton(onBackPressed: onBackButtonPressed),
+      trailingNavBarWidget: WoltModalSheetCloseButton(onClosed: onClosed),
+      leadingNavBarWidget: WoltModalSheetBackButton(onBackPressed: onBackButtonPressed),
       child: Padding(
         padding: const EdgeInsets.only(bottom: 120),
         child: Column(

diff --git a/coffee_maker/lib/home/online/modal_pages/grind/grind_or_reject_modal_page.dart b/coffee_maker/lib/home/online/modal_pages/grind/grind_or_reject_modal_page.dart
@@ -33,7 +33,7 @@ class GrindOrRejectModalPage {
         'Are you ready to prepare order $coffeeOrderId?',
         textAlign: TextAlign.center,
       ),
-      closeButton: WoltModalSheetCloseButton(onClosed: onClosed),
+      trailingNavBarWidget: WoltModalSheetCloseButton(onClosed: onClosed),
       child: const Padding(
         padding: EdgeInsets.only(bottom: (2 * WoltElevatedButton.height) + 48),
         child: ModalSheetContentText('Accept the order to proceed to grinding'),

diff --git a/coffee_maker/lib/home/online/modal_pages/grind/reject_order_modal_page.dart b/coffee_maker/lib/home/online/modal_pages/grind/reject_order_modal_page.dart
@@ -29,8 +29,8 @@ class RejectOrderModalPage {
         },
       ),
       pageTitle: const ModalSheetTitle('Reject order'),
-      closeButton: WoltModalSheetCloseButton(onClosed: onClosed),
-      backButton: WoltModalSheetBackButton(onBackPressed: onBackButtonPressed),
+      trailingNavBarWidget: WoltModalSheetCloseButton(onClosed: onClosed),
+      leadingNavBarWidget: WoltModalSheetBackButton(onBackPressed: onBackButtonPressed),
       child: Padding(
         padding: const EdgeInsets.only(bottom: 120),
         child: Column(

diff --git a/coffee_maker/lib/home/online/modal_pages/ready/offer_recommendation_modal_page.dart b/coffee_maker/lib/home/online/modal_pages/ready/offer_recommendation_modal_page.dart
@@ -41,8 +41,8 @@ class OfferRecommendationModalPage {
       ),
       topBarTitle: const ModalSheetTopBarTitle(pageTitle),
       pageTitle: const ModalSheetTitle(pageTitle),
-      closeButton: WoltModalSheetCloseButton(onClosed: onClosed),
-      backButton: WoltModalSheetBackButton(onBackPressed: onBackButtonPressed),
+      trailingNavBarWidget: WoltModalSheetCloseButton(onClosed: onClosed),
+      leadingNavBarWidget: WoltModalSheetBackButton(onBackPressed: onBackButtonPressed),
       sliverList: SliverList(
         delegate: SliverChildBuilderDelegate(
           (_, index) {

diff --git a/coffee_maker/lib/home/online/modal_pages/ready/serve_or_offer_modal_page.dart b/coffee_maker/lib/home/online/modal_pages/ready/serve_or_offer_modal_page.dart
@@ -33,7 +33,7 @@ class ServeOrOfferModalPage {
         ),
       ),
       pageTitle: const ModalSheetTitle('The coffee is ready!'),
-      closeButton: WoltModalSheetCloseButton(onClosed: onClosed),
+      trailingNavBarWidget: WoltModalSheetCloseButton(onClosed: onClosed),
       child: const Padding(
         padding: EdgeInsets.only(bottom: (2 * WoltElevatedButton.height) + 24),
         child: ModalSheetContentText(

diff --git a/demo_ui_components/lib/src/button/wolt_modal_sheet_back_button.dart b/demo_ui_components/lib/src/button/wolt_modal_sheet_back_button.dart
@@ -9,7 +9,7 @@ class WoltModalSheetBackButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsetsDirectional.only(start: 16, top: 16),
+      padding: const EdgeInsetsDirectional.only(start: 16),
       child: WoltCircularElevatedButton(onPressed: onBackPressed, icon: Icons.arrow_back_rounded),
     );
   }

diff --git a/demo_ui_components/lib/src/button/wolt_modal_sheet_close_button.dart b/demo_ui_components/lib/src/button/wolt_modal_sheet_close_button.dart
@@ -9,7 +9,7 @@ class WoltModalSheetCloseButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsetsDirectional.only(end: 16, top: 16),
+      padding: const EdgeInsetsDirectional.only(end: 16),
       child: WoltCircularElevatedButton(
         onPressed: onClosed ?? Navigator.of(context).pop,
         icon: Icons.close,

diff --git a/doc/bottom_sheet_elements.jpeg b/doc/bottom_sheet_elements.jpeg
diff --git a/doc/bottom_sheet_elements.webp b/doc/bottom_sheet_elements.webp
diff --git a/doc/bottom_sheet_example.jpeg b/doc/bottom_sheet_example.jpeg
diff --git a/doc/bottom_sheet_example.webp b/doc/bottom_sheet_example.webp
diff --git a/doc/example_app.gif b/doc/example_app.gif
diff --git a/doc/modal_sheet_page.png b/doc/modal_sheet_page.png
diff --git a/doc/ss_onboarding.gif b/doc/ss_onboarding.gif
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -33,19 +33,16 @@ class MainApp extends StatelessWidget {
             ],
           ),
         ),
-        pageTitle: const ModalSheetTitle('Pagination'),
+        isTopBarLayerAlwaysVisible: true,
         topBarTitle: const ModalSheetTopBarTitle('Pagination'),
-        closeButton: WoltModalSheetCloseButton(onClosed: Navigator.of(modalSheetContext).pop),
-        mainContentPadding: const EdgeInsetsDirectional.all(16),
+        trailingNavBarWidget:
+            WoltModalSheetCloseButton(onClosed: Navigator.of(modalSheetContext).pop),
         child: const Padding(
-            padding: EdgeInsets.only(bottom: 120, top: 16),
-            child: Padding(
-              padding: EdgeInsets.only(bottom: 16),
-              child: Text(
-                '''
+            padding: EdgeInsets.only(bottom: 120),
+            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.
 ''',
-              ),
             )),
       );
     }
@@ -75,11 +72,10 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
           image: AssetImage('lib/assets/images/material_colors_hero.png'),
           fit: BoxFit.cover,
         ),
-        topBarTitle: const ModalSheetTopBarTitle('Material Colors'),
-        backButton: WoltModalSheetBackButton(onBackPressed: () {
+        leadingNavBarWidget: WoltModalSheetBackButton(onBackPressed: () {
           pageIndexNotifier.value = pageIndexNotifier.value - 1;
         }),
-        closeButton: WoltModalSheetCloseButton(onClosed: () {
+        trailingNavBarWidget: WoltModalSheetCloseButton(onClosed: () {
           Navigator.of(modalSheetContext).pop();
           pageIndexNotifier.value = 0;
         }),
@@ -120,6 +116,7 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
                       },
                       onModalDismissedWithBarrierTap: () {
                         debugPrint('Closed modal sheet with barrier tap');
+                        Navigator.of(context).pop();
                         pageIndexNotifier.value = 0;
                       },
                       maxDialogWidth: 560,

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -0,0 +1,211 @@
+# Generated by pub
+# See https://dart.dev/tools/pub/glossary#lockfile
+packages:
+  async:
+    dependency: transitive
+    description:
+      name: async
+      sha256: "947bfcf187f74dbc5e146c9eb9c0f10c9f8b30743e341481c1e2ed3ecc18c20c"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.11.0"
+  boolean_selector:
+    dependency: transitive
+    description:
+      name: boolean_selector
+      sha256: "6cfb5af12253eaf2b368f07bacc5a80d1301a071c73360d746b7f2e32d762c66"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.1"
+  characters:
+    dependency: transitive
+    description:
+      name: characters
+      sha256: "04a925763edad70e8443c99234dc3328f442e811f1d8fd1a72f1c8ad0f69a605"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.0"
+  clock:
+    dependency: transitive
+    description:
+      name: clock
+      sha256: cb6d7f03e1de671e34607e909a7213e31d7752be4fb66a86d29fe1eb14bfb5cf
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
+  collection:
+    dependency: transitive
+    description:
+      name: collection
+      sha256: "4a07be6cb69c84d677a6c3096fcf960cc3285a8330b4603e0d463d15d9bd934c"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.17.1"
+  demo_ui_components:
+    dependency: "direct dev"
+    description:
+      path: "../demo_ui_components"
+      relative: true
+    source: path
+    version: "0.0.0"
+  equatable:
+    dependency: transitive
+    description:
+      name: equatable
+      sha256: c2b87cb7756efdf69892005af546c56c0b5037f54d2a88269b4f347a505e3ca2
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.5"
+  fake_async:
+    dependency: transitive
+    description:
+      name: fake_async
+      sha256: "511392330127add0b769b75a987850d136345d9227c6b94c96a04cf4a391bf78"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.1"
+  flutter:
+    dependency: "direct main"
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  flutter_lints:
+    dependency: "direct dev"
+    description:
+      name: flutter_lints
+      sha256: "2118df84ef0c3ca93f96123a616ae8540879991b8b57af2f81b76a7ada49b2a4"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.2"
+  flutter_test:
+    dependency: "direct dev"
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  js:
+    dependency: transitive
+    description:
+      name: js
+      sha256: f2c445dce49627136094980615a031419f7f3eb393237e4ecd97ac15dea343f3
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.6.7"
+  lints:
+    dependency: transitive
+    description:
+      name: lints
+      sha256: "0a217c6c989d21039f1498c3ed9f3ed71b354e69873f13a8dfc3c9fe76f1b452"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.1"
+  matcher:
+    dependency: transitive
+    description:
+      name: matcher
+      sha256: "6501fbd55da300384b768785b83e5ce66991266cec21af89ab9ae7f5ce1c4cbb"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.12.15"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      sha256: d92141dc6fe1dad30722f9aa826c7fbc896d021d792f80678280601aff8cf724
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.2.0"
+  meta:
+    dependency: transitive
+    description:
+      name: meta
+      sha256: "3c74dbf8763d36539f114c799d8a2d87343b5067e9d796ca22b5eb8437090ee3"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.9.1"
+  path:
+    dependency: transitive
+    description:
+      name: path
+      sha256: "8829d8a55c13fc0e37127c29fedf290c102f4e40ae94ada574091fe0ff96c917"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.8.3"
+  sky_engine:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.99"
+  source_span:
+    dependency: transitive
+    description:
+      name: source_span
+      sha256: dd904f795d4b4f3b870833847c461801f6750a9fa8e61ea5ac53f9422b31f250
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.9.1"
+  stack_trace:
+    dependency: transitive
+    description:
+      name: stack_trace
+      sha256: c3c7d8edb15bee7f0f74debd4b9c5f3c2ea86766fe4178eb2a18eb30a0bdaed5
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.11.0"
+  stream_channel:
+    dependency: transitive
+    description:
+      name: stream_channel
+      sha256: "83615bee9045c1d322bbbd1ba209b7a749c2cbcdcb3fdd1df8eb488b3279c1c8"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.1"
+  string_scanner:
+    dependency: transitive
+    description:
+      name: string_scanner
+      sha256: "556692adab6cfa87322a115640c11f13cb77b3f076ddcc5d6ae3c20242bedcde"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.0"
+  term_glyph:
+    dependency: transitive
+    description:
+      name: term_glyph
+      sha256: a29248a84fbb7c79282b40b8c72a1209db169a2e0542bce341da992fe1bc7e84
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.1"
+  test_api:
+    dependency: transitive
+    description:
+      name: test_api
+      sha256: eb6ac1540b26de412b3403a163d919ba86f6a973fe6cc50ae3541b80092fdcfb
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.5.1"
+  vector_math:
+    dependency: transitive
+    description:
+      name: vector_math
+      sha256: "80b3257d1492ce4d091729e3a67a60407d227c27241d6927be0130c98e741803"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.4"
+  wolt_modal_sheet:
+    dependency: "direct dev"
+    description:
+      path: ".."
+      relative: true
+    source: path
+    version: "0.0.4"
+  wolt_responsive_layout_grid:
+    dependency: "direct dev"
+    description:
+      name: wolt_responsive_layout_grid
+      sha256: bfcc215af79e7afc5e6370c1a242662a1f80e1144ac3f364bc650cdce65c6e66
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.0.3"
+sdks:
+  dart: ">=3.0.0 <4.0.0"
+  flutter: ">=3.7.2"
diff --git a/...nt_top_bar_controls_animated_builder.dart → ..._navigation_toolbar_animated_builder.dart b/...nt_top_bar_controls_animated_builder.dart → ..._navigation_toolbar_animated_builder.dart
@@ -1,11 +1,11 @@
 import 'package:flutter/material.dart';
 
-class CurrentTopBarControlsAnimatedBuilder extends StatelessWidget {
+class CurrentNavigationToolbarAnimatedBuilder extends StatelessWidget {
   final AnimationController controller;
   final Animation<double> _opacity;
   final Widget child;
 
-  CurrentTopBarControlsAnimatedBuilder({
+  CurrentNavigationToolbarAnimatedBuilder({
     required this.controller,
     required this.child,
     super.key,