kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-13 07:55:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: more elegant playlist create button

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2023-03-12 10:17:47 +06:00
parent 92a418c8a8
commit 6535345c1c
2 changed files with 111 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
lib/components/library/user_playlists.dart
View File

@ -6,6 +6,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/playlist/playlist_create_dialog.dart';
import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
import 'package:spotube/components/playlist/playlist_card.dart';
@ -82,22 +83,32 @@ class UserPlaylists extends HookConsumerWidget {
child: SafeArea(
child: Column(
children: [
TextField(
onChanged: (value) => searchText.value = value,
decoration: const InputDecoration(
hintText: "Filter your playlists...",
prefixIcon: Icon(SpotubeIcons.filter),
Padding(
padding: const EdgeInsets.all(10),
child: TextField(
onChanged: (value) => searchText.value = value,
decoration: const InputDecoration(
hintText: "Filter your playlists...",
prefixIcon: Icon(SpotubeIcons.filter),
),
),
),
const SizedBox(height: 20),
if (playlistsQuery.isLoading || !playlistsQuery.hasData)
const Center(child: ShimmerPlaybuttonCard(count: 7))
else
Wrap(
runSpacing: 10,
children: playlists
.map((playlist) => PlaylistCard(playlist))
.toList(),
alignment: WrapAlignment.center,
children: [
Row(
children: const [
SizedBox(width: 10),
PlaylistCreateDialog(),
SizedBox(width: 10),
],
),
...playlists.map((playlist) => PlaylistCard(playlist))
],
),
],
),

194
lib/components/playlist/playlist_create_dialog.dart
View File

@ -13,110 +13,98 @@ class PlaylistCreateDialog extends HookConsumerWidget {
Widget build(BuildContext context, ref) {
final spotify = ref.watch(spotifyProvider);
return SizedBox(
width: 200,
child: TextButton(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return HookBuilder(builder: (context) {
final playlistName = useTextEditingController();
final description = useTextEditingController();
final public = useState(false);
final collaborative = useState(false);
final client = useQueryClient();
final navigator = Navigator.of(context);
onCreate() async {
if (playlistName.text.isEmpty) return;
final me = await spotify.me.get();
await spotify.playlists.createPlaylist(
me.id!,
playlistName.text,
collaborative: collaborative.value,
public: public.value,
description: description.text,
);
await client
.getQuery(
"current-user-playlists",
)
?.refresh();
navigator.pop();
}
return AlertDialog(
title: const Text("Create a Playlist"),
actions: [
OutlinedButton(
child: const Text("Cancel"),
onPressed: () {
Navigator.pop(context);
},
),
FilledButton(
onPressed: onCreate,
child: const Text("Create"),
),
],
content: Container(
width: MediaQuery.of(context).size.width,
constraints: const BoxConstraints(maxWidth: 500),
child: ListView(
shrinkWrap: true,
children: [
TextField(
controller: playlistName,
decoration: const InputDecoration(
hintText: "Name of the playlist",
labelText: "Playlist Name",
),
),
const SizedBox(height: 10),
TextField(
controller: description,
decoration: const InputDecoration(
hintText: "Description...",
),
keyboardType: TextInputType.multiline,
maxLines: 5,
),
const SizedBox(height: 10),
CheckboxListTile(
title: const Text("Public"),
value: public.value,
onChanged: (val) => public.value = val ?? false,
),
const SizedBox(height: 10),
CheckboxListTile(
title: const Text("Collaborative"),
value: collaborative.value,
onChanged: (val) =>
collaborative.value = val ?? false,
),
],
),
),
);
});
},
);
},
style: ButtonStyle(
padding: MaterialStateProperty.all(
const EdgeInsets.symmetric(vertical: 100),
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(SpotubeIcons.addFilled, size: 40),
Text("Create Playlist", style: TextStyle(fontSize: 20)),
],
),
return FilledButton.tonalIcon(
style: FilledButton.styleFrom(
foregroundColor: Theme.of(context).colorScheme.primary,
),
icon: const Icon(SpotubeIcons.addFilled),
label: const Text("Create Playlist"),
onPressed: () {
showDialog(
context: context,
builder: (context) {
return HookBuilder(builder: (context) {
final playlistName = useTextEditingController();
final description = useTextEditingController();
final public = useState(false);
final collaborative = useState(false);
final client = useQueryClient();
final navigator = Navigator.of(context);
onCreate() async {
if (playlistName.text.isEmpty) return;
final me = await spotify.me.get();
await spotify.playlists.createPlaylist(
me.id!,
playlistName.text,
collaborative: collaborative.value,
public: public.value,
description: description.text,
);
await client
.getQuery(
"current-user-playlists",
)
?.refresh();
navigator.pop();
}
return AlertDialog(
title: const Text("Create a Playlist"),
actions: [
OutlinedButton(
child: const Text("Cancel"),
onPressed: () {
Navigator.pop(context);
},
),
FilledButton(
onPressed: onCreate,
child: const Text("Create"),
),
],
content: Container(
width: MediaQuery.of(context).size.width,
constraints: const BoxConstraints(maxWidth: 500),
child: ListView(
shrinkWrap: true,
children: [
TextField(
controller: playlistName,
decoration: const InputDecoration(
hintText: "Name of the playlist",
labelText: "Playlist Name",
),
),
const SizedBox(height: 10),
TextField(
controller: description,
decoration: const InputDecoration(
hintText: "Description...",
),
keyboardType: TextInputType.multiline,
maxLines: 5,
),
const SizedBox(height: 10),
CheckboxListTile(
title: const Text("Public"),
value: public.value,
onChanged: (val) => public.value = val ?? false,
),
const SizedBox(height: 10),
CheckboxListTile(
title: const Text("Collaborative"),
value: collaborative.value,
onChanged: (val) => collaborative.value = val ?? false,
),
],
),
),
);
});
},
);
},
);
}
}