SoftwareApp: adapt navigation to screen width (#227)

* SoftwareApp: adapt navigation to screen width
ubuntu · Sep 17, 2022 · 23f826f · 23f826f
1 parent 93dbbcb
commit 23f826f
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 68 deletions.
diff --git a/lib/package_installer/package_installer_app.dart b/lib/package_installer/package_installer_app.dart
@@ -38,8 +38,8 @@ class PackageInstallerApp extends StatelessWidget {
     return YaruTheme(
       builder: (context, yaru, child) {
         return MaterialApp(
-          theme: yaru.variant?.theme ?? yaruLight,
-          darkTheme: yaru.variant?.darkTheme ?? yaruDark,
+          theme: yaru.theme,
+          darkTheme: yaru.darkTheme,
           debugShowCheckedModeBanner: false,
           title: 'Package Installer',
           localizationsDelegates: AppLocalizations.localizationsDelegates,

diff --git a/lib/store_app/store_app.dart b/lib/store_app/store_app.dart
@@ -33,7 +33,7 @@ import 'package:yaru/yaru.dart';
 import 'package:yaru_icons/yaru_icons.dart';
 import 'package:yaru_widgets/yaru_widgets.dart';
 
-class StoreApp extends StatefulWidget {
+class StoreApp extends StatelessWidget {
   const StoreApp({super.key});
 
   static Widget create() => ChangeNotifierProvider(
@@ -45,73 +45,22 @@ class StoreApp extends StatefulWidget {
         child: const StoreApp(),
       );
 
-  @override
-  State<StoreApp> createState() => _StoreAppState();
-}
-
-class _StoreAppState extends State<StoreApp> {
-  int _myAppsIndex = 0;
-
-  @override
-  void initState() {
-    context.read<StoreModel>().init();
-    super.initState();
-  }
-
   @override
   Widget build(BuildContext context) {
-    final model = context.watch<StoreModel>();
     return YaruTheme(
       builder: (context, yaru, child) {
         return MaterialApp(
-          theme: yaru.variant?.theme ?? yaruLight,
-          darkTheme: yaru.variant?.darkTheme ?? yaruDark,
+          theme: yaru.theme,
+          darkTheme: yaru.darkTheme,
           debugShowCheckedModeBanner: false,
           title: 'Ubuntu Software App',
           localizationsDelegates: AppLocalizations.localizationsDelegates,
           supportedLocales: AppLocalizations.supportedLocales,
           onGenerateTitle: (context) => context.l10n.appTitle,
           routes: {
             Navigator.defaultRouteName: (context) {
-              return Scaffold(
-                body: YaruCompactLayout(
-                  labelType: NavigationRailLabelType.all,
-                  pageItems: [
-                    YaruPageItem(
-                      titleBuilder: ExplorePage.createTitle,
-                      builder: (context) =>
-                          ExplorePage.create(context, model.appIsOnline),
-                      iconData: YaruIcons.compass,
-                    ),
-                    YaruPageItem(
-                      titleBuilder: MyAppsPage.createTitle,
-                      builder: (context) => MyAppsPage.create(
-                        context,
-                        (index) => _myAppsIndex = index,
-                        _myAppsIndex,
-                      ),
-                      iconData: YaruIcons.ok,
-                      itemWidget: model.snapChanges.isNotEmpty
-                          ? _MyAppsIcon(count: model.snapChanges.length)
-                          : null,
-                    ),
-                    YaruPageItem(
-                      titleBuilder: UpdatesPage.createTitle,
-                      builder: UpdatesPage.create,
-                      iconData: YaruIcons.synchronizing,
-                      itemWidget: _UpdatesIcon(
-                        count: model.updateAmount,
-                        updatesState: model.updatesState ??
-                            UpdatesState.checkingForUpdates,
-                      ),
-                    ),
-                    const YaruPageItem(
-                      titleBuilder: SettingsPage.createTitle,
-                      builder: SettingsPage.create,
-                      iconData: YaruIcons.settings,
-                    ),
-                  ],
-                ),
+              return const Scaffold(
+                body: _App(),
               );
             },
           },
@@ -121,6 +70,70 @@ class _StoreAppState extends State<StoreApp> {
   }
 }
 
+class _App extends StatefulWidget {
+  // ignore: unused_element
+  const _App({super.key});
+
+  @override
+  State<_App> createState() => __AppState();
+}
+
+class __AppState extends State<_App> {
+  int _myAppsIndex = 0;
+
+  @override
+  void initState() {
+    context.read<StoreModel>().init();
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final model = context.watch<StoreModel>();
+    final width = MediaQuery.of(context).size.width;
+
+    return YaruCompactLayout(
+      extendNavigationRail: width > 1200,
+      labelType: width < 800 || width > 1200
+          ? NavigationRailLabelType.none
+          : NavigationRailLabelType.all,
+      pageItems: [
+        YaruPageItem(
+          titleBuilder: ExplorePage.createTitle,
+          builder: (context) => ExplorePage.create(context, model.appIsOnline),
+          iconData: YaruIcons.compass,
+        ),
+        YaruPageItem(
+          titleBuilder: MyAppsPage.createTitle,
+          builder: (context) => MyAppsPage.create(
+            context,
+            (index) => _myAppsIndex = index,
+            _myAppsIndex,
+          ),
+          iconData: YaruIcons.ok,
+          itemWidget: model.snapChanges.isNotEmpty
+              ? _MyAppsIcon(count: model.snapChanges.length)
+              : null,
+        ),
+        YaruPageItem(
+          titleBuilder: UpdatesPage.createTitle,
+          builder: UpdatesPage.create,
+          iconData: YaruIcons.synchronizing,
+          itemWidget: _UpdatesIcon(
+            count: model.updateAmount,
+            updatesState: model.updatesState ?? UpdatesState.checkingForUpdates,
+          ),
+        ),
+        const YaruPageItem(
+          titleBuilder: SettingsPage.createTitle,
+          builder: SettingsPage.create,
+          iconData: YaruIcons.settings,
+        ),
+      ],
+    );
+  }
+}
+
 class _MyAppsIcon extends StatelessWidget {
   // ignore: unused_element
   const _MyAppsIcon({super.key, required this.count});

diff --git a/pubspec.lock b/pubspec.lock
@@ -384,7 +384,7 @@ packages:
       name: safe_change_notifier
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.1.0+1"
+    version: "0.2.0"
   screen_retriever:
     dependency: transitive
     description:
@@ -459,7 +459,7 @@ packages:
       name: ubuntu_service
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.1.0"
+    version: "0.2.0"
   url_launcher:
     dependency: "direct main"
     description:
@@ -529,7 +529,7 @@ packages:
       name: version
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.3"
+    version: "3.0.2"
   win32:
     dependency: transitive
     description:
@@ -557,7 +557,7 @@ packages:
       name: yaru
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.0"
+    version: "0.4.1"
   yaru_color_generator:
     dependency: transitive
     description:
@@ -585,7 +585,7 @@ packages:
       name: yaru_widgets
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.2"
+    version: "1.1.3"
 sdks:
   dart: ">=2.17.0 <3.0.0"
   flutter: ">=3.3.0"
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -29,16 +29,16 @@ dependencies:
   palette_generator: ^0.3.3
   provider: ^6.0.2
   quiver: ^3.1.0
-  safe_change_notifier: ^0.1.0+1
+  safe_change_notifier: ^0.2.0
   snapd: ^0.4.5
-  ubuntu_service: ^0.1.0
+  ubuntu_service: ^0.2.0
   url_launcher: ^6.1.2
-  version: ^2.0.0
+  version: ^3.0.2
   window_manager: ^0.2.6
-  yaru: ^0.4.0
+  yaru: ^0.4.1
   yaru_colors: ^0.1.0
   yaru_icons: ^0.2.2
-  yaru_widgets: ^1.1.2
+  yaru_widgets: ^1.1.3
 
 dev_dependencies:
   flutter_test: