refactor: more elegant playlist create button

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

View File

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

View File

@ -13,9 +13,12 @@ class PlaylistCreateDialog extends HookConsumerWidget {
Widget build(BuildContext context, ref) { Widget build(BuildContext context, ref) {
final spotify = ref.watch(spotifyProvider); final spotify = ref.watch(spotifyProvider);
return SizedBox( return FilledButton.tonalIcon(
width: 200, style: FilledButton.styleFrom(
child: TextButton( foregroundColor: Theme.of(context).colorScheme.primary,
),
icon: const Icon(SpotubeIcons.addFilled),
label: const Text("Create Playlist"),
onPressed: () { onPressed: () {
showDialog( showDialog(
context: context, context: context,
@ -92,8 +95,7 @@ class PlaylistCreateDialog extends HookConsumerWidget {
CheckboxListTile( CheckboxListTile(
title: const Text("Collaborative"), title: const Text("Collaborative"),
value: collaborative.value, value: collaborative.value,
onChanged: (val) => onChanged: (val) => collaborative.value = val ?? false,
collaborative.value = val ?? false,
), ),
], ],
), ),
@ -103,20 +105,6 @@ class PlaylistCreateDialog extends HookConsumerWidget {
}, },
); );
}, },
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)),
],
),
),
); );
} }
} }