YaruPageItem: add more flexibility (#242)

* YaruPageItem: add more flexibility Fixes #229 * Use builder for icon * use filled icon for selected banner * Rename icon to iconBuilder * Remove searchMatches callback
ubuntu · Oct 6, 2022 · 9ed6359 · 9ed6359
1 parent b9a0214
commit 9ed6359
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 77 deletions.
diff --git a/example/lib/example_page_items.dart b/example/lib/example_page_items.dart
@@ -18,66 +18,65 @@ final examplePageItems = <YaruPageItem>[
   YaruPageItem(
     titleBuilder: (context) => YaruPageItemTitle.text('YaruBanner'),
     builder: (context) => const BannerPage(),
-    iconData: YaruIcons.image,
+    iconBuilder: (context, selected) => selected
+        ? const Icon(YaruIcons.image_filled)
+        : const Icon(YaruIcons.image),
   ),
   YaruPageItem(
     titleBuilder: (context) => YaruPageItemTitle.text('YaruCarousel'),
     builder: (_) => const CarouselPage(),
-    iconData: YaruIcons.refresh,
+    iconBuilder: (context, selected) => const Icon(YaruIcons.refresh),
   ),
   YaruPageItem(
     titleBuilder: (context) => YaruPageItemTitle.text('YaruColorDisk'),
     builder: (context) => const ColorDiskPage(),
-    iconData: YaruIcons.color_select,
+    iconBuilder: (context, selected) => const Icon(YaruIcons.color_select),
   ),
   YaruPageItem(
     titleBuilder: (context) => YaruPageItemTitle.text('YaruDraggable'),
     builder: (context) => const DraggablePage(),
-    iconData: YaruIcons.drag_handle,
+    iconBuilder: (context, selected) => const Icon(YaruIcons.drag_handle),
   ),
   YaruPageItem(
     titleBuilder: (context) => YaruPageItemTitle.text('YaruExpandable'),
-    iconData: YaruIcons.pan_down,
+    iconBuilder: (context, selected) => const Icon(YaruIcons.pan_down),
     builder: (_) => const ExpandablePage(),
   ),
   YaruPageItem(
     titleBuilder: (context) => YaruPageItemTitle.text('YaruProgressIndicator'),
-    iconData: YaruIcons.download,
+    iconBuilder: (context, selected) => const Icon(YaruIcons.download),
     builder: (_) => const ProgressIndicatorPage(),
   ),
   YaruPageItem(
     titleBuilder: (context) => YaruPageItemTitle.text('YaruOptionButton'),
-    iconData: YaruIcons.settings,
+    iconBuilder: (context, selected) => const Icon(YaruIcons.settings),
     builder: (_) => const YaruPage(children: [OptionButtonPage()]),
   ),
   YaruPageItem(
     titleBuilder: (context) => YaruPageItemTitle.text('YaruRoundToggleButton'),
     builder: (context) => const RoundToggleButtonPage(),
-    iconData: YaruIcons.app_grid,
+    iconBuilder: (context, selected) => const Icon(YaruIcons.app_grid),
   ),
   YaruPageItem(
     titleBuilder: (context) => YaruPageItemTitle.text('YaruSection'),
-    iconData: YaruIcons.window,
+    iconBuilder: (context, selected) => const Icon(YaruIcons.window),
     builder: (_) => const SectionPage(),
   ),
   YaruPageItem(
     titleBuilder: (context) =>
         YaruPageItemTitle.text('YaruSelectableContainer'),
-    iconData: YaruIcons.selection,
+    iconBuilder: (context, selected) => const Icon(YaruIcons.selection),
     builder: (_) => const SelectableContainerPage(),
   ),
   YaruPageItem(
     titleBuilder: (context) => YaruPageItemTitle.text('YaruTabbedPage'),
     builder: (_) => const TabbedPagePage(),
-    iconData: YaruIcons.tab_new,
+    iconBuilder: (context, selected) => const Icon(YaruIcons.tab_new),
   ),
   YaruPageItem(
     titleBuilder: (context) => YaruPageItemTitle.text('YaruTile'),
-    iconData: YaruIcons.format_unordered_list,
+    iconBuilder: (context, selected) =>
+        const Icon(YaruIcons.format_unordered_list),
     builder: (_) => const TilePage(),
-    itemWidget: const SizedBox(
-      height: 20,
-      child: YaruCircularProgressIndicator(strokeWidth: 2),
-    ),
   ),
 ];
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -29,7 +29,6 @@ class Home extends StatefulWidget {
 class _HomeState extends State<Home> {
   final _filteredItems = <YaruPageItem>[];
   bool _compactMode = false;
-  int _amount = 3;
 
   @override
   Widget build(BuildContext context) {
@@ -44,31 +43,9 @@ class _HomeState extends State<Home> {
               onChanged: (v) => setState(() => _compactMode = v),
             ),
           ),
-          if (_compactMode)
-            YaruTile(
-              title: const Text('YaruPageItem amount'),
-              trailing: Row(
-                children: [
-                  TextButton(
-                    onPressed: () {
-                      if (_amount >= examplePageItems.length) return;
-                      setState(() => _amount++);
-                    },
-                    child: const Icon(YaruIcons.plus),
-                  ),
-                  TextButton(
-                    onPressed: () {
-                      if (_amount <= 2) return;
-                      setState(() => _amount--);
-                    },
-                    child: const Icon(YaruIcons.minus),
-                  ),
-                ],
-              ),
-            )
         ],
       ),
-      iconData: YaruIcons.settings,
+      iconBuilder: (context, selected) => const Icon(YaruIcons.settings),
     );
 
     return MaterialApp(
@@ -78,7 +55,7 @@ class _HomeState extends State<Home> {
       theme: context.watch<LightTheme>().value,
       darkTheme: context.watch<DarkTheme>().value,
       home: _compactMode
-          ? _CompactPage(configItem: configItem, amount: _amount)
+          ? _CompactPage(configItem: configItem)
           : YaruMasterDetailPage(
               leftPaneWidth: 280,
               previousIconData: YaruIcons.go_previous,
@@ -96,19 +73,17 @@ class _HomeState extends State<Home> {
 class _CompactPage extends StatelessWidget {
   const _CompactPage({
     required this.configItem,
-    required int amount,
-  }) : _amount = amount;
+  });
 
   final YaruPageItem configItem;
-  final int _amount;
 
   @override
   Widget build(BuildContext context) {
     final width = MediaQuery.of(context).size.width;
 
     return YaruCompactLayout(
       extendNavigationRail: width > 1000,
-      pageItems: [configItem] + examplePageItems.take(_amount).toList(),
+      pageItems: [configItem] + examplePageItems,
       backgroundColor: Theme.of(context).brightness == Brightness.light
           ? Colors.white
           : Theme.of(context).colorScheme.onSurface.withOpacity(0.03),

diff --git a/lib/src/pages/layouts/yaru_compact_layout.dart b/lib/src/pages/layouts/yaru_compact_layout.dart
@@ -119,20 +119,21 @@ class _YaruCompactLayoutState extends State<YaruCompactLayout> {
                             });
                           },
                           labelType: widget.labelType,
-                          destinations: widget.pageItems
-                              .map(
-                                (pageItem) => NavigationRailDestination(
-                                  icon: pageItem.itemWidget ??
-                                      Icon(pageItem.iconData),
-                                  selectedIcon: pageItem.selectedItemWidget ??
-                                      pageItem.itemWidget ??
-                                      (pageItem.selectedIconData != null
-                                          ? Icon(pageItem.selectedIconData)
-                                          : Icon(pageItem.iconData)),
-                                  label: pageItem.titleBuilder(context),
+                          destinations: [
+                            for (int i = 0; i < widget.pageItems.length; i++)
+                              NavigationRailDestination(
+                                icon: widget.pageItems[i].iconBuilder(
+                                  context,
+                                  i == _index,
                                 ),
+                                selectedIcon: widget.pageItems[i].iconBuilder(
+                                  context,
+                                  i == _index,
+                                ),
+                                label:
+                                    widget.pageItems[i].titleBuilder(context),
                               )
-                              .toList(),
+                          ],
                         ),
                       ),
                     ),

diff --git a/lib/src/pages/layouts/yaru_page_item.dart b/lib/src/pages/layouts/yaru_page_item.dart
@@ -4,22 +4,14 @@ class YaruPageItem {
   const YaruPageItem({
     required this.titleBuilder,
     required this.builder,
-    required this.iconData,
-    this.selectedIconData,
-    this.searchMatches,
-    this.itemWidget,
-    this.selectedItemWidget,
+    required this.iconBuilder,
     this.onTap,
   });
 
   /// We recommend to use [YaruPageItemTitle] here to avoid line wrap
   final WidgetBuilder titleBuilder;
 
   final WidgetBuilder builder;
-  final IconData iconData;
-  final Widget? itemWidget;
-  final Widget? selectedItemWidget;
-  final IconData? selectedIconData;
-  final bool Function(String value, BuildContext context)? searchMatches;
+  final Widget Function(BuildContext context, bool selected) iconBuilder;
   final void Function(BuildContext context)? onTap;
 }
diff --git a/lib/src/pages/layouts/yaru_page_item_list_view.dart b/lib/src/pages/layouts/yaru_page_item_list_view.dart
@@ -39,13 +39,14 @@ class YaruPageItemListView extends StatelessWidget {
               visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
               selected: index == selectedIndex,
               title: pages[index].titleBuilder(context),
-              leading: Icon(pages[index].iconData),
+              leading:
+                  pages[index].iconBuilder(context, index == selectedIndex),
               onTap: () => onTap(index),
             )
           : _YaruListTile(
               selected: index == selectedIndex,
               title: pages[index].titleBuilder(context),
-              iconData: pages[index].iconData,
+              icon: pages[index].iconBuilder(context, index == selectedIndex),
               onTap: () => onTap(index),
             ),
     );
@@ -69,13 +70,13 @@ class YaruPageItemListView extends StatelessWidget {
 class _YaruListTile extends StatelessWidget {
   const _YaruListTile({
     required this.selected,
-    this.iconData,
+    this.icon,
     required this.onTap,
     required this.title,
   });
 
   final bool selected;
-  final IconData? iconData;
+  final Widget? icon;
   final Function() onTap;
   final Widget? title;
 
@@ -92,16 +93,12 @@ class _YaruListTile extends StatelessWidget {
       child: ListTile(
         textColor: Theme.of(context).colorScheme.onSurface,
         selectedColor: Theme.of(context).colorScheme.onSurface,
+        iconColor: Theme.of(context).colorScheme.onSurface.withOpacity(0.8),
         visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
         shape: const RoundedRectangleBorder(
           borderRadius: BorderRadius.all(Radius.circular(kDefaultButtonRadius)),
         ),
-        leading: iconData != null
-            ? Icon(
-                iconData,
-                color: Theme.of(context).colorScheme.onSurface.withOpacity(0.8),
-              )
-            : null,
+        leading: icon,
         title: title,
         selected: selected,
         onTap: onTap,