From 6535345c1c9a98c4ef72c3a9171cd50b8cf60bf0 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Sun, 12 Mar 2023 10:17:47 +0600 Subject: [PATCH] refactor: more elegant playlist create button --- lib/components/library/user_playlists.dart | 29 ++- .../playlist/playlist_create_dialog.dart | 194 ++++++++---------- 2 files changed, 111 insertions(+), 112 deletions(-) diff --git a/lib/components/library/user_playlists.dart b/lib/components/library/user_playlists.dart index 02a0fe87..6d1c18c4 100644 --- a/lib/components/library/user_playlists.dart +++ b/lib/components/library/user_playlists.dart @@ -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)) + ], ), ], ), diff --git a/lib/components/playlist/playlist_create_dialog.dart b/lib/components/playlist/playlist_create_dialog.dart index 82f71dd8..eb5af8f0 100644 --- a/lib/components/playlist/playlist_create_dialog.dart +++ b/lib/components/playlist/playlist_create_dialog.dart @@ -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, + ), + ], + ), + ), + ); + }); + }, + ); + }, ); } }