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: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(
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))
],
),
],
),

View File

@ -13,9 +13,12 @@ class PlaylistCreateDialog extends HookConsumerWidget {
Widget build(BuildContext context, ref) {
final spotify = ref.watch(spotifyProvider);
return SizedBox(
width: 200,
child: TextButton(
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,
@ -92,8 +95,7 @@ class PlaylistCreateDialog extends HookConsumerWidget {
CheckboxListTile(
title: const Text("Collaborative"),
value: collaborative.value,
onChanged: (val) =>
collaborative.value = val ?? false,
onChanged: (val) => 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)),
],
),
),
);
}
}