[Presentation] Changed the accent color widget to a list

Wolfteam · Sep 7, 2022 · e78551e · e78551e
1 parent 7e0654f
commit e78551e
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 28 deletions.
diff --git a/CastIt.Android/lib/domain/extensions/string_extensions.dart b/CastIt.Android/lib/domain/extensions/string_extensions.dart
@@ -9,4 +9,10 @@ extension StringExtensions on String? {
 
   bool isLengthValid({int minLength = 0, int maxLength = 255}) =>
       this == null || this!.trim().isEmpty || this!.length > maxLength || this!.length < minLength;
+
+  String toCapitalized() => this == null
+      ? ''
+      : this!.isNotEmpty
+          ? '${this![0].toUpperCase()}${this!.substring(1).toLowerCase()}'
+          : '';
 }
diff --git a/CastIt.Android/lib/presentation/settings/widgets/accent_color_settings_card.dart b/CastIt.Android/lib/presentation/settings/widgets/accent_color_settings_card.dart
@@ -1,8 +1,11 @@
 import 'package:castit/application/bloc.dart';
 import 'package:castit/domain/enums/enums.dart';
+import 'package:castit/domain/extensions/string_extensions.dart';
 import 'package:castit/generated/l10n.dart';
 import 'package:castit/presentation/settings/widgets/settings_card.dart';
+import 'package:castit/presentation/shared/common_dropdown_button.dart';
 import 'package:castit/presentation/shared/extensions/app_theme_type_extensions.dart';
+import 'package:castit/presentation/shared/utils/enum_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
@@ -14,7 +17,7 @@ class AccentColorSettingsCard extends StatelessWidget {
     final i18n = S.of(context);
     return SettingsCard(
       child: Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
           Row(
             children: <Widget>[
@@ -37,14 +40,22 @@ class AccentColorSettingsCard extends StatelessWidget {
           ),
           BlocBuilder<SettingsBloc, SettingsState>(
             builder: (context, state) => state.maybeMap(
-              loaded: (state) => GridView.count(
-                shrinkWrap: true,
-                primary: false,
-                padding: const EdgeInsets.all(20),
-                crossAxisSpacing: 10,
-                mainAxisSpacing: 10,
-                crossAxisCount: 5,
-                children: AppAccentColorType.values.map((val) => _AccentColorCell(value: val, isSelected: state.accentColor == val)).toList(),
+              loaded: (state) => CommonDropdownButton<AppAccentColorType>(
+                hint: i18n.chooseAccentColor,
+                showSubTitle: false,
+                values: AppAccentColorType.values.map((e) => TranslatedEnum(e, _formatEnumName(e))).toList()
+                  ..sort((x, y) => x.translation.compareTo(y.translation)),
+                leadingIconBuilder: (val) => Container(
+                  margin: const EdgeInsets.only(right: 10),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(10),
+                    color: val.getAccentColor(),
+                  ),
+                  width: 20,
+                  height: 20,
+                ),
+                currentValue: state.accentColor,
+                onChanged: (newValue, _) => _accentColorChanged(context, newValue),
               ),
               orElse: () => const CircularProgressIndicator(),
             ),
@@ -53,25 +64,11 @@ class AccentColorSettingsCard extends StatelessWidget {
       ),
     );
   }
-}
-
-class _AccentColorCell extends StatelessWidget {
-  final AppAccentColorType value;
-  final bool isSelected;
-
-  const _AccentColorCell({required this.value, required this.isSelected});
 
-  @override
-  Widget build(BuildContext context) {
-    final color = value.getAccentColor();
-    return InkWell(
-      onTap: () => _accentColorChanged(context, value),
-      child: Container(
-        padding: const EdgeInsets.all(8),
-        color: color,
-        child: isSelected ? const Icon(Icons.check, color: Colors.white) : null,
-      ),
-    );
+  String _formatEnumName(AppAccentColorType color) {
+    final name = color.name;
+    final words = name.split(RegExp('(?<=[a-z])(?=[A-Z])'));
+    return words.map((e) => e.toCapitalized()).join(' ');
   }
 
   void _accentColorChanged(BuildContext context, AppAccentColorType newValue) {

diff --git a/CastIt.Android/lib/presentation/shared/common_dropdown_button.dart b/CastIt.Android/lib/presentation/shared/common_dropdown_button.dart
@@ -10,6 +10,7 @@ class CommonDropdownButton<T> extends StatelessWidget {
   final bool withoutUnderLine;
   final double minItemHeight;
   final bool showSubTitle;
+  final Widget Function(T)? leadingIconBuilder;
 
   const CommonDropdownButton({
     required this.hint,
@@ -20,6 +21,7 @@ class CommonDropdownButton<T> extends StatelessWidget {
     this.withoutUnderLine = true,
     this.minItemHeight = kMinInteractiveDimension,
     this.showSubTitle = true,
+    this.leadingIconBuilder,
   });
 
   @override
@@ -55,8 +57,9 @@ class CommonDropdownButton<T> extends StatelessWidget {
                 children: [
                   Container(
                     margin: const EdgeInsets.symmetric(horizontal: 20),
-                    child: lang.enumValue != currentValue ? const SizedBox(width: 20) : const Center(child: Icon(Icons.check)),
+                    child: lang.enumValue != currentValue ? const SizedBox(width: 20) : const Center(child: Icon(Icons.check, size: 20)),
                   ),
+                  if (leadingIconBuilder != null) leadingIconBuilder!.call(lang.enumValue),
                   Expanded(
                     child: Text(
                       lang.translation,