Make settings route responsive

lib/ui/routes/settings/account_image_settings.dart

@@ -16,25 +16,14 @@ import 'package:settings_ui/settings_ui.dart';
 ///
 /// @author Pierre Hubert
 
-class AccountImageSettingsScreen extends StatelessWidget {
+class AccountImageSettingsScreen extends StatefulWidget {
   @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(tr("Account image settings")),
-      ),
-      body: _AccountImageSettingsBody(),
-    );
-  }
+  _AccountImageSettingsScreenState createState() =>
+      _AccountImageSettingsScreenState();
 }
 
-class _AccountImageSettingsBody extends StatefulWidget {
-  @override
-  __AccountImageSettingsBodyState createState() =>
-      __AccountImageSettingsBodyState();
-}
-
-class __AccountImageSettingsBodyState extends State<_AccountImageSettingsBody> {
+class _AccountImageSettingsScreenState
+    extends State<AccountImageSettingsScreen> {
   AccountImageSettings _settings;
 
   final _key = GlobalKey<AsyncScreenWidgetState>();

lib/ui/routes/settings/account_privacy_settings.dart

@@ -10,22 +10,12 @@ import 'package:settings_ui/settings_ui.dart';
 ///
 /// @author Pierre HUBERT
 
-class AccountPrivacySettings extends StatelessWidget {
+class AccountPrivacySettings extends StatefulWidget {
   @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(title: Text(tr("Privacy settings"))),
-      body: _AccountPrivacyScreen(),
-    );
-  }
+  _AccountPrivacySettingsState createState() => _AccountPrivacySettingsState();
 }
 
-class _AccountPrivacyScreen extends StatefulWidget {
-  @override
-  __AccountPrivacyScreenState createState() => __AccountPrivacyScreenState();
-}
-
-class __AccountPrivacyScreenState extends State<_AccountPrivacyScreen> {
+class _AccountPrivacySettingsState extends State<AccountPrivacySettings> {
   @override
   Widget build(BuildContext context) {
     return SettingsList(sections: [

lib/ui/routes/settings/account_security_settings.dart

@@ -13,26 +13,14 @@ import 'package:settings_ui/settings_ui.dart';
 ///
 /// @author Pierre HUBERT
 
-class AccountSecuritySettingsScreen extends StatelessWidget {
+class AccountSecuritySettingsScreen extends StatefulWidget {
   @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(tr("Security settings")),
-      ),
-      body: _AccountSecuritySettingsScreenBody(),
-    );
-  }
+  _AccountSecuritySettingsScreenState createState() =>
+      _AccountSecuritySettingsScreenState();
 }
 
-class _AccountSecuritySettingsScreenBody extends StatefulWidget {
-  @override
-  __AccountSecuritySettingsScreenBodyState createState() =>
-      __AccountSecuritySettingsScreenBodyState();
-}
-
-class __AccountSecuritySettingsScreenBodyState
-    extends State<_AccountSecuritySettingsScreenBody> {
+class _AccountSecuritySettingsScreenState
+    extends State<AccountSecuritySettingsScreen> {
   @override
   Widget build(BuildContext context) {
     return SettingsList(

lib/ui/routes/settings/account_settings_route.dart

@@ -5,6 +5,7 @@ import 'package:comunic/ui/routes/settings/application_settings.dart';
 import 'package:comunic/ui/routes/settings/custom_emojies_account_settings.dart';
 import 'package:comunic/ui/routes/settings/general_account_settings.dart';
 import 'package:comunic/utils/intl_utils.dart';
+import 'package:comunic/utils/ui_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:settings_ui/settings_ui.dart';
 
@@ -12,6 +13,23 @@ import 'package:settings_ui/settings_ui.dart';
 ///
 /// @author Pierre HUBERT
 
+class _SettingsSection {
+  final String title;
+  final String subtitle;
+  final IconData icon;
+  final Widget Function() onBuild;
+
+  const _SettingsSection({
+    @required this.title,
+    @required this.subtitle,
+    @required this.icon,
+    @required this.onBuild,
+  })  : assert(title != null),
+        assert(subtitle != null),
+        assert(icon != null),
+        assert(onBuild != null);
+}
+
 class AccountSettingsRoute extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
@@ -30,68 +48,126 @@ class _AccountSettingsBody extends StatefulWidget {
 }
 
 class __AccountSettingsBodyState extends State<_AccountSettingsBody> {
+  _SettingsSection _currentSection;
+
   @override
-  Widget build(BuildContext context) {
-    return SettingsList(
-      sections: [
-        SettingsSection(
-          title: tr("Account settings"),
-          tiles: [
-            // General settings
-            SettingsTile(
+  void initState() {
+    super.initState();
+
+    /// Choose first section by default
+    _currentSection = _sections[0];
+  }
+
+  /// The list of settings sections
+  List<_SettingsSection> get _sections => [
+        _SettingsSection(
           title: tr("General settings"),
           subtitle: tr("Configure the main settings of your account"),
-              leading: Icon(Icons.settings),
-              onTap: () => _openSection(GeneralAccountSettingsScreen()),
+          icon: Icons.settings,
+          onBuild: () => GeneralAccountSettingsScreen(),
         ),
 
         // Emoticons
-            SettingsTile(
+        _SettingsSection(
           title: tr("Custom emojis"),
           subtitle: tr("Set your own emoticon shorcuts"),
-              leading: Icon(Icons.insert_emoticon),
-              onTap: () => _openSection(CustomEmojisAccountSettings()),
+          icon: Icons.insert_emoticon,
+          onBuild: () => CustomEmojisAccountSettings(),
         ),
 
         // Account image
-            SettingsTile(
+        _SettingsSection(
           title: tr("Account image"),
           subtitle: tr("Customize your account image"),
-              leading: Icon(Icons.account_circle),
-              onTap: () => _openSection(AccountImageSettingsScreen()),
+          icon: Icons.account_circle,
+          onBuild: () => AccountImageSettingsScreen(),
         ),
 
         // Security settings
-            SettingsTile(
+        _SettingsSection(
           title: tr("Security"),
           subtitle: tr("Manage security options of your account"),
-              leading: Icon(Icons.lock),
-              onTap: () => _openSection(AccountSecuritySettingsScreen()),
+          icon: Icons.lock,
+          onBuild: () => AccountSecuritySettingsScreen(),
         ),
 
         // Privacy settings
-            SettingsTile(
+        _SettingsSection(
           title: tr("Privacy"),
           subtitle: tr("Here you can make actions to protect your privacy"),
-              leading: Icon(Icons.security),
-              onTap: () => _openSection(AccountPrivacySettings()),
+          icon: Icons.security,
+          onBuild: () => AccountPrivacySettings(),
         ),
 
         // Privacy settings
-            SettingsTile(
+        _SettingsSection(
           title: tr("Application settings"),
           subtitle: tr("Manage local application settings"),
-              leading: Icon(Icons.smartphone),
-              onTap: () => _openSection(ApplicationSettings()),
+          icon: Icons.smartphone,
+          onBuild: () => ApplicationSettings(),
         ),
+      ];
+
+  @override
+  Widget build(BuildContext context) =>
+      isTablet(context) ? _buildTabletMode() : _buildMobileMode();
+
+  /// Tablet mode
+  Widget _buildTabletMode() => Row(
+        children: <Widget>[
+          Container(width: 400, child: _buildTabletLeftPane()),
+          Expanded(child: _currentSection.onBuild())
         ],
+      );
+
+  Widget _buildTabletLeftPane() => ListView.builder(
+        itemBuilder: (c, i) {
+          final section = _sections[i];
+
+          return Container(
+            color: section.title == _currentSection.title
+                ? Colors.black.withAlpha(50)
+                : null,
+            child: ListTile(
+              title: Text(section.title),
+              subtitle: Text(section.subtitle),
+              leading: Icon(section.icon),
+              onTap: () => _openSectionTablet(section),
+            ),
+          );
+        },
+        itemCount: _sections.length,
+      );
+
+  void _openSectionTablet(_SettingsSection s) =>
+      setState(() => _currentSection = s);
+
+  /// Mobile mode
+  Widget _buildMobileMode() => SettingsList(
+        sections: [
+          SettingsSection(
+            title: tr("Settings"),
+            tiles: _sections
+                .map((f) => SettingsTile(
+                      title: f.title,
+                      leading: Icon(f.icon),
+                      subtitle: f.subtitle,
+                      onTap: () => _openSectionsAsNewRoute(f),
+                    ))
+                .toList(),
           )
         ],
       );
-  }
 
-  /// Open a settings setings
-  void _openSection(Widget w) {
-    Navigator.of(context).push(MaterialPageRoute(builder: (c) => w));
+  /// Push a new route with the settings section
+  _openSectionsAsNewRoute(_SettingsSection f) {
+    Navigator.of(context).push(MaterialPageRoute(
+      builder: (c) => Scaffold(
+        appBar: AppBar(
+          title: Text(f.title),
+        ),
+        body: f.onBuild(),
+      ),
+    ));
   }
 }

lib/ui/routes/settings/application_settings.dart

@@ -9,24 +9,14 @@ import 'package:settings_ui/settings_ui.dart';
 ///
 /// @author Pierre Hubert
 
-class ApplicationSettings extends StatelessWidget {
+class ApplicationSettings extends StatefulWidget {
   @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(title: Text(tr("Application settings"))),
-      body: _ApplicationSettingsScreen(),
-    );
-  }
+  _ApplicationSettingsState createState() =>
+      _ApplicationSettingsState();
 }
 
-class _ApplicationSettingsScreen extends StatefulWidget {
-  @override
-  __ApplicationSettingsScreenState createState() =>
-      __ApplicationSettingsScreenState();
-}
-
-class __ApplicationSettingsScreenState
-    extends State<_ApplicationSettingsScreen> {
+class _ApplicationSettingsState
+    extends State<ApplicationSettings> {
   PreferencesHelper _preferencesHelper;
 
   Future<void> _refresh() async {

lib/ui/routes/settings/custom_emojies_account_settings.dart

@@ -19,25 +19,14 @@ import 'package:flutter/material.dart';
 ///
 /// @author Pierre Hubert
 
-class CustomEmojisAccountSettings extends StatelessWidget {
+class CustomEmojisAccountSettings extends StatefulWidget {
   @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(tr("Custom emojies settings")),
-      ),
-      body: _CustomEmojiesAccountBody(),
-    );
-  }
+  _CustomEmojisAccountSettingsState createState() =>
+      _CustomEmojisAccountSettingsState();
 }
 
-class _CustomEmojiesAccountBody extends StatefulWidget {
-  @override
-  _CustomEmojiesAccountBodyState createState() =>
-      _CustomEmojiesAccountBodyState();
-}
-
-class _CustomEmojiesAccountBodyState extends State<_CustomEmojiesAccountBody> {
+class _CustomEmojisAccountSettingsState
+    extends State<CustomEmojisAccountSettings> {
   User _user;
 
   final _key = GlobalKey<AsyncScreenWidgetState>();

lib/ui/routes/settings/general_account_settings.dart

@@ -18,26 +18,14 @@ import 'package:settings_ui/settings_ui.dart';
 ///
 /// @author Pierre HUBERT
 
-class GeneralAccountSettingsScreen extends StatelessWidget {
+class GeneralAccountSettingsScreen extends StatefulWidget {
   @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text("General settings"),
-      ),
-      body: _GeneralAccountSettingsBody(),
-    );
-  }
+  _GeneralAccountSettingsScreenState createState() =>
+      _GeneralAccountSettingsScreenState();
 }
 
-class _GeneralAccountSettingsBody extends StatefulWidget {
-  @override
-  __GeneralAccountSettingsBodyState createState() =>
-      __GeneralAccountSettingsBodyState();
-}
-
-class __GeneralAccountSettingsBodyState
-    extends State<_GeneralAccountSettingsBody> {
+class _GeneralAccountSettingsScreenState
+    extends State<GeneralAccountSettingsScreen> {
   GeneralSettings _settings;
 
   final _key = GlobalKey<AsyncScreenWidgetState>();