mirror of
https://github.com/KRTirtho/spotube.git
synced 2025-09-13 16:05:18 +00:00
feat: color scheme picker dialog vertical list view instead of wrap
This commit is contained in:
parent
62677209a2
commit
bb60b01ef2
@ -16,7 +16,6 @@ final colorsMap = {
|
||||
"Teal": Colors.teal,
|
||||
"Green": Colors.green,
|
||||
"LightGreen": Colors.lightGreen,
|
||||
"Lime": Colors.lime,
|
||||
"Yellow": Colors.yellow,
|
||||
"Amber": Colors.amber,
|
||||
"Orange": Colors.orange,
|
||||
@ -74,25 +73,22 @@ class ColorSchemePickerDialog extends HookConsumerWidget {
|
||||
content: SizedBox(
|
||||
height: 200,
|
||||
width: 400,
|
||||
child: SingleChildScrollView(
|
||||
child: Center(
|
||||
child: Wrap(
|
||||
spacing: 10,
|
||||
runSpacing: 10,
|
||||
children: colorsMap.entries
|
||||
.map(
|
||||
(e) => ColorTile(
|
||||
color: e.value,
|
||||
isActive: active.value == e.key,
|
||||
tooltip: e.key,
|
||||
onPressed: () {
|
||||
active.value = e.key;
|
||||
child: ListView.separated(
|
||||
separatorBuilder: (context, index) {
|
||||
return const SizedBox(height: 10);
|
||||
},
|
||||
itemCount: colorsMap.length,
|
||||
itemBuilder: (context, index) {
|
||||
final color = colorsMap.entries.elementAt(index);
|
||||
return ColorTile(
|
||||
color: color.value,
|
||||
isActive: active.value == color.key,
|
||||
onPressed: () {
|
||||
active.value = color.key;
|
||||
},
|
||||
tooltip: color.key,
|
||||
);
|
||||
},
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
@ -104,32 +100,118 @@ class ColorTile extends StatelessWidget {
|
||||
final bool isActive;
|
||||
final void Function()? onPressed;
|
||||
final String? tooltip;
|
||||
final bool isCompact;
|
||||
const ColorTile({
|
||||
required this.color,
|
||||
this.isActive = false,
|
||||
this.onPressed,
|
||||
this.tooltip = "",
|
||||
this.isCompact = false,
|
||||
Key? key,
|
||||
}) : super(key: key);
|
||||
|
||||
factory ColorTile.compact({
|
||||
required MaterialColor color,
|
||||
bool isActive = false,
|
||||
void Function()? onPressed,
|
||||
String? tooltip = "",
|
||||
Key? key,
|
||||
}) {
|
||||
return ColorTile(
|
||||
color: color,
|
||||
isActive: isActive,
|
||||
onPressed: onPressed,
|
||||
tooltip: tooltip,
|
||||
isCompact: true,
|
||||
key: key,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
|
||||
final lead = Container(
|
||||
height: 40,
|
||||
width: 40,
|
||||
decoration: BoxDecoration(
|
||||
border: isActive
|
||||
? Border.fromBorderSide(
|
||||
BorderSide(
|
||||
color: color[100]!,
|
||||
width: 4,
|
||||
),
|
||||
)
|
||||
: null,
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
color: color,
|
||||
),
|
||||
);
|
||||
|
||||
if (isCompact) {
|
||||
return Tooltip(
|
||||
message: tooltip,
|
||||
child: GestureDetector(
|
||||
onTap: onPressed,
|
||||
child: Container(
|
||||
height: 50,
|
||||
width: 50,
|
||||
decoration: BoxDecoration(
|
||||
border: isActive
|
||||
? const Border.fromBorderSide(
|
||||
BorderSide(color: Colors.black, width: 5),
|
||||
)
|
||||
: null,
|
||||
shape: BoxShape.circle,
|
||||
color: color,
|
||||
child: lead,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
final colorScheme = ColorScheme.fromSwatch(primarySwatch: color);
|
||||
|
||||
final palette = [
|
||||
colorScheme.primary,
|
||||
colorScheme.inversePrimary,
|
||||
colorScheme.primaryContainer,
|
||||
colorScheme.secondary,
|
||||
colorScheme.secondaryContainer,
|
||||
colorScheme.background,
|
||||
colorScheme.surface,
|
||||
colorScheme.surfaceVariant,
|
||||
colorScheme.onPrimary,
|
||||
colorScheme.onSurface,
|
||||
];
|
||||
|
||||
return Tooltip(
|
||||
message: tooltip,
|
||||
child: GestureDetector(
|
||||
onTap: onPressed,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
lead,
|
||||
const SizedBox(width: 10),
|
||||
Text(
|
||||
tooltip!,
|
||||
style: theme.textTheme.bodyLarge?.copyWith(
|
||||
color: theme.colorScheme.primary,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
Wrap(
|
||||
alignment: WrapAlignment.start,
|
||||
spacing: 10,
|
||||
runSpacing: 10,
|
||||
children: [
|
||||
...palette.map(
|
||||
(e) => Container(
|
||||
height: 20,
|
||||
width: 20,
|
||||
decoration: BoxDecoration(
|
||||
color: e,
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
@ -1,4 +1,4 @@
|
||||
import 'package:fl_query/fl_query.dart';
|
||||
import 'package:fl_query_hooks/fl_query_hooks.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
@ -60,6 +60,8 @@ class ArtistPage extends HookConsumerWidget {
|
||||
|
||||
final auth = ref.watch(AuthenticationNotifier.provider);
|
||||
|
||||
final queryClient = useQueryClient();
|
||||
|
||||
return SafeArea(
|
||||
bottom: false,
|
||||
child: Scaffold(
|
||||
@ -172,20 +174,8 @@ class ArtistPage extends HookConsumerWidget {
|
||||
.artist
|
||||
.doIFollow(ref, artistId);
|
||||
|
||||
if (isFollowingQuery.isLoading ||
|
||||
!isFollowingQuery.hasData) {
|
||||
return const SizedBox(
|
||||
height: 20,
|
||||
width: 20,
|
||||
child: CircularProgressIndicator(),
|
||||
);
|
||||
}
|
||||
|
||||
final queryBowl =
|
||||
QueryClient.of(context);
|
||||
|
||||
return FilledButton(
|
||||
onPressed: () async {
|
||||
final followUnfollow =
|
||||
useCallback(() async {
|
||||
try {
|
||||
isFollowingQuery.data!
|
||||
? await spotify.me.unfollow(
|
||||
@ -198,19 +188,35 @@ class ArtistPage extends HookConsumerWidget {
|
||||
);
|
||||
await isFollowingQuery.refresh();
|
||||
|
||||
queryBowl
|
||||
queryClient
|
||||
.refreshInfiniteQueryAllPages(
|
||||
"user-following-artists");
|
||||
} finally {
|
||||
QueryClient.of(context).refreshQuery(
|
||||
"user-follows-artists-query/$artistId");
|
||||
queryClient.refreshQuery(
|
||||
"user-follows-artists-query/$artistId",
|
||||
);
|
||||
}
|
||||
},
|
||||
child: Text(
|
||||
isFollowingQuery.data!
|
||||
? "Following"
|
||||
: "Follow",
|
||||
),
|
||||
}, [isFollowingQuery]);
|
||||
|
||||
if (isFollowingQuery.isLoading ||
|
||||
!isFollowingQuery.hasData) {
|
||||
return const SizedBox(
|
||||
height: 20,
|
||||
width: 20,
|
||||
child: CircularProgressIndicator(),
|
||||
);
|
||||
}
|
||||
|
||||
if (isFollowingQuery.data!) {
|
||||
return OutlinedButton(
|
||||
onPressed: followUnfollow,
|
||||
child: const Text("Following"),
|
||||
);
|
||||
}
|
||||
|
||||
return FilledButton(
|
||||
onPressed: followUnfollow,
|
||||
child: const Text("Follow"),
|
||||
);
|
||||
},
|
||||
),
|
||||
|
@ -67,10 +67,7 @@ class SettingsPage extends HookConsumerWidget {
|
||||
SpotubeIcons.login,
|
||||
color: theme.colorScheme.primary,
|
||||
),
|
||||
title: SizedBox(
|
||||
height: 50,
|
||||
width: 200,
|
||||
child: Align(
|
||||
title: Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: AutoSizeText(
|
||||
"Login with your Spotify account",
|
||||
@ -80,7 +77,6 @@ class SettingsPage extends HookConsumerWidget {
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
trailing: (context, update) => FilledButton(
|
||||
onPressed: () {
|
||||
GoRouter.of(context).push("/login");
|
||||
@ -197,7 +193,7 @@ class SettingsPage extends HookConsumerWidget {
|
||||
horizontal: 15,
|
||||
vertical: 5,
|
||||
),
|
||||
trailing: ColorTile(
|
||||
trailing: ColorTile.compact(
|
||||
color: preferences.accentColorScheme,
|
||||
onPressed: pickColorScheme(ColorSchemeType.accent),
|
||||
isActive: true,
|
||||
|
@ -10,6 +10,7 @@
|
||||
#include <catcher/catcher_plugin.h>
|
||||
#include <metadata_god/metadata_god_plugin.h>
|
||||
#include <screen_retriever/screen_retriever_plugin.h>
|
||||
#include <system_theme/system_theme_plugin.h>
|
||||
#include <url_launcher_linux/url_launcher_plugin.h>
|
||||
#include <window_manager/window_manager_plugin.h>
|
||||
#include <window_size/window_size_plugin.h>
|
||||
@ -27,6 +28,9 @@ void fl_register_plugins(FlPluginRegistry* registry) {
|
||||
g_autoptr(FlPluginRegistrar) screen_retriever_registrar =
|
||||
fl_plugin_registry_get_registrar_for_plugin(registry, "ScreenRetrieverPlugin");
|
||||
screen_retriever_plugin_register_with_registrar(screen_retriever_registrar);
|
||||
g_autoptr(FlPluginRegistrar) system_theme_registrar =
|
||||
fl_plugin_registry_get_registrar_for_plugin(registry, "SystemThemePlugin");
|
||||
system_theme_plugin_register_with_registrar(system_theme_registrar);
|
||||
g_autoptr(FlPluginRegistrar) url_launcher_linux_registrar =
|
||||
fl_plugin_registry_get_registrar_for_plugin(registry, "UrlLauncherPlugin");
|
||||
url_launcher_plugin_register_with_registrar(url_launcher_linux_registrar);
|
||||
|
@ -7,6 +7,7 @@ list(APPEND FLUTTER_PLUGIN_LIST
|
||||
catcher
|
||||
metadata_god
|
||||
screen_retriever
|
||||
system_theme
|
||||
url_launcher_linux
|
||||
window_manager
|
||||
window_size
|
||||
|
@ -16,6 +16,7 @@ import path_provider_foundation
|
||||
import screen_retriever
|
||||
import shared_preferences_foundation
|
||||
import sqflite
|
||||
import system_theme
|
||||
import url_launcher_macos
|
||||
import window_manager
|
||||
import window_size
|
||||
@ -32,6 +33,7 @@ func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
|
||||
ScreenRetrieverPlugin.register(with: registry.registrar(forPlugin: "ScreenRetrieverPlugin"))
|
||||
SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
|
||||
SqflitePlugin.register(with: registry.registrar(forPlugin: "SqflitePlugin"))
|
||||
SystemThemePlugin.register(with: registry.registrar(forPlugin: "SystemThemePlugin"))
|
||||
UrlLauncherPlugin.register(with: registry.registrar(forPlugin: "UrlLauncherPlugin"))
|
||||
WindowManagerPlugin.register(with: registry.registrar(forPlugin: "WindowManagerPlugin"))
|
||||
WindowSizePlugin.register(with: registry.registrar(forPlugin: "WindowSizePlugin"))
|
||||
|
16
pubspec.lock
16
pubspec.lock
@ -1548,6 +1548,22 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "3.0.1"
|
||||
system_theme:
|
||||
dependency: "direct main"
|
||||
description:
|
||||
name: system_theme
|
||||
sha256: "28bb63b997c252eee7fea6dc9e3528a9a6bf4b566ccbc8b49926389ca3e2c96b"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "2.1.0"
|
||||
system_theme_web:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: system_theme_web
|
||||
sha256: "7566f5a928f6d28d7a60c97bea8a851d1c6bc9b86a4df2366230a97458489219"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "0.0.2"
|
||||
term_glyph:
|
||||
dependency: transitive
|
||||
description:
|
||||
|
@ -69,6 +69,7 @@ dependencies:
|
||||
git:
|
||||
url: https://github.com/rinukkusu/spotify-dart
|
||||
ref: 9e8ef4556942d42d74874de5491253156e7e6f43
|
||||
system_theme: ^2.1.0
|
||||
titlebar_buttons: ^1.0.0
|
||||
tuple: ^2.0.1
|
||||
url_launcher: ^6.1.7
|
||||
|
@ -11,6 +11,7 @@
|
||||
#include <metadata_god/metadata_god_plugin_c_api.h>
|
||||
#include <permission_handler_windows/permission_handler_windows_plugin.h>
|
||||
#include <screen_retriever/screen_retriever_plugin.h>
|
||||
#include <system_theme/system_theme_plugin.h>
|
||||
#include <url_launcher_windows/url_launcher_windows.h>
|
||||
#include <window_manager/window_manager_plugin.h>
|
||||
#include <window_size/window_size_plugin.h>
|
||||
@ -26,6 +27,8 @@ void RegisterPlugins(flutter::PluginRegistry* registry) {
|
||||
registry->GetRegistrarForPlugin("PermissionHandlerWindowsPlugin"));
|
||||
ScreenRetrieverPluginRegisterWithRegistrar(
|
||||
registry->GetRegistrarForPlugin("ScreenRetrieverPlugin"));
|
||||
SystemThemePluginRegisterWithRegistrar(
|
||||
registry->GetRegistrarForPlugin("SystemThemePlugin"));
|
||||
UrlLauncherWindowsRegisterWithRegistrar(
|
||||
registry->GetRegistrarForPlugin("UrlLauncherWindows"));
|
||||
WindowManagerPluginRegisterWithRegistrar(
|
||||
|
@ -8,6 +8,7 @@ list(APPEND FLUTTER_PLUGIN_LIST
|
||||
metadata_god
|
||||
permission_handler_windows
|
||||
screen_retriever
|
||||
system_theme
|
||||
url_launcher_windows
|
||||
window_manager
|
||||
window_size
|
||||
|
Loading…
Reference in New Issue
Block a user