Skip to content

Commit 1d270fc

Browse files
agordn52agordn52
committed
update docs
1 parent d98e77b commit 1d270fc

File tree

3 files changed

+362
-178
lines changed

3 files changed

+362
-178
lines changed

‎resources/docs/6.x/navigation-hub.md‎

Lines changed: 207 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
- [Bottom Navigation](#bottom-navigation "Bottom Navigation")
1111
- [Top Navigation](#top-navigation "Top Navigation")
1212
- [Journey Navigation](#journey-navigation "Journey Navigation")
13+
- [Progress Styles](#journey-progress-styles "Journey Progress Styles")
14+
- [Button Styles](#journey-button-styles "Button Styles")
15+
- [JourneyState](#journey-state "JourneyState")
1316
- [JourneyState Helper Methods](#journey-state-helper-methods "JourneyState Helper Methods")
1417
- [Navigating within a tab](#navigating-within-a-tab "Navigating within a tab")
1518
- [Tabs](#tabs "Tabs")
@@ -70,6 +73,7 @@ class _BaseNavigationHubState extends NavigationHub<BaseNavigationHub> {
7073
/// Layouts:
7174
/// - [NavigationHubLayout.bottomNav] Bottom navigation
7275
/// - [NavigationHubLayout.topNav] Top navigation
76+
/// - [NavigationHubLayout.journey] Journey navigation
7377
NavigationHubLayout? layout = NavigationHubLayout.bottomNav(
7478
// backgroundColor: Colors.white,
7579
);
@@ -144,7 +148,6 @@ Then, you can add the new widget to the Navigation Hub.
144148
};
145149
});
146150
147-
``` dart
148151
import 'package:nylo_framework/nylo_framework.dart';
149152
150153
appRouter() => nyRoutes((router) {
@@ -178,22 +181,7 @@ You can customize the bottom navigation bar by setting properties like the follo
178181
class _MyNavigationHubState extends NavigationHub<MyNavigationHub> {
179182
...
180183
NavigationHubLayout? layout = NavigationHubLayout.bottomNav(
181-
// elevation: 10,
182-
// type: BottomNavigationBarType.fixed,
183-
// backgroundColor: Colors.white,
184-
// iconSize: 24.0,
185-
// selectedItemColor: Colors.blue,
186-
// unselectedItemColor: Colors.grey,
187-
// selectedFontSize: 14.0,
188-
// unselectedFontSize: 12.0,
189-
// selectedLabelStyle: TextStyle(color: Colors.blue),
190-
// unselectedLabelStyle: TextStyle(color: Colors.grey),
191-
// showSelectedLabels: true,
192-
// showUnselectedLabels: true,
193-
// mouseCursor: SystemMouseCursors.click,
194-
// enableFeedback: true,
195-
// landscapeLayout: NavigationHubLandscapeLayout.centered,
196-
// useLegacyColorScheme: true,
184+
// customize the bottomNav layout properties
197185
);
198186
```
199187

@@ -216,34 +204,7 @@ You can customize the top navigation bar by setting properties like the followin
216204
class _MyNavigationHubState extends NavigationHub<MyNavigationHub> {
217205
...
218206
NavigationHubLayout? layout = NavigationHubLayout.topNav(
219-
// isScrollable: false,
220-
// padding: EdgeInsets.all(8.0),
221-
// indicatorColor: Colors.blue,
222-
// automaticIndicatorColorAdjustment: true,
223-
// indicatorWeight: 2.0,
224-
// indicatorPadding: EdgeInsets.zero,
225-
// indicator: BoxDecoration(),
226-
// indicatorSize: TabBarIndicatorSize.tab,
227-
// dividerColor: Colors.grey,
228-
// dividerHeight: 1.0,
229-
// backgroundColor: Colors.white,
230-
// labelColor: Colors.black,
231-
// labelStyle: TextStyle(fontSize: 14.0),
232-
// labelPadding: EdgeInsets.all(8.0),
233-
// unselectedLabelColor: Colors.grey,
234-
// unselectedLabelStyle: TextStyle(fontSize: 12.0),
235-
// showSelectedLabels: true,
236-
// dragStartBehavior: DragStartBehavior.start,
237-
// overlayColor: Colors.transparent,
238-
// mouseCursor: SystemMouseCursors.click,
239-
// enableFeedback: true,
240-
// physics: BouncingScrollPhysics(),
241-
// splashFactory: InkRipple.splashFactory,
242-
// splashBorderRadius: BorderRadius.zero,
243-
// tabAlignment: TabAlignment.center,
244-
// textScaler: 1.0,
245-
// animationDuration: Duration(milliseconds: 200),
246-
// overlayColorState: Colors.transparent,
207+
// customize the topNav layout properties
247208
);
248209
```
249210

@@ -256,46 +217,15 @@ You can change the layout to a journey navigation by setting the **layout** to u
256217

257218
This is great for onboarding flows or multi-step forms.
258219

259-
``` dart
260-
class _MyNavigationHubState extends NavigationHub<MyNavigationHub> {
261-
...
262-
NavigationHubLayout? layout = NavigationHubLayout.journey();
263-
```
264-
265220
``` dart
266221
class _MyNavigationHubState extends NavigationHub<MyNavigationHub> {
267222
...
268223
NavigationHubLayout? layout = NavigationHubLayout.journey(
269-
// backgroundColor: Colors.white,
270-
// showProgressIndicator: true,
271-
// progressIndicatorPosition: ProgressIndicatorPosition.top,
272-
// progressIndicatorColor: Colors.blue,
273-
// progressIndicatorBackgroundColor: Colors.grey,
274-
// progressIndicatorHeight: 4.0,
275-
// progressIndicatorPadding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
276-
// showBackButton: false,
277-
// backButtonIcon: Icons.arrow_back,
278-
// backButtonText: 'Back',
279-
// backButtonTextStyle: TextStyle(color: Colors.black),
280-
// nextButtonText: 'Next',
281-
// nextButtonTextStyle: TextStyle(color: Colors.black),
282-
// nextButtonIcon: Icons.arrow_forward,
283-
// completeButtonText: 'Finish',
284-
// completeButtonTextStyle: TextStyle(color: Colors.black),
285-
// completeButtonIcon: Icons.check,
286-
// showButtonText: true,
287-
// showNextButton: false,
288-
// buttonLayout: JourneyButtonLayout.spaceBetween,
289-
// animationDuration: Duration(milliseconds: 300),
290-
// useSafeArea: true,
291-
// onComplete: () {
292-
// print("Journey completed");
293-
// },
294-
// buttonPadding: EdgeInsets.zero,
224+
// customize the journey layout properties
295225
);
296226
```
297227

298-
If you want to use the jounrey navigation layout, your **pages** should use `JourenyState` as it contains a lot of helper methods to help you manage the journey.
228+
If you want to use the jounrey navigation layout, your **widgets** should use `JourenyState` as it contains a lot of helper methods to help you manage the journey.
299229

300230
You can create a JourneyState using the below command.
301231

@@ -304,7 +234,7 @@ dart run nylo_framework:main make:journey_widget welcome,phone_number_step,add_p
304234
// or with Metro
305235
metro make:journey_widget welcome,phone_number_step,add_photos_step
306236
```
307-
This will create the following files in your **resources/pages/** directory `welcome.dart`, `phone_number_step.dart` and `add_photos_step.dart`.
237+
This will create the following files in your **resources/widgets/** directory `welcome.dart`, `phone_number_step.dart` and `add_photos_step.dart`.
308238

309239
You can then add the new widgets to the Navigation Hub.
310240

@@ -324,9 +254,19 @@ _MyNavigationHubState() : super(() async {
324254
});
325255
```
326256

327-
The journey navigation layout will automatically handle the back and next buttons for you if you enable the `showBackButton` and `showNextButton` properties.
257+
The journey navigation layout will automatically handle the back and next buttons for you if you define a `buttonStyle`.
258+
259+
``` dart
260+
class _MyNavigationHubState extends NavigationHub<MyNavigationHub> {
261+
...
262+
NavigationHubLayout? layout = NavigationHubLayout.journey(
263+
buttonStyle: JourneyButtonStyle.standard(
264+
// Customize button properties
265+
),
266+
);
267+
```
328268

329-
You can also customize the logic in your pages.
269+
You can also customize the logic in your widgets.
330270

331271
``` dart
332272
import 'package:flutter/material.dart';
@@ -405,7 +345,192 @@ class _WelcomeStepState extends JourneyState<WelcomeStep> {
405345
}
406346
```
407347

408-
You can customize and override any of the methods in the `JourneyState` class.
348+
You can override any of the methods in the `JourneyState` class.
349+
350+
<div id="journey-progress-styles"></div>
351+
<br>
352+
353+
### Journey Progress Styles
354+
355+
You can customize the progress indicator style by using the `JourneyProgressStyle` class.
356+
357+
``` dart
358+
class _MyNavigationHubState extends NavigationHub<MyNavigationHub> {
359+
...
360+
NavigationHubLayout? layout = NavigationHubLayout.journey(
361+
progressStyle: JourneyProgressStyle.linear(
362+
activeColor: Colors.blue,
363+
inactiveColor: Colors.grey,
364+
thickness: 4.0,
365+
),
366+
);
367+
```
368+
369+
You can use the following progress styles:
370+
371+
- `JourneyProgressStyle.linear`: Linear progress indicator.
372+
- `JourneyProgressStyle.dots`: Dots-based progress indicator.
373+
- `JourneyProgressStyle.numbered`: Numbered step progress indicator.
374+
- `JourneyProgressStyle.segments`: Segmented progress bar style.
375+
- `JourneyProgressStyle.circular`: Circular progress indicator.
376+
- `JourneyProgressStyle.timeline`: Timeline-style progress indicator.
377+
- `JourneyProgressStyle.custom`: Custom progress indicator using a builder function.
378+
379+
``` dart
380+
class _MyNavigationHubState extends NavigationHub<MyNavigationHub> {
381+
...
382+
NavigationHubLayout? layout = NavigationHubLayout.journey(
383+
progressStyle: JourneyProgressStyle.custom(
384+
builder: (context, currentStep, totalSteps, percentage) {
385+
return LinearProgressIndicator(
386+
value: percentage,
387+
backgroundColor: Colors.grey[200],
388+
color: Colors.blue,
389+
minHeight: 4.0,
390+
);
391+
},
392+
),
393+
);
394+
```
395+
396+
You can also customize the progress indicator position by using the `progressIndicatorPosition` property.
397+
398+
``` dart
399+
class _MyNavigationHubState extends NavigationHub<MyNavigationHub> {
400+
...
401+
NavigationHubLayout? layout = NavigationHubLayout.journey(
402+
progressIndicatorPosition: ProgressIndicatorPosition.top,
403+
);
404+
```
405+
406+
You can use the following progress indicator positions:
407+
408+
- `ProgressIndicatorPosition.top`: Progress indicator at the top of the screen.
409+
- `ProgressIndicatorPosition.bottom`: Progress indicator at the bottom of the screen.
410+
411+
You can also customize the progress indicator padding by using the `progressIndicatorPadding` property.
412+
413+
``` dart
414+
class _MyNavigationHubState extends NavigationHub<MyNavigationHub> {
415+
...
416+
NavigationHubLayout? layout = NavigationHubLayout.journey(
417+
progressIndicatorPadding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
418+
);
419+
```
420+
421+
<div id="journey-button-styles">
422+
<br>
423+
424+
### Journey Button Styles
425+
426+
If you want to build an onboarding flow, you can set the `buttonStyle` property in the `NavigationHubLayout.journey` class.
427+
428+
Out the box, you can use the following button styles:
429+
430+
- `JourneyButtonStyle.standard`: Standard button style with customizable properties.
431+
- `JourneyButtonStyle.minimal`: Minimal button style with icons only.
432+
- `JourneyButtonStyle.outlined`: Outlined button style.
433+
- `JourneyButtonStyle.contained`: Contained button style.
434+
- `JourneyButtonStyle.custom`: Custom button style using builder functions.
435+
436+
``` dart
437+
class _MyNavigationHubState extends NavigationHub<MyNavigationHub> {
438+
...
439+
NavigationHubLayout? layout = NavigationHubLayout.journey(
440+
progressStyle: JourneyProgressStyle.linear(),
441+
buttonStyle: JourneyButtonStyle.standard(
442+
// Customize button properties
443+
),
444+
);
445+
```
446+
447+
<div id="journey-state"></div>
448+
<br>
449+
450+
### JourneyState
451+
452+
The `JourneyState` class contains a lot of helper methods to help you manage the journey.
453+
454+
To create a new `JourneyState`, you can use the below command.
455+
456+
``` bash
457+
dart run nylo_framework:main make:journey_widget onboard_user_dob
458+
```
459+
460+
Or if you want to create multiple widgets at once, you can use the following command.
461+
462+
``` bash
463+
dart run nylo_framework:main make:journey_widget welcome,phone_number_step,add_photos_step
464+
```
465+
466+
This will create the following files in your **resources/widgets/** directory `welcome.dart`, `phone_number_step.dart` and `add_photos_step.dart`.
467+
468+
You can then add the new widgets to the Navigation Hub.
469+
470+
``` dart
471+
_MyNavigationHubState() : super(() async {
472+
return {
473+
0: NavigationTab.journey(
474+
page: Welcome(),
475+
),
476+
1: NavigationTab.journey(
477+
page: PhoneNumberStep(),
478+
),
479+
2: NavigationTab.journey(
480+
page: AddPhotosStep(),
481+
),
482+
};
483+
});
484+
```
485+
486+
If we look at the `WelcomeStep` class, we can see that it extends the `JourneyState` class.
487+
488+
``` dart
489+
...
490+
class _WelcomeTabState extends JourneyState<WelcomeTab> {
491+
_WelcomeTabState() : super(
492+
navigationHubState: BaseNavigationHub.path.stateName());
493+
494+
@override
495+
get init => () {
496+
// Your initialization logic here
497+
};
498+
499+
@override
500+
Widget view(BuildContext context) {
501+
return buildJourneyContent(
502+
progressStyle: JourneyProgressStyle.dots(
503+
activeColor: Colors.red
504+
),
505+
content: Column(
506+
mainAxisAlignment: MainAxisAlignment.center,
507+
children: [
508+
Text('WelcomeTab', style: Theme.of(context).textTheme.headlineMedium),
509+
const SizedBox(height: 20),
510+
Text('This onboarding journey will help you get started.'),
511+
],
512+
),
513+
);
514+
}
515+
```
516+
517+
You'll notice that the **JourneyState** class will use `buildJourneyContent` to build the content of the page.
518+
519+
Here are a list of the properties you can use in the `buildJourneyContent` method.
520+
521+
| Property | Type | Description |
522+
| --- | --- | --- |
523+
| `content` | `Widget` | The main content of the page. |
524+
| `nextButton` | `Widget?` | The next button widget. |
525+
| `backButton` | `Widget?` | The back button widget. |
526+
| `progressPosition` | `ProgressIndicatorPosition` | The position of the progress indicator. |
527+
| `progressStyle` | `JourneyProgressStyle?` | The style of the progress indicator. |
528+
| `contentPadding` | `EdgeInsetsGeometry` | The padding for the content. |
529+
| `progressIndicatorPadding` | `EdgeInsets?` | The padding for the progress indicator. |
530+
| `header` | `Widget?` | The header widget. |
531+
| `footer` | `Widget?` | The footer widget. |
532+
| `crossAxisAlignment` | `CrossAxisAlignment` | The cross axis alignment of the content. |
533+
409534

410535
<div id="journey-state-helper-methods"></div>
411536
<br>

0 commit comments

Comments
 (0)