Use yaru_widgets.dart for page independant widgets (#162)

Author: Feichtmeier

.github/images/wip.gif

@@ -19,7 +19,7 @@ Packages that we already use or plan to use are:
 - [X] responsive layout
 - [X] [MVVM software architecture](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel)
 - [X] search
-- [ ] WIFI page
+- [X] WIFI page
 - [ ] Network page
 - [ ] Bluetooth page - WIP
 - [X] Wallpaper page

README.md

@@ -8,11 +8,13 @@ import 'package:settings/services/hostname_service.dart';
 import 'package:settings/services/power_profile_service.dart';
 import 'package:settings/services/power_settings_service.dart';
 import 'package:settings/services/settings_service.dart';
-import 'package:settings/view/widgets/app_theme.dart';
-import 'package:settings/view/widgets/master_details_page.dart';
+import 'package:settings/view/app_theme.dart';
+import 'package:settings/view/pages/page_items.dart';
 import 'package:udisks/udisks.dart';
 import 'package:upower/upower.dart';
 import 'package:yaru/yaru.dart' as yaru;
+import 'package:yaru_icons/widgets/yaru_icons.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
 
 void main() async {
   final themeSettings = GSettings(schemaId: schemaInterface);
@@ -71,7 +73,14 @@ class UbuntuSettingsApp extends StatelessWidget {
     return MaterialApp(
       debugShowCheckedModeBanner: false,
       title: 'Ubuntu settings',
-      home: const MasterDetailPage(),
+      home: YaruMasterDetailPage(
+        appBarHeight: 48,
+        leftPaneWidth: 280,
+        pageItems: pageItems,
+        previousIconData: YaruIcons.go_previous,
+        searchHint: 'Search...',
+        searchIconData: YaruIcons.search,
+      ),
       theme: yaru.lightTheme,
       darkTheme: yaru.darkTheme,
       themeMode: context.watch<AppTheme>().value,

lib/main.dart

@@ -1,19 +1,18 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:settings/view/pages/accessibility/accessibility_model.dart';
-import 'package:settings/view/widgets/settings_section.dart';
-import 'package:settings/view/widgets/switch_settings_row.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
 
 class GlobalSection extends StatelessWidget {
   const GlobalSection({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     final model = Provider.of<AccessibilityModel>(context);
-    return SettingsSection(
+    return YaruSection(
       headline: 'Global',
       children: [
-        SwitchSettingsRow(
+        YaruSwitchRow(
           trailingWidget: const Text('Always Show Universal Access Menu'),
           value: model.universalAccessStatus,
           onChanged: (value) => model.setUniversalAccessStatus(value),

lib/view/widgets/app_theme.dart renamed to lib/view/app_theme.dart

@@ -1,15 +1,15 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:settings/view/pages/accessibility/accessibility_model.dart';
-import 'package:settings/view/widgets/extra_options_gsettings_row.dart';
-import 'package:settings/view/widgets/settings_section.dart';
+import 'package:yaru_icons/widgets/yaru_icons.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
 
 class HearingSection extends StatelessWidget {
   const HearingSection({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return const SettingsSection(
+    return const YaruSection(
       headline: 'Hearing',
       children: [
         _VisualAlerts(),
@@ -24,7 +24,8 @@ class _VisualAlerts extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final model = Provider.of<AccessibilityModel>(context);
-    return ExtraOptionsGsettingsRow(
+    return YaruExtraOptionRow(
+      iconData: YaruIcons.settings,
       actionLabel: 'Visual Alerts',
       actionDescription: 'Use a visual indication when an alert sound occurs',
       value: model.visualAlerts,

lib/view/pages/accessibility/global_section.dart

@@ -1,11 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:settings/view/pages/accessibility/accessibility_model.dart';
-import 'package:settings/view/widgets/settings_row.dart';
-import 'package:settings/view/widgets/settings_section.dart';
-import 'package:settings/view/widgets/slider_settings_row.dart';
-import 'package:settings/view/widgets/slider_settings_secondary.dart';
-import 'package:settings/view/widgets/switch_settings_row.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
 import 'package:yaru_icons/widgets/yaru_icons.dart';
 
 class PointingAndClickingSection extends StatelessWidget {
@@ -14,21 +11,21 @@ class PointingAndClickingSection extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final model = Provider.of<AccessibilityModel>(context);
-    return SettingsSection(
+    return YaruSection(
       headline: 'Pointing & Clicking',
       children: [
-        SwitchSettingsRow(
+        YaruSwitchRow(
           trailingWidget: const Text('Mouse Keys'),
           value: model.mouseKeys,
           onChanged: (value) => model.setMouseKeys(value),
         ),
-        SwitchSettingsRow(
+        YaruSwitchRow(
           trailingWidget: const Text('Locate Pointer'),
           value: model.locatePointer,
           onChanged: (value) => model.setLocatePointer(value),
         ),
         const _ClickAssist(),
-        SliderSettingsRow(
+        YaruSliderRow(
           actionLabel: 'Double-Click Delay',
           value: model.doubleClickDelay,
           min: 100,
@@ -47,7 +44,7 @@ class _ClickAssist extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final model = Provider.of<AccessibilityModel>(context);
-    return SettingsRow(
+    return YaruRow(
       trailingWidget: const Text('Click Assist'),
       actionWidget: Row(
         children: [
@@ -84,7 +81,7 @@ class _ClickAssistSettings extends StatelessWidget {
       title: const Center(child: Text('Click Assist')),
       contentPadding: const EdgeInsets.all(8.0),
       children: [
-        SwitchSettingsRow(
+        YaruSwitchRow(
           trailingWidget: const Text('Simulated Secondary Click'),
           actionDescription:
               'Trigger a secondary click by holding down the primary button.',
@@ -93,7 +90,7 @@ class _ClickAssistSettings extends StatelessWidget {
         ),
         Padding(
           padding: const EdgeInsets.symmetric(horizontal: 16.0),
-          child: SliderSettingsSecondary(
+          child: YaruSliderSecondary(
             label: 'Delay',
             enabled: model.simulatedSecondaryClick,
             value: model.secondaryClickTime,
@@ -104,7 +101,7 @@ class _ClickAssistSettings extends StatelessWidget {
             onChanged: (value) => model.setSecondaryClickTime(value),
           ),
         ),
-        SwitchSettingsRow(
+        YaruSwitchRow(
           trailingWidget: const Text('Hover Click'),
           actionDescription: 'Trigger a click when the pointer hovers',
           value: model.dwellClick,
@@ -114,7 +111,7 @@ class _ClickAssistSettings extends StatelessWidget {
           padding: const EdgeInsets.symmetric(horizontal: 16.0),
           child: Column(
             children: [
-              SliderSettingsSecondary(
+              YaruSliderSecondary(
                 label: 'Delay',
                 enabled: model.dwellClick,
                 min: 0.2,
@@ -124,7 +121,7 @@ class _ClickAssistSettings extends StatelessWidget {
                 fractionDigits: 1,
                 onChanged: (value) => model.setDwellTime(value),
               ),
-              SliderSettingsSecondary(
+              YaruSliderSecondary(
                 label: 'Motion thresshold',
                 enabled: model.dwellClick,
                 min: 0.0,

lib/view/pages/accessibility/hearing_section.dart

@@ -1,12 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:settings/view/pages/accessibility/accessibility_model.dart';
-import 'package:settings/view/widgets/checkbox_row.dart';
-import 'package:settings/view/widgets/extra_options_gsettings_row.dart';
-import 'package:settings/view/widgets/settings_row.dart';
-import 'package:settings/view/widgets/settings_section.dart';
-import 'package:settings/view/widgets/slider_settings_secondary.dart';
-import 'package:settings/view/widgets/switch_settings_row.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
 import 'package:yaru_icons/widgets/yaru_icons.dart';
 
 class SeeingSection extends StatelessWidget {
@@ -15,21 +11,22 @@ class SeeingSection extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final model = Provider.of<AccessibilityModel>(context);
-    return SettingsSection(
+    return YaruSection(
       headline: 'Seeing',
       children: [
-        SwitchSettingsRow(
+        YaruSwitchRow(
           trailingWidget: const Text('High Contrast'),
           value: model.highContrast,
           onChanged: (value) => model.setHighContrast(value),
         ),
-        SwitchSettingsRow(
+        YaruSwitchRow(
           trailingWidget: const Text('Large Text'),
           value: model.largeText,
           onChanged: (value) => model.setLargeText(value),
         ),
         const _CursorSize(),
-        ExtraOptionsGsettingsRow(
+        YaruExtraOptionRow(
+          iconData: YaruIcons.settings,
           actionLabel: 'Zoom',
           value: model.zoom,
           onChanged: (value) => model.setZoom(value),
@@ -41,14 +38,14 @@ class SeeingSection extends StatelessWidget {
             ),
           ),
         ),
-        SwitchSettingsRow(
+        YaruSwitchRow(
           trailingWidget: const Text('Screen Reader'),
           actionDescription:
               'The screen reader reads displayed text as you move the focus',
           value: model.screenReader,
           onChanged: (value) => model.setScreenReader(value),
         ),
-        SwitchSettingsRow(
+        YaruSwitchRow(
           trailingWidget: const Text('Sound Keys'),
           actionDescription:
               'Beep when Num Lock or Caps Lock are turned on or off',
@@ -66,7 +63,7 @@ class _CursorSize extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final model = Provider.of<AccessibilityModel>(context);
-    return SettingsRow(
+    return YaruRow(
       trailingWidget: const Text('Cursor Size'),
       description: 'Cursor size can be combined with zoom '
           'to make it easier to see the cursor',
@@ -212,7 +209,7 @@ class _MagnifierOptions extends StatelessWidget {
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          SliderSettingsSecondary(
+          YaruSliderSecondary(
             // TODO it'd be better to use SpinBox instead of Slider
             label: 'Magnification',
             enabled: true,
@@ -283,7 +280,7 @@ class _MagnifierPositionOptions extends StatelessWidget {
           padding: const EdgeInsets.symmetric(horizontal: 16.0),
           child: Column(
             children: [
-              CheckboxRow(
+              YaruCheckboxRow(
                 enabled: model.screenPartEnabled,
                 value: model.scrollAtEdges,
                 onChanged: (value) => model.setScrollAtEdges(value!),
@@ -378,19 +375,19 @@ class _CrosshairsOptions extends StatelessWidget {
       padding: const EdgeInsets.only(left: 16.0, right: 16.0, bottom: 16.0),
       child: Column(
         children: [
-          CheckboxRow(
+          YaruCheckboxRow(
             enabled: true,
             value: model.crossHairs,
             onChanged: (value) => model.setCrossHairs(value!),
             text: 'Visible',
           ),
-          CheckboxRow(
+          YaruCheckboxRow(
             enabled: true,
             value: model.crossHairsClip,
             onChanged: (value) => model.setCrossHairsClip(value!),
             text: 'Overlaps mouse cursor',
           ),
-          SliderSettingsSecondary(
+          YaruSliderSecondary(
             label: 'Thickness',
             enabled: true,
             showValue: false,
@@ -400,7 +397,7 @@ class _CrosshairsOptions extends StatelessWidget {
             value: model.crossHairsThickness,
             onChanged: (value) => model.setCrossHairsThickness(value),
           ),
-          SliderSettingsSecondary(
+          YaruSliderSecondary(
             label: 'Length',
             enabled: true,
             showValue: false,
@@ -439,13 +436,13 @@ class _ColorEffectsOptions extends StatelessWidget {
       padding: const EdgeInsets.only(left: 16.0, right: 16.0, bottom: 16.0),
       child: Column(
         children: [
-          CheckboxRow(
+          YaruCheckboxRow(
             enabled: true,
             value: model.inverseLightness,
             onChanged: (value) => model.setInverseLightness(value!),
             text: 'White on black',
           ),
-          SliderSettingsSecondary(
+          YaruSliderSecondary(
             label: 'Brightness',
             enabled: true,
             showValue: false,
@@ -455,7 +452,7 @@ class _ColorEffectsOptions extends StatelessWidget {
             value: model.colorBrightness,
             onChanged: (value) => model.setColorBrightness(value),
           ),
-          SliderSettingsSecondary(
+          YaruSliderSecondary(
             label: 'Contrast',
             enabled: true,
             showValue: false,
@@ -465,7 +462,7 @@ class _ColorEffectsOptions extends StatelessWidget {
             value: model.colorContrast,
             onChanged: (value) => model.setColorContrast(value),
           ),
-          SliderSettingsSecondary(
+          YaruSliderSecondary(
             label: 'Saturation',
             enabled: true,
             showValue: false,