Skip to content

Commit

Permalink
Merge pull request #34 from woltapp/use-basic-widgets-in-example-app
Browse files Browse the repository at this point in the history 
Remove all dependencies from the example app
  • Loading branch information
@ulusoyca
ulusoyca authored Aug 7, 2023
2 parents 73266be + 586a5da commit 362ae42
Show file tree
Hide file tree
Showing 6 changed files with 122 additions and 106 deletions.
109 changes: 65 additions & 44 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ are provided with an instance of WoltModalSheetPage class. The API provides a
way
to manage the state among the page components to be used with popular libraries
such as Bloc and Provider
</br>
</br>

## Understanding the page elements

Expand All @@ -82,17 +84,18 @@ specific properties.</li>
layer, this layer contains navigational widgets for the interface, such as
back or close buttons.</li>
</br>

![Modal sheet page layers](https://github.com/woltapp/wolt_modal_sheet/blob/main/doc/modal_sheet_page.png)
</br>

By employing these various layers, you can create an interactive and visually
appealing interface that resonates with users. Each layer contributes to the
overall coherence of the page, serving a specific purpose and enhancing the
overall user experience.
</br>
</br>

![Modal sheet elements breakdown](https://github.com/woltapp/wolt_modal_sheet/blob/main/doc/bottom_sheet_elements.jpeg)

![Modal sheet page layers](https://github.com/woltapp/wolt_modal_sheet/blob/main/doc/modal_sheet_page.jpeg)

### Navigation bar widgets

The navigation bar has a transparent background, and resides at the top of
Expand Down Expand Up @@ -170,30 +173,37 @@ class MainApp extends StatelessWidget {
WoltModalSheetPage page1(BuildContext modalSheetContext) {
return WoltModalSheetPage.withSingleChild(
stickyActionBar: StickyActionBarWrapper(
stickyActionBar: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
WoltElevatedButton(
ElevatedButton(
onPressed: () => Navigator.of(modalSheetContext).pop(),
theme: WoltElevatedButtonTheme.secondary,
child: const Text('Cancel'),
child: const SizedBox(
height: 56.0,
width: double.infinity,
child: Center(child: Text('Cancel')),
),
),
const SizedBox(height: 8),
WoltElevatedButton(
onPressed: () {
pageIndexNotifier.value = pageIndexNotifier.value + 1;
},
child: const Text('Next page'),
ElevatedButton(
onPressed: () => pageIndexNotifier.value = pageIndexNotifier.value + 1,
child: const SizedBox(
height: 56.0,
width: double.infinity,
child: Center(child: Text('Next page')),
),
),
],
),
),
isTopBarLayerAlwaysVisible: true,
topBarTitle: const ModalSheetTopBarTitle('Pagination'),
trailingNavBarWidget:
WoltModalSheetCloseButton(onClosed: Navigator
.of(modalSheetContext)
.pop),
topBarTitle: Text('Pagination', style: Theme.of(context).textTheme.titleSmall),
trailingNavBarWidget: IconButton(
padding: const EdgeInsets.all(16),
icon: const Icon(Icons.close),
onPressed: Navigator.of(modalSheetContext).pop,
),
child: const Padding(
padding: EdgeInsets.only(bottom: 120),
child: Text(
Expand All @@ -207,35 +217,45 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
WoltModalSheetPage page2(BuildContext modalSheetContext) {
return WoltModalSheetPage.withCustomSliverList(
mainContentPadding: EdgeInsetsDirectional.zero,
stickyActionBar: StickyActionBarWrapper(
padding: EdgeInsets.zero,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: WoltElevatedButton(
onPressed: () {
Navigator.of(modalSheetContext).pop();
pageIndexNotifier.value = 0;
},
child: const Text('Close'),
stickyActionBar: Padding(
padding: const EdgeInsets.all(16.0),
child: ElevatedButton(
onPressed: () {
Navigator.of(modalSheetContext).pop();
pageIndexNotifier.value = 0;
},
child: const SizedBox(
height: 56.0,
width: double.infinity,
child: Center(child: Text('Close')),
),
),
),
pageTitle: const Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: ModalSheetTitle('Material Colors'),
pageTitle: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Material Colors',
style: Theme.of(context).textTheme.headlineMedium!.copyWith(fontWeight: FontWeight.bold),
),
),
heroImageHeight: 200,
heroImage: const Image(
image: AssetImage('lib/assets/images/material_colors_hero.png'),
fit: BoxFit.cover,
),
leadingNavBarWidget: WoltModalSheetBackButton(onBackPressed: () {
pageIndexNotifier.value = pageIndexNotifier.value - 1;
}),
trailingNavBarWidget: WoltModalSheetCloseButton(onClosed: () {
Navigator.of(modalSheetContext).pop();
pageIndexNotifier.value = 0;
}),
leadingNavBarWidget: IconButton(
padding: const EdgeInsets.all(16),
icon: const Icon(Icons.arrow_back_rounded),
onPressed: () => pageIndexNotifier.value = pageIndexNotifier.value - 1,
),
trailingNavBarWidget: IconButton(
padding: const EdgeInsets.all(16),
icon: const Icon(Icons.close),
onPressed: () {
Navigator.of(modalSheetContext).pop();
pageIndexNotifier.value = 0;
},
),
sliverList: SliverList(
delegate: SliverChildBuilderDelegate(
(_, index) => ColorTile(color: allMaterialColors[index]),
Expand All @@ -246,13 +266,14 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
}
return MaterialApp(
theme: ThemeData(colorSchemeSeed: const Color(0xFF009DE0), useMaterial3: true),
home: Scaffold(
body: Builder(
builder: (context) {
return Center(
child: SizedBox(
width: 200,
child: WoltElevatedButton(
child: ElevatedButton(
onPressed: () {
WoltModalSheet.show<void>(
pageIndexNotifier: pageIndexNotifier,
Expand All @@ -264,10 +285,7 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
];
},
modalTypeBuilder: (context) {
final size = MediaQuery
.of(context)
.size
.width;
final size = MediaQuery.of(context).size.width;
if (size < 768) {
return WoltModalType.bottomSheet;
} else {
Expand All @@ -285,7 +303,10 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
maxPageHeight: 0.9,
);
},
child: const Text('Show Wolt Modal Sheet'),
child: const SizedBox(
height: 56.0,
child: Center(child: Text('Show Modal Sheet')),
),
),
),
);
Expand All @@ -300,7 +321,7 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
The code snippet above produces the following:
</br>
</br>
![Example app](https://github.com/woltapp/wolt_modal_sheet/blob/main/doc/example_app.gif?raw=true)
![Example app](https://github.com/woltapp/wolt_modal_sheet/blob/main/doc/example_app_recording.gif?raw=true)

### Playground app with imperative navigation

Expand Down
Binary file removed doc/example_app.gif
View file
Binary file not shown.
Binary file added doc/example_app_recording.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
92 changes: 57 additions & 35 deletions example/lib/main.dart
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import 'package:demo_ui_components/demo_ui_components.dart';
import 'package:flutter/material.dart';
import 'package:wolt_modal_sheet/wolt_modal_sheet.dart';

Expand All @@ -15,28 +14,37 @@ class MainApp extends StatelessWidget {

WoltModalSheetPage page1(BuildContext modalSheetContext) {
return WoltModalSheetPage.withSingleChild(
stickyActionBar: StickyActionBarWrapper(
stickyActionBar: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
WoltElevatedButton(
ElevatedButton(
onPressed: () => Navigator.of(modalSheetContext).pop(),
theme: WoltElevatedButtonTheme.secondary,
child: const Text('Cancel'),
child: const SizedBox(
height: 56.0,
width: double.infinity,
child: Center(child: Text('Cancel')),
),
),
const SizedBox(height: 8),
WoltElevatedButton(
onPressed: () {
pageIndexNotifier.value = pageIndexNotifier.value + 1;
},
child: const Text('Next page'),
ElevatedButton(
onPressed: () => pageIndexNotifier.value = pageIndexNotifier.value + 1,
child: const SizedBox(
height: 56.0,
width: double.infinity,
child: Center(child: Text('Next page')),
),
),
],
),
),
isTopBarLayerAlwaysVisible: true,
topBarTitle: const ModalSheetTopBarTitle('Pagination'),
trailingNavBarWidget:
WoltModalSheetCloseButton(onClosed: Navigator.of(modalSheetContext).pop),
topBarTitle: Text('Pagination', style: Theme.of(context).textTheme.titleSmall),
trailingNavBarWidget: IconButton(
padding: const EdgeInsets.all(16),
icon: const Icon(Icons.close),
onPressed: Navigator.of(modalSheetContext).pop,
),
child: const Padding(
padding: EdgeInsets.only(bottom: 120),
child: Text(
Expand All @@ -50,35 +58,45 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
WoltModalSheetPage page2(BuildContext modalSheetContext) {
return WoltModalSheetPage.withCustomSliverList(
mainContentPadding: EdgeInsetsDirectional.zero,
stickyActionBar: StickyActionBarWrapper(
padding: EdgeInsets.zero,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: WoltElevatedButton(
onPressed: () {
Navigator.of(modalSheetContext).pop();
pageIndexNotifier.value = 0;
},
child: const Text('Close'),
stickyActionBar: Padding(
padding: const EdgeInsets.all(16.0),
child: ElevatedButton(
onPressed: () {
Navigator.of(modalSheetContext).pop();
pageIndexNotifier.value = 0;
},
child: const SizedBox(
height: 56.0,
width: double.infinity,
child: Center(child: Text('Close')),
),
),
),
pageTitle: const Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: ModalSheetTitle('Material Colors'),
pageTitle: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Material Colors',
style: Theme.of(context).textTheme.headlineMedium!.copyWith(fontWeight: FontWeight.bold),
),
),
heroImageHeight: 200,
heroImage: const Image(
image: AssetImage('lib/assets/images/material_colors_hero.png'),
fit: BoxFit.cover,
),
leadingNavBarWidget: WoltModalSheetBackButton(onBackPressed: () {
pageIndexNotifier.value = pageIndexNotifier.value - 1;
}),
trailingNavBarWidget: WoltModalSheetCloseButton(onClosed: () {
Navigator.of(modalSheetContext).pop();
pageIndexNotifier.value = 0;
}),
leadingNavBarWidget: IconButton(
padding: const EdgeInsets.all(16),
icon: const Icon(Icons.arrow_back_rounded),
onPressed: () => pageIndexNotifier.value = pageIndexNotifier.value - 1,
),
trailingNavBarWidget: IconButton(
padding: const EdgeInsets.all(16),
icon: const Icon(Icons.close),
onPressed: () {
Navigator.of(modalSheetContext).pop();
pageIndexNotifier.value = 0;
},
),
sliverList: SliverList(
delegate: SliverChildBuilderDelegate(
(_, index) => ColorTile(color: allMaterialColors[index]),
Expand All @@ -89,13 +107,14 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
}

return MaterialApp(
theme: ThemeData(colorSchemeSeed: const Color(0xFF009DE0), useMaterial3: true),
home: Scaffold(
body: Builder(
builder: (context) {
return Center(
child: SizedBox(
width: 200,
child: WoltElevatedButton(
child: ElevatedButton(
onPressed: () {
WoltModalSheet.show<void>(
pageIndexNotifier: pageIndexNotifier,
Expand Down Expand Up @@ -125,7 +144,10 @@ Pagination involves a sequence of screens the user navigates sequentially. We ch
maxPageHeight: 0.9,
);
},
child: const Text('Show Wolt Modal Sheet'),
child: const SizedBox(
height: 56.0,
child: Center(child: Text('Show Modal Sheet')),
),
),
),
);
Expand Down
24 changes: 0 additions & 24 deletions example/pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,21 +41,6 @@ packages:
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:
Expand Down Expand Up @@ -198,14 +183,5 @@ packages:
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"
3 changes: 0 additions & 3 deletions example/pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,6 @@ dev_dependencies:
flutter_lints: ^2.0.0
wolt_modal_sheet:
path: ..
wolt_responsive_layout_grid: ^0.0.3
demo_ui_components:
path: ../demo_ui_components

flutter:
uses-material-design: true
Expand Down

0 comments on commit 362ae42

Please sign in to comment.