Add YaruCompactLayout (#120)

example/lib/main.dart

@@ -27,6 +27,7 @@ class Home extends StatefulWidget {
 class _HomeState extends State<Home> {
   final _filteredItems = <YaruPageItem>[];
   final _searchController = TextEditingController();
+  bool compact = true;
 
   void _onEscape() => setState(() {
         _filteredItems.clear();
@@ -44,26 +45,41 @@ class _HomeState extends State<Home> {
 
   @override
   Widget build(BuildContext context) {
+    final configItem = YaruPageItem(
+      titleBuilder: (context) => Text('Layout'),
+      builder: (_) => YaruPage(children: [
+        YaruSwitchRow(
+          trailingWidget: Text('Compact mode'),
+          value: compact,
+          onChanged: (v) => setState(() => compact = v),
+        )
+      ]),
+      iconData: YaruIcons.settings,
+    );
+
     return MaterialApp(
       scrollBehavior: TouchMouseStylusScrollBehavior(),
       debugShowCheckedModeBanner: false,
       theme: context.watch<LightTheme>().value,
       darkTheme: context.watch<DarkTheme>().value,
-      home: YaruMasterDetailPage(
-        leftPaneWidth: 280,
-        previousIconData: YaruIcons.go_previous,
-        pageItems:
-            _filteredItems.isNotEmpty ? _filteredItems : examplePageItems,
-        appBar: YaruSearchAppBar(
-          searchHint: 'Search...',
-          clearSearchIconData: YaruIcons.window_close,
-          searchController: _searchController,
-          onChanged: (v) => _onSearchChanged(v, context),
-          onEscape: _onEscape,
-          appBarHeight: 48,
-          searchIconData: YaruIcons.search,
-        ),
-      ),
+      home: compact
+          ? YaruCompactLayout(pageItems: [configItem] + examplePageItems)
+          : YaruMasterDetailPage(
+              leftPaneWidth: 280,
+              previousIconData: YaruIcons.go_previous,
+              pageItems: _filteredItems.isNotEmpty
+                  ? _filteredItems
+                  : [configItem] + examplePageItems,
+              appBar: YaruSearchAppBar(
+                searchHint: 'Search...',
+                clearSearchIconData: YaruIcons.window_close,
+                searchController: _searchController,
+                onChanged: (v) => _onSearchChanged(v, context),
+                onEscape: _onEscape,
+                appBarHeight: 48,
+                searchIconData: YaruIcons.search,
+              ),
+            ),
     );
   }
 }

example/pubspec.yaml

@@ -10,8 +10,7 @@ dependencies:
   flutter:
     sdk: flutter
   provider: ^6.0.2
-  yaru:
-    git: http://github.com/ubuntu/yaru.dart
+  yaru: ^0.3.0
   yaru_icons: ^0.2.0
   yaru_widgets:
     path: ../

lib/src/yaru_compact_layout.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
+/// A responsive layout switching between [YaruWideLayout]
+/// and [YaruNarrowLayout] depening on the screen width.
+class YaruCompactLayout extends StatefulWidget {
+  const YaruCompactLayout({
+    Key? key,
+    required this.pageItems,
+    this.narrowLayoutMaxWidth = 600,
+  }) : super(key: key);
+
+  /// The list of [YaruPageItem] has to be provided.
+  final List<YaruPageItem> pageItems;
+
+  /// The max width after the layout switches to the [YaruWideLayout], defaults to 600.
+  final double narrowLayoutMaxWidth;
+
+  @override
+  State<YaruCompactLayout> createState() => _YaruCompactLayoutState();
+}
+
+class _YaruCompactLayoutState extends State<YaruCompactLayout> {
+  var _index = -1;
+  var _previousIndex = 0;
+
+  void _setIndex(int index) {
+    _previousIndex = _index;
+    _index = index;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: Scaffold(
+        body: LayoutBuilder(
+            builder: (context, constraints) =>
+                constraints.maxWidth > widget.narrowLayoutMaxWidth
+                    ? YaruWideLayout(
+                        labelType: NavigationRailLabelType.none,
+                        pageItems: widget.pageItems,
+                        initialIndex: _index == -1 ? _previousIndex : _index,
+                        onSelected: _setIndex,
+                      )
+                    : YaruNarrowLayout(
+                        showSelectedLabels: false,
+                        pageItems: widget.pageItems,
+                        initialIndex: _index == -1 ? _previousIndex : _index,
+                        onSelected: _setIndex,
+                      )),
+      ),
+    );
+  }
+}

lib/src/yaru_narrow_layout.dart

@@ -11,9 +11,19 @@ class YaruNarrowLayout extends StatefulWidget {
   /// The index of the item that should be selected when the [State] of [YaruNarrowLayout] is initialized.
   final int initialIndex;
 
-  const YaruNarrowLayout(
-      {Key? key, required this.pageItems, required this.initialIndex})
-      : super(key: key);
+  /// Optional callback that returns an index when the page changes.
+  final ValueChanged<int>? onSelected;
+
+  /// Optional bool to hide selected labels in the [BottomNavigationBar]
+  final bool? showSelectedLabels;
+
+  const YaruNarrowLayout({
+    Key? key,
+    required this.pageItems,
+    required this.initialIndex,
+    required this.onSelected,
+    this.showSelectedLabels = true,
+  }) : super(key: key);
 
   @override
   _YaruNarrowLayoutState createState() => _YaruNarrowLayoutState();
@@ -32,22 +42,28 @@ class _YaruNarrowLayoutState extends State<YaruNarrowLayout> {
     return SafeArea(
       child: Scaffold(
           body: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
         children: <Widget>[
           Expanded(
-            child: Center(
-              child: widget.pageItems[_selectedIndex].builder(context),
-            ),
+            child: widget.pageItems[_selectedIndex].builder(context),
           ),
           BottomNavigationBar(
+            showSelectedLabels: widget.showSelectedLabels,
             items: widget.pageItems
                 .map((pageItem) => BottomNavigationBarItem(
                     icon: Icon(pageItem.iconData),
-                    activeIcon: Icon(pageItem.selectedIconData),
+                    activeIcon: pageItem.selectedIconData != null
+                        ? Icon(pageItem.selectedIconData)
+                        : Icon(pageItem.iconData),
                     label:
                         convertWidgetToString(pageItem.titleBuilder(context))))
                 .toList(),
             currentIndex: _selectedIndex,
-            onTap: (index) => setState(() => _selectedIndex = index),
+            onTap: (index) {
+              widget.onSelected!(index);
+              setState(() => _selectedIndex = index);
+            },
           ),
         ],
       )),

lib/src/yaru_wide_layout.dart

@@ -15,11 +15,19 @@ class YaruWideLayout extends StatefulWidget {
   /// the [NavigationRail]
   final ScrollController? scrollController;
 
+  /// Optional callback that returns an index when the page changes.
+  final ValueChanged<int>? onSelected;
+
+  /// Optionally control the labels of the [NavigationRail]
+  final NavigationRailLabelType? labelType;
+
   const YaruWideLayout({
     Key? key,
     required this.pageItems,
     required this.initialIndex,
     this.scrollController,
+    this.labelType = NavigationRailLabelType.selected,
+    required this.onSelected,
   }) : super(key: key);
 
   @override
@@ -41,6 +49,8 @@ class _YaruWideLayoutState extends State<YaruWideLayout> {
       return SafeArea(
         child: Scaffold(
           body: Row(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
             children: [
               SizedBox(
                 height: MediaQuery.of(context).size.height,
@@ -52,13 +62,18 @@ class _YaruWideLayoutState extends State<YaruWideLayout> {
                       child: IntrinsicHeight(
                         child: NavigationRail(
                           selectedIndex: _selectedIndex,
-                          onDestinationSelected: (index) =>
-                              setState(() => _selectedIndex = index),
-                          labelType: NavigationRailLabelType.selected,
+                          onDestinationSelected: (index) {
+                            widget.onSelected!(index);
+                            setState(() => _selectedIndex = index);
+                          },
+                          labelType: widget.labelType,
                           destinations: widget.pageItems
                               .map((pageItem) => NavigationRailDestination(
                                   icon: Icon(pageItem.iconData),
-                                  selectedIcon: Icon(pageItem.selectedIconData),
+                                  selectedIcon:
+                                      pageItem.selectedIconData != null
+                                          ? Icon(pageItem.selectedIconData)
+                                          : Icon(pageItem.iconData),
                                   label: pageItem.titleBuilder(context)))
                               .toList(),
                         ),
@@ -67,9 +82,7 @@ class _YaruWideLayoutState extends State<YaruWideLayout> {
               ),
               const VerticalDivider(thickness: 1, width: 1),
               Expanded(
-                child: Center(
-                  child: widget.pageItems[_selectedIndex].builder(context),
-                ),
+                child: widget.pageItems[_selectedIndex].builder(context),
               )
             ],
           ),

lib/yaru_widgets.dart

@@ -6,6 +6,7 @@ export 'src/yaru_carousel.dart';
 export 'src/yaru_checkbox_row.dart';
 export 'src/yaru_color_disk.dart';
 export 'src/yaru_color_picker_button.dart';
+export 'src/yaru_compact_layout.dart';
 export 'src/yaru_dialog_title.dart';
 export 'src/yaru_expansion_panel_list.dart';
 export 'src/yaru_extra_option_row.dart';