diff --git a/example/lib/example_page_items.dart b/example/lib/example_page_items.dart index 8595aa21d..3fdd0e0c7 100644 --- a/example/lib/example_page_items.dart +++ b/example/lib/example_page_items.dart @@ -18,66 +18,65 @@ final examplePageItems = [ 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 index 6bd2b2fa9..02c977617 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -29,7 +29,6 @@ class Home extends StatefulWidget { class _HomeState extends State { final _filteredItems = []; bool _compactMode = false; - int _amount = 3; @override Widget build(BuildContext context) { @@ -44,31 +43,9 @@ class _HomeState extends State { 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 { theme: context.watch().value, darkTheme: context.watch().value, home: _compactMode - ? _CompactPage(configItem: configItem, amount: _amount) + ? _CompactPage(configItem: configItem) : YaruMasterDetailPage( leftPaneWidth: 280, previousIconData: YaruIcons.go_previous, @@ -96,11 +73,9 @@ class _HomeState extends State { 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) { @@ -108,7 +83,7 @@ class _CompactPage extends StatelessWidget { 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 index d56b96467..44b80db25 100644 --- 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 { }); }, 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 index 64dcc6902..0ed865af2 100644 --- a/lib/src/pages/layouts/yaru_page_item.dart +++ b/lib/src/pages/layouts/yaru_page_item.dart @@ -4,11 +4,7 @@ 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, }); @@ -16,10 +12,6 @@ class YaruPageItem { 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 index 6650ee91c..66d004002 100644 --- 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,