[Presentation] Updated the accent color grid

Wolfteam · Jul 12, 2021 · 5dad0d3 · 5dad0d3
1 parent b2fffd7
commit 5dad0d3
Showing 1 changed file with 33 additions and 25 deletions.
diff --git a/lib/presentation/settings/widgets/accent_color_settings_card.dart b/lib/presentation/settings/widgets/accent_color_settings_card.dart
@@ -5,6 +5,8 @@ import 'package:genshindb/domain/enums/enums.dart';
 import 'package:genshindb/generated/l10n.dart';
 import 'package:genshindb/presentation/shared/extensions/app_theme_type_extensions.dart';
 import 'package:genshindb/presentation/shared/loading.dart';
+import 'package:genshindb/presentation/shared/styles.dart';
+import 'package:responsive_grid/responsive_grid.dart';
 
 import 'settings_card.dart';
 
@@ -36,31 +38,16 @@ class AccentColorSettingsCard extends StatelessWidget {
             ),
           ),
           BlocBuilder<SettingsBloc, SettingsState>(
-            builder: (context, state) {
-              return state.map(
-                loading: (_) => const Loading(useScaffold: false),
-                loaded: (s) => GridView.count(
-                  shrinkWrap: true,
-                  primary: false,
-                  padding: const EdgeInsets.all(20),
-                  crossAxisSpacing: 10,
-                  mainAxisSpacing: 10,
-                  crossAxisCount: 5,
-                  children: AppAccentColorType.values.map((accentColor) {
-                    final color = accentColor.getAccentColor();
-
-                    return InkWell(
-                      onTap: () => _accentColorChanged(accentColor, context),
-                      child: Container(
-                        padding: const EdgeInsets.all(8),
-                        color: color,
-                        child: s.currentAccentColor == accentColor ? const Icon(Icons.check, color: Colors.white) : null,
-                      ),
-                    );
-                  }).toList(),
-                ),
-              );
-            },
+            builder: (context, state) => state.map(
+              loading: (_) => const Loading(useScaffold: false),
+              loaded: (s) => ResponsiveGridRow(
+                children: AppAccentColorType.values
+                    .map(
+                      (accentColor) => _buildAccentColorItem(accentColor, s.currentAccentColor, context),
+                    )
+                    .toList(),
+              ),
+            ),
           ),
         ],
       ),
@@ -70,4 +57,25 @@ class AccentColorSettingsCard extends StatelessWidget {
   void _accentColorChanged(AppAccentColorType newValue, BuildContext context) {
     context.read<SettingsBloc>().add(SettingsEvent.accentColorChanged(newValue: newValue));
   }
+
+  ResponsiveGridCol _buildAccentColorItem(AppAccentColorType current, AppAccentColorType selected, BuildContext context) {
+    return ResponsiveGridCol(
+      xs: 2,
+      sm: 2,
+      md: 1,
+      lg: 1,
+      xl: 1,
+      child: InkWell(
+        onTap: () => _accentColorChanged(current, context),
+        child: Container(
+          width: 50,
+          height: 50,
+          padding: Styles.edgeInsetAll10,
+          margin: Styles.edgeInsetAll5,
+          color: current.getAccentColor(),
+          child: selected == current ? const Icon(Icons.check, color: Colors.white) : null,
+        ),
+      ),
+    );
+  }
 }