Skip to content

Commit cc6d10f

Browse files
bdlukaabdlukaa
authored
Improve example in Navigation/NavigationView (#796)
2 parents 3db50b8 + 543a9d1 commit cc6d10f

2 files changed

Lines changed: 171 additions & 87 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
## [next]
1+
## [Next]
22

33
- Add parameters `onTapDown` and `onTapUp` on all buttons. ([#795](https://github.com/bdlukaa/fluent_ui/pull/795))
44
- **Breaking: if you use the abstract class `BaseButton`, these two parameters are now required**
55
- Add `PasswordBox` widget. ([#795](https://github.com/bdlukaa/fluent_ui/pull/795))
6+
- Improve example in Navigation/NavigationView in app. ([#796](https://github.com/bdlukaa/fluent_ui/pull/796))
67

78
## 4.4.2
89

‎example/lib/screens/navigation/navigation_view.dart‎

Lines changed: 169 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,66 @@ class _NavigationViewPageState extends State<NavigationViewPage>
3131
'End': const EndNavigationIndicator(),
3232
};
3333

34+
List<NavigationPaneItem> items = [
35+
PaneItem(
36+
icon: const Icon(FluentIcons.home),
37+
title: const Text('Home'),
38+
body: const _NavigationBodyItem(),
39+
),
40+
PaneItemSeparator(),
41+
PaneItem(
42+
icon: const Icon(FluentIcons.issue_tracking),
43+
title: const Text('Track orders'),
44+
infoBadge: const InfoBadge(source: Text('8')),
45+
body: const _NavigationBodyItem(
46+
header: 'Badging',
47+
content: Text(
48+
'Badging is a non-intrusive and intuitive way to display '
49+
'notifications or bring focus to an area within an app - '
50+
'whether that be for notifications, indicating new content, '
51+
'or showing an alert. An InfoBadge is a small piece of UI '
52+
'that can be added into an app and customized to display a '
53+
'number, icon, or a simple dot.',
54+
),
55+
),
56+
),
57+
PaneItem(
58+
icon: const Icon(FluentIcons.disable_updates),
59+
title: const Text('Disabled Item'),
60+
body: const _NavigationBodyItem(),
61+
enabled: false,
62+
),
63+
PaneItemExpander(
64+
icon: const Icon(FluentIcons.account_management),
65+
title: const Text('Account'),
66+
body: const _NavigationBodyItem(
67+
header: 'PaneItemExpander',
68+
content: Text(
69+
'Some apps may have a more complex hierarchical structure '
70+
'that requires more than just a flat list of navigation '
71+
'items. You may want to use top-level navigation items to '
72+
'display categories of pages, with children items displaying '
73+
'specific pages. It is also useful if you have hub-style '
74+
'pages that only link to other pages. For these kinds of '
75+
'cases, you should create a hierarchical NavigationView.',
76+
),
77+
),
78+
items: [
79+
PaneItemHeader(header: const Text('Apps')),
80+
PaneItem(
81+
icon: const Icon(FluentIcons.mail),
82+
title: const Text('Mail'),
83+
body: const _NavigationBodyItem(),
84+
),
85+
PaneItem(
86+
icon: const Icon(FluentIcons.calendar),
87+
title: const Text('Calendar'),
88+
body: const _NavigationBodyItem(),
89+
),
90+
],
91+
),
92+
];
93+
3494
@override
3595
Widget build(BuildContext context) {
3696
return ScaffoldPage.scrollable(
@@ -134,71 +194,31 @@ class _NavigationViewPageState extends State<NavigationViewPage>
134194
displayMode: displayMode,
135195
indicator: indicators[indicator],
136196
header: const Text('Pane Header'),
137-
items: [
138-
PaneItem(
139-
icon: const Icon(FluentIcons.home),
140-
title: const Text('Home'),
141-
body: const _NavigationBodyItem(),
142-
),
143-
PaneItemSeparator(),
144-
PaneItem(
145-
icon: const Icon(FluentIcons.issue_tracking),
146-
title: const Text('Track orders'),
147-
infoBadge: const InfoBadge(source: Text('8')),
148-
body: const _NavigationBodyItem(
149-
header: 'Badging',
150-
content: Text(
151-
'Badging is a non-intrusive and intuitive way to display '
152-
'notifications or bring focus to an area within an app - '
153-
'whether that be for notifications, indicating new content, '
154-
'or showing an alert. An InfoBadge is a small piece of UI '
155-
'that can be added into an app and customized to display a '
156-
'number, icon, or a simple dot.',
157-
),
158-
),
159-
),
160-
PaneItem(
161-
icon: const Icon(FluentIcons.disable_updates),
162-
title: const Text('Disabled Item'),
163-
body: const _NavigationBodyItem(),
164-
enabled: false,
165-
),
166-
PaneItemExpander(
167-
icon: const Icon(FluentIcons.account_management),
168-
title: const Text('Account'),
169-
body: const _NavigationBodyItem(
170-
header: 'PaneItemExpander',
171-
content: Text(
172-
'Some apps may have a more complex hierarchical structure '
173-
'that requires more than just a flat list of navigation '
174-
'items. You may want to use top-level navigation items to '
175-
'display categories of pages, with children items displaying '
176-
'specific pages. It is also useful if you have hub-style '
177-
'pages that only link to other pages. For these kinds of '
178-
'cases, you should create a hierarchical NavigationView.',
179-
),
180-
),
181-
items: [
182-
PaneItemHeader(header: const Text('Apps')),
183-
PaneItem(
184-
icon: const Icon(FluentIcons.mail),
185-
title: const Text('Mail'),
186-
body: const _NavigationBodyItem(),
187-
),
188-
PaneItem(
189-
icon: const Icon(FluentIcons.calendar),
190-
title: const Text('Calendar'),
191-
body: const _NavigationBodyItem(),
192-
),
193-
],
194-
),
195-
],
197+
items: items,
196198
footerItems: [
197199
PaneItem(
198200
icon: const Icon(FluentIcons.settings),
199201
title: const Text('Settings'),
200202
body: const _NavigationBodyItem(),
201203
),
204+
PaneItemAction(
205+
icon: const Icon(FluentIcons.add),
206+
title: const Text('Add New Item'),
207+
onTap: () {
208+
items.add(
209+
PaneItem(
210+
icon: const Icon(FluentIcons.new_folder),
211+
title: const Text('New Item'),
212+
body: const Center(
213+
child: Text(
214+
'This is a newly added Item',
215+
),
216+
),
217+
),
218+
);
219+
setState(() {});
220+
},
221+
),
202222
],
203223
),
204224
transitionBuilder: pageTransition == 'Default'
@@ -228,42 +248,105 @@ class _NavigationViewPageState extends State<NavigationViewPage>
228248
},
229249
),
230250
),
231-
codeSnippet: '''NavigationView(
251+
codeSnippet: '''
252+
// Do not define the `items` inside the `Widget Build` function
253+
// otherwise on running `setstate`, new item can not be added.
254+
255+
List<NavigationPaneItem> items = [
256+
PaneItem(
257+
icon: const Icon(FluentIcons.home),
258+
title: const Text('Home'),
259+
body: const _NavigationBodyItem(),
260+
),
261+
PaneItemSeparator(),
262+
PaneItem(
263+
icon: const Icon(FluentIcons.issue_tracking),
264+
title: const Text('Track orders'),
265+
infoBadge: const InfoBadge(source: Text('8')),
266+
body: const _NavigationBodyItem(
267+
header: 'Badging',
268+
content: Text(
269+
'Badging is a non-intrusive and intuitive way to display '
270+
'notifications or bring focus to an area within an app - '
271+
'whether that be for notifications, indicating new content, '
272+
'or showing an alert. An InfoBadge is a small piece of UI '
273+
'that can be added into an app and customized to display a '
274+
'number, icon, or a simple dot.',
275+
),
276+
),
277+
),
278+
PaneItem(
279+
icon: const Icon(FluentIcons.disable_updates),
280+
title: const Text('Disabled Item'),
281+
body: const _NavigationBodyItem(),
282+
enabled: false,
283+
),
284+
PaneItemExpander(
285+
icon: const Icon(FluentIcons.account_management),
286+
title: const Text('Account'),
287+
body: const _NavigationBodyItem(
288+
header: 'PaneItemExpander',
289+
content: Text(
290+
'Some apps may have a more complex hierarchical structure '
291+
'that requires more than just a flat list of navigation '
292+
'items. You may want to use top-level navigation items to '
293+
'display categories of pages, with children items displaying '
294+
'specific pages. It is also useful if you have hub-style '
295+
'pages that only link to other pages. For these kinds of '
296+
'cases, you should create a hierarchical NavigationView.',
297+
),
298+
),
299+
items: [
300+
PaneItemHeader(header: const Text('Apps')),
301+
PaneItem(
302+
icon: const Icon(FluentIcons.mail),
303+
title: const Text('Mail'),
304+
body: const _NavigationBodyItem(),
305+
),
306+
PaneItem(
307+
icon: const Icon(FluentIcons.calendar),
308+
title: const Text('Calendar'),
309+
body: const _NavigationBodyItem(),
310+
),
311+
],
312+
),
313+
];
314+
315+
// Return the NavigationView from `Widegt Build` function
316+
317+
NavigationView(
232318
appBar: const NavigationAppBar(
233319
title: Text('NavigationView'),
234320
),
235321
pane: NavigationPane(
236322
selected: topIndex,
237323
onChanged: (index) => setState(() => topIndex = index),
238324
displayMode: displayMode,
239-
items: [
325+
items: items,
326+
footerItems: [
240327
PaneItem(
241-
icon: const Icon(FluentIcons.home),
242-
title: const Text('Home'),
243-
body: BodyItem(),
328+
icon: const Icon(FluentIcons.settings),
329+
title: const Text('Settings'),
330+
body: const _NavigationBodyItem(),
244331
),
245-
PaneItem(
246-
icon: const Icon(FluentIcons.issue_tracking),
247-
title: const Text('Track an order'),
248-
infoBadge: const InfoBadge(source: Text('8')),
249-
body: BodyItem(),
250-
),
251-
PaneItemExpander(
252-
icon: const Icon(FluentIcons.account_management),
253-
title: const Text('Account'),
254-
body: BodyItem(),
255-
items: [
256-
PaneItem(
257-
icon: const Icon(FluentIcons.mail),
258-
title: const Text('Mail'),
259-
body: BodyItem(),
260-
),
261-
PaneItem(
262-
icon: const Icon(FluentIcons.calendar),
263-
title: const Text('Calendar'),
264-
body: BodyItem(),
265-
),
266-
],
332+
PaneItemAction(
333+
icon: const Icon(FluentIcons.add),
334+
title: const Text('Add New Item'),
335+
onTap: () {
336+
// Your Logic to Add New `NavigationPaneItem`
337+
items.add(
338+
PaneItem(
339+
icon: const Icon(FluentIcons.new_folder),
340+
title: const Text('New Item'),
341+
body: const Center(
342+
child: Text(
343+
'This is a newly added Item',
344+
),
345+
),
346+
),
347+
);
348+
setState(() {});
349+
},
267350
),
268351
],
269352
),

0 commit comments

Comments
 (0)