diff --git a/example/lib/main.dart b/example/lib/main.dart index 3847b8d5a..331b5a80e 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -88,9 +88,7 @@ class _HomeState extends State { theme: context.watch().value, darkTheme: context.watch().value, home: _compactMode - ? YaruCompactLayout( - pageItems: [configItem] + examplePageItems.take(_amount).toList(), - ) + ? _CompactPage(configItem: configItem, amount: _amount) : YaruMasterDetailPage( leftPaneWidth: 280, previousIconData: YaruIcons.go_previous, @@ -111,6 +109,28 @@ class _HomeState extends State { } } +class _CompactPage extends StatelessWidget { + const _CompactPage({ + Key? key, + required this.configItem, + required int amount, + }) : _amount = amount, + super(key: key); + + 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(), + ); + } +} + class TouchMouseStylusScrollBehavior extends MaterialScrollBehavior { @override Set get dragDevices => { diff --git a/lib/src/pages/layouts/yaru_compact_layout.dart b/lib/src/pages/layouts/yaru_compact_layout.dart index 411b79fdf..30552b32d 100644 --- a/lib/src/pages/layouts/yaru_compact_layout.dart +++ b/lib/src/pages/layouts/yaru_compact_layout.dart @@ -12,6 +12,7 @@ class YaruCompactLayout extends StatefulWidget { this.showUnselectedLabels = true, this.labelType = NavigationRailLabelType.none, this.bottomNavigationBarType = BottomNavigationBarType.fixed, + this.extendNavigationRail = false, }) : super(key: key); /// The list of [YaruPageItem] has to be provided. @@ -32,6 +33,10 @@ class YaruCompactLayout extends StatefulWidget { /// Optionally control the click behavior of the [BottomNavigationBar] final BottomNavigationBarType bottomNavigationBarType; + /// Defines if the labels are shown right to the icon + /// of the [NavigationRail] in the wide layout + final bool extendNavigationRail; + @override State createState() => _YaruCompactLayoutState(); } @@ -57,6 +62,9 @@ class _YaruCompactLayoutState extends State { pageItems: widget.pageItems, initialIndex: _index == -1 ? _previousIndex : _index, onSelected: _setIndex, + extended: widget.labelType == NavigationRailLabelType.none + ? widget.extendNavigationRail + : false, ) : YaruNarrowLayout( showSelectedLabels: widget.showSelectedLabels, diff --git a/lib/src/pages/layouts/yaru_wide_layout.dart b/lib/src/pages/layouts/yaru_wide_layout.dart index 3821e46fb..f91753d41 100644 --- a/lib/src/pages/layouts/yaru_wide_layout.dart +++ b/lib/src/pages/layouts/yaru_wide_layout.dart @@ -21,12 +21,17 @@ class YaruWideLayout extends StatefulWidget { /// Optionally control the labels of the [NavigationRail] final NavigationRailLabelType? labelType; + /// Defines if the labels are shown right to the icon + /// of the [NavigationRail] + final bool extended; + const YaruWideLayout({ Key? key, required this.pageItems, required this.initialIndex, this.scrollController, this.labelType = NavigationRailLabelType.selected, + this.extended = false, required this.onSelected, }) : super(key: key); @@ -65,6 +70,10 @@ class _YaruWideLayoutState extends State { BoxConstraints(minHeight: constraint.maxHeight), child: IntrinsicHeight( child: NavigationRail( + extended: + widget.labelType == NavigationRailLabelType.none + ? widget.extended + : false, unselectedIconTheme: IconThemeData( color: unselectedTextColor, ),