chore: make dropdown buttons more attractive

KRTirtho · Apr 8, 2024 · de68fe3 · de68fe3
1 parent 0d080b7
commit de68fe3
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 8 deletions.
diff --git a/lib/components/shared/adaptive/adaptive_select_tile.dart b/lib/components/shared/adaptive/adaptive_select_tile.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/extensions/constrains.dart';
 
 class AdaptiveSelectTile<T> extends HookWidget {
@@ -38,11 +39,22 @@ class AdaptiveSelectTile<T> extends HookWidget {
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     final mediaQuery = MediaQuery.of(context);
-    final rawControl = DropdownButton<T>(
-      items: options,
-      value: value,
-      onChanged: onChanged,
-      menuMaxHeight: mediaQuery.size.height * 0.6,
+    final rawControl = DecoratedBox(
+      decoration: BoxDecoration(
+        color: theme.colorScheme.secondaryContainer,
+        borderRadius: BorderRadius.circular(10),
+      ),
+      child: DropdownButton<T>(
+        items: options,
+        value: value,
+        onChanged: onChanged,
+        menuMaxHeight: mediaQuery.size.height * 0.6,
+        underline: const SizedBox.shrink(),
+        padding: const EdgeInsets.symmetric(horizontal: 10),
+        borderRadius: BorderRadius.circular(10),
+        icon: const Icon(SpotubeIcons.angleDown),
+        dropdownColor: theme.colorScheme.secondaryContainer,
+      ),
     );
     final controlPlaceholder = useMemoized(
         () => options

diff --git a/lib/pages/settings/sections/desktop.dart b/lib/pages/settings/sections/desktop.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
+import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/settings/section_card_with_heading.dart';
@@ -19,6 +20,7 @@ class SettingsDesktopSection extends HookConsumerWidget {
     return SectionCardWithHeading(
       heading: context.l10n.desktop,
       children: [
+        const Gap(10),
         AdaptiveSelectTile<CloseBehavior>(
           secondary: const Icon(SpotubeIcons.close),
           title: Text(context.l10n.close_behavior),

diff --git a/lib/pages/settings/sections/language_region.dart b/lib/pages/settings/sections/language_region.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/collections/language_codes.dart';
@@ -23,6 +24,7 @@ class SettingsLanguageRegionSection extends HookConsumerWidget {
     return SectionCardWithHeading(
       heading: context.l10n.language_region,
       children: [
+        const Gap(10),
         AdaptiveSelectTile<Locale>(
           value: preferences.locale,
           onChanged: (locale) {

diff --git a/lib/pages/settings/sections/playback.dart b/lib/pages/settings/sections/playback.dart
@@ -1,5 +1,6 @@
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
 import 'package:go_router/go_router.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -25,6 +26,7 @@ class SettingsPlaybackSection extends HookConsumerWidget {
     return SectionCardWithHeading(
       heading: context.l10n.playback,
       children: [
+        const Gap(10),
         AdaptiveSelectTile<SourceQualities>(
           secondary: const Icon(SpotubeIcons.audioQuality),
           title: Text(context.l10n.audio_quality),
@@ -49,6 +51,7 @@ class SettingsPlaybackSection extends HookConsumerWidget {
             }
           },
         ),
+        const Gap(5),
         AdaptiveSelectTile<AudioSource>(
           secondary: const Icon(SpotubeIcons.api),
           title: Text(context.l10n.audio_source),
@@ -181,7 +184,8 @@ class SettingsPlaybackSection extends HookConsumerWidget {
           value: preferences.normalizeAudio,
           onChanged: preferencesNotifier.setNormalizeAudio,
         ),
-        if (preferences.audioSource != AudioSource.jiosaavn)
+        if (preferences.audioSource != AudioSource.jiosaavn) ...[
+          const Gap(5),
           AdaptiveSelectTile<SourceCodecs>(
             secondary: const Icon(SpotubeIcons.stream),
             title: Text(context.l10n.streaming_music_codec),
@@ -201,7 +205,7 @@ class SettingsPlaybackSection extends HookConsumerWidget {
               preferencesNotifier.setStreamMusicCodec(value);
             },
           ),
-        if (preferences.audioSource != AudioSource.jiosaavn)
+          const Gap(5),
           AdaptiveSelectTile<SourceCodecs>(
             secondary: const Icon(SpotubeIcons.file),
             title: Text(context.l10n.download_music_codec),
@@ -220,7 +224,8 @@ class SettingsPlaybackSection extends HookConsumerWidget {
               if (value == null) return;
               preferencesNotifier.setDownloadMusicCodec(value);
             },
-          ),
+          )
+        ],
         SwitchListTile(
           secondary: const Icon(SpotubeIcons.repeat),
           title: Text(context.l10n.endless_playback),