#359: fixed selector screens

icapps · Oct 18, 2024 · e3fb018 · e3fb018
1 parent baf9ef4
commit e3fb018
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 47 deletions.
diff --git a/lib/screen/debug/debug_platform_selector_screen.dart b/lib/screen/debug/debug_platform_selector_screen.dart
@@ -29,11 +29,13 @@ class DebugPlatformSelectorScreenState extends State<DebugPlatformSelectorScreen
             onClick: viewModel.setSelectedPlatformToDefault,
             selected: viewModel.selectedPlatform == null,
           ),
+          const SizedBox(height: 8),
           SelectorItem(
             title: localization.generalLabelAndroid,
             onClick: viewModel.setSelectedPlatformToAndroid,
             selected: viewModel.selectedPlatform == TargetPlatform.android,
           ),
+          const SizedBox(height: 8),
           SelectorItem(
             title: localization.generalLabelIos,
             onClick: viewModel.setSelectedPlatformToIOS,

diff --git a/lib/screen/debug/debug_screen.dart b/lib/screen/debug/debug_screen.dart
@@ -28,7 +28,7 @@ class DebugScreenState extends State<DebugScreen> {
       create: () => getIt()..init(),
       consumerWithThemeAndLocalization: (context, viewModel, child, theme, localization) => BaseScreen(
         title: localization.settingsTitle,
-        padding: const EdgeInsets.symmetric(horizontal: 24),
+        padding: const EdgeInsets.all(24),
         isScrollable: true,
         children: [
           DebugSection(

diff --git a/lib/screen/theme_mode/theme_mode_selector.dart b/lib/screen/theme_mode/theme_mode_selector.dart
@@ -1,10 +1,9 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_navigation_generator_annotations/flutter_navigation_generator_annotations.dart';
 import 'package:flutter_template/di/injectable.dart';
 import 'package:flutter_template/viewmodel/debug/debug_theme_selector_viewmodel.dart';
 import 'package:flutter_template/widget/debug/selector_item.dart';
-import 'package:flutter_template/widget/general/styled/flutter_template_back_button.dart';
+import 'package:flutter_template/widget/general/simple_screen/base_screen.dart';
 import 'package:flutter_template/widget/provider/provider_widget.dart';
 
 @flutterRoute
@@ -21,33 +20,28 @@ class ThemeModeSelectorScreenState extends State<ThemeModeSelectorScreen> {
   Widget build(BuildContext context) {
     return ProviderWidget<DebugThemeSelectorViewModel>(
       create: getIt.call,
-      childBuilderWithViewModel: (context, viewModel, theme, localization) => Scaffold(
-        backgroundColor: theme.background,
-        appBar: AppBar(
-          systemOverlayStyle: SystemUiOverlayStyle.light,
-          leading: FlutterTemplateBackButton.light(onClick: viewModel.onBackClicked),
-          title: const Text('Select a theme mode'),
-          backgroundColor: theme.primary,
-        ),
-        body: ListView(
-          children: [
-            SelectorItem(
-              title: localization.generalLabelSystemDefault,
-              onClick: () => viewModel.updateThemeMode(ThemeMode.system),
-              selected: viewModel.themeMode == ThemeMode.system,
-            ),
-            SelectorItem(
-              title: localization.themeModeLabelLight,
-              onClick: () => viewModel.updateThemeMode(ThemeMode.light),
-              selected: viewModel.themeMode == ThemeMode.light,
-            ),
-            SelectorItem(
-              title: localization.themeModeLabelDark,
-              onClick: () => viewModel.updateThemeMode(ThemeMode.dark),
-              selected: viewModel.themeMode == ThemeMode.dark,
-            ),
-          ],
-        ),
+      childBuilderWithViewModel: (context, viewModel, theme, localization) => BaseScreen(
+        title: 'Select a theme mode',
+        isScrollable: true,
+        children: [
+          SelectorItem(
+            title: localization.generalLabelSystemDefault,
+            onClick: () => viewModel.updateThemeMode(ThemeMode.system),
+            selected: viewModel.themeMode == ThemeMode.system,
+          ),
+          const SizedBox(height: 8),
+          SelectorItem(
+            title: localization.themeModeLabelLight,
+            onClick: () => viewModel.updateThemeMode(ThemeMode.light),
+            selected: viewModel.themeMode == ThemeMode.light,
+          ),
+          const SizedBox(height: 8),
+          SelectorItem(
+            title: localization.themeModeLabelDark,
+            onClick: () => viewModel.updateThemeMode(ThemeMode.dark),
+            selected: viewModel.themeMode == ThemeMode.dark,
+          ),
+        ],
       ),
     );
   }

diff --git a/lib/widget/debug/selector_item.dart b/lib/widget/debug/selector_item.dart
@@ -22,24 +22,35 @@ class SelectorItem extends StatelessWidget {
     return DataProviderWidget(
       childBuilderTheme: (context, theme) => TouchFeedBack(
         onTapped: onClick,
-        child: Padding(
-          padding: const EdgeInsets.all(16),
-          child: Row(
-            children: [
-              Expanded(
-                child: Text(
-                  title,
-                  style: theme.text.bodyNormal,
+        borderRadius: BorderRadius.circular(12),
+        child: Container(
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(12),
+            color: selected ? theme.fillInformative : theme.inverseBackground,
+            border: Border.all(
+              color: selected ? theme.accent : theme.inverseBackground,
+              width: 1,
+            ),
+          ),
+          child: Padding(
+            padding: const EdgeInsets.all(16),
+            child: Row(
+              children: [
+                Expanded(
+                  child: Text(
+                    title,
+                    style: theme.text.bodyNormal,
+                  ),
                 ),
-              ),
-              Opacity(
-                opacity: selected ? 1 : 0,
-                child: SvgIcon(
-                  svgAsset: ThemeAssets.checkIcon,
-                  color: theme.accent,
+                Opacity(
+                  opacity: selected ? 1 : 0,
+                  child: SvgIcon(
+                    svgAsset: ThemeAssets.checkIcon,
+                    color: theme.accent,
+                  ),
                 ),
-              ),
-            ],
+              ],
+            ),
           ),
         ),
       ),

diff --git a/lib/widget/general/simple_screen/base_screen_header.dart b/lib/widget/general/simple_screen/base_screen_header.dart
@@ -25,7 +25,7 @@ class BaseScreenHeader extends StatelessWidget {
       childBuilder: (context, theme, localization) {
         final leading = [
           if (ModalRoute.of(context)?.impliesAppBarDismissal ?? false) ...[
-            FlutterTemplateBackButton.light(onClick: onBackTapped ?? Navigator.of(context).pop),
+            FlutterTemplateBackButton.dark(onClick: onBackTapped ?? Navigator.of(context).pop),
             const SizedBox(width: 24),
           ],
         ];