feat: artist card redesign

chore: add license as asset for about
KRTirtho · Mar 12, 2023 · 92a418c · 92a418c
1 parent dcdb166
commit 92a418c
Show file tree

Hide file tree

Showing 27 changed files with 247 additions and 261 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 BSD-4-Clause License
 
-Copyright (c) 2022 Kingkor Roy Tirtho. All rights reserved.
+Copyright (c) 2023 Kingkor Roy Tirtho. All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 

diff --git a/lib/components/artist/artist_card.dart b/lib/components/artist/artist_card.dart
@@ -3,8 +3,9 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 
 import 'package:spotify/spotify.dart';
-import 'package:spotube/components/shared/hover_builder.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
+import 'package:spotube/hooks/use_breakpoint_value.dart';
+import 'package:spotube/hooks/use_brightness_value.dart';
 import 'package:spotube/provider/blacklist_provider.dart';
 import 'package:spotube/utils/service_utils.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
@@ -15,6 +16,7 @@ class ArtistCard extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
+    final theme = Theme.of(context);
     final backgroundImage = UniversalImage.imageProvider(
       TypeConversionUtils.image_X_UrlString(
         artist.images,
@@ -29,46 +31,53 @@ class ArtistCard extends HookConsumerWidget {
       ),
     );
 
-    return SizedBox(
-      height: 240,
-      width: 200,
-      child: InkWell(
-        onTap: () {
-          ServiceUtils.navigate(context, "/artist/${artist.id}");
-        },
-        borderRadius: BorderRadius.circular(8),
-        child: HoverBuilder(builder: (context, isHovering) {
-          return Ink(
-            width: 200,
-            decoration: BoxDecoration(
-              color: Theme.of(context).cardColor,
-              borderRadius: BorderRadius.circular(8),
-              boxShadow: [
-                BoxShadow(
-                  blurRadius: 10,
-                  offset: const Offset(0, 3),
-                  spreadRadius: 5,
-                  color: Theme.of(context).colorScheme.shadow,
-                ),
-              ],
-              border: isBlackListed
-                  ? Border.all(
-                      color: Colors.red[400]!,
-                      width: 2,
-                    )
-                  : null,
-            ),
+    final radius = BorderRadius.circular(15);
+
+    final double size = useBreakpointValue<double>(
+      sm: 130,
+      md: 150,
+      others: 170,
+    );
+
+    return Container(
+      width: size,
+      margin: const EdgeInsets.symmetric(vertical: 5),
+      child: Material(
+        shadowColor: theme.colorScheme.background,
+        color: Color.lerp(
+          theme.colorScheme.surfaceVariant,
+          theme.colorScheme.surface,
+          useBrightnessValue(.9, .7),
+        ),
+        elevation: 3,
+        shape: RoundedRectangleBorder(
+          borderRadius: radius,
+          side: isBlackListed
+              ? const BorderSide(
+                  color: Colors.red,
+                  width: 2,
+                )
+              : BorderSide.none,
+        ),
+        child: InkWell(
+            onTap: () {
+              ServiceUtils.navigate(context, "/artist/${artist.id}");
+            },
+            borderRadius: radius,
             child: Padding(
-              padding: const EdgeInsets.all(15),
+              padding: const EdgeInsets.all(12),
               child: Column(
-                mainAxisAlignment: MainAxisAlignment.spaceAround,
                 children: [
                   Stack(
                     children: [
-                      CircleAvatar(
-                        maxRadius: 80,
-                        minRadius: 20,
-                        backgroundImage: backgroundImage,
+                      ConstrainedBox(
+                        constraints: BoxConstraints(
+                          maxHeight: size,
+                        ),
+                        child: CircleAvatar(
+                          backgroundImage: backgroundImage,
+                          radius: size / 2,
+                        ),
                       ),
                       Positioned(
                         right: 0,
@@ -92,19 +101,19 @@ class ArtistCard extends HookConsumerWidget {
                       ),
                     ],
                   ),
+                  const SizedBox(height: 10),
                   AutoSizeText(
                     artist.name!,
-                    maxLines: 2,
+                    maxLines: 1,
                     textAlign: TextAlign.center,
-                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                          fontWeight: FontWeight.bold,
-                        ),
+                    overflow: TextOverflow.ellipsis,
+                    style: theme.textTheme.bodyMedium?.copyWith(
+                      fontWeight: FontWeight.bold,
+                    ),
                   ),
                 ],
               ),
-            ),
-          );
-        }),
+            )),
       ),
     );
   }

diff --git a/lib/components/library/user_artists.dart b/lib/components/library/user_artists.dart
@@ -18,6 +18,7 @@ class UserArtists extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
+    final theme = Theme.of(context);
     final auth = ref.watch(AuthenticationNotifier.provider);
 
     final artistQuery = useQueries.artist.followedByMe(ref);
@@ -46,6 +47,8 @@ class UserArtists extends HookConsumerWidget {
           .toList();
     }, [artistQuery.pages, searchText.value]);
 
+    final controller = useScrollController();
+
     if (auth == null) {
       return const AnonymousFallback();
     }
@@ -56,7 +59,7 @@ class UserArtists extends HookConsumerWidget {
         child: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 8.0),
           child: ColoredBox(
-            color: Theme.of(context).scaffoldBackgroundColor,
+            color: theme.scaffoldBackgroundColor,
             child: TextField(
               onChanged: (value) => searchText.value = value,
               decoration: const InputDecoration(
@@ -67,7 +70,7 @@ class UserArtists extends HookConsumerWidget {
           ),
         ),
       ),
-      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
+      backgroundColor: theme.scaffoldBackgroundColor,
       body: artistQuery.pages.isEmpty
           ? Padding(
               padding: const EdgeInsets.all(20),
@@ -84,33 +87,30 @@ class UserArtists extends HookConsumerWidget {
               onRefresh: () async {
                 await artistQuery.refreshAll();
               },
-              child: SafeArea(
-                child: GridView.builder(
-                  itemCount: filteredArtists.length,
-                  physics: const AlwaysScrollableScrollPhysics(),
-                  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
-                    maxCrossAxisExtent: 200,
-                    mainAxisExtent: 250,
-                    crossAxisSpacing: 20,
-                    mainAxisSpacing: 20,
+              child: SingleChildScrollView(
+                controller: controller,
+                child: SizedBox(
+                  width: double.infinity,
+                  child: SafeArea(
+                    child: Center(
+                      child: Wrap(
+                        spacing: 15,
+                        runSpacing: 5,
+                        children: filteredArtists.mapIndexed((index, artist) {
+                          if (index == artistQuery.pages.length - 1 &&
+                              hasNextPage) {
+                            return Waypoint(
+                              controller: controller,
+                              isGrid: true,
+                              onTouchEdge: artistQuery.fetchNext,
+                              child: ArtistCard(artist),
+                            );
+                          }
+                          return ArtistCard(artist);
+                        }).toList(),
+                      ),
+                    ),
                   ),
-                  padding: const EdgeInsets.all(10),
-                  itemBuilder: (context, index) {
-                    return HookBuilder(builder: (context) {
-                      if (index == artistQuery.pages.length - 1 &&
-                          hasNextPage) {
-                        return Waypoint(
-                          controller: useScrollController(),
-                          isGrid: true,
-                          onTouchEdge: () {
-                            artistQuery.fetchNext();
-                          },
-                          child: ArtistCard(filteredArtists[index]),
-                        );
-                      }
-                      return ArtistCard(filteredArtists[index]);
-                    });
-                  },
                 ),
               ),
             ),

diff --git a/lib/components/library/user_playlists.dart b/lib/components/library/user_playlists.dart
@@ -79,7 +79,6 @@ class UserPlaylists extends HookConsumerWidget {
       onRefresh: playlistsQuery.refresh,
       child: SingleChildScrollView(
         physics: const AlwaysScrollableScrollPhysics(),
-        padding: const EdgeInsets.all(8.0),
         child: SafeArea(
           child: Column(
             children: [

diff --git a/lib/components/player/player_controls.dart b/lib/components/player/player_controls.dart
@@ -41,6 +41,7 @@ class PlayerControls extends HookConsumerWidget {
     final playlistNotifier = ref.watch(PlaylistQueueNotifier.notifier);
     final playing = useStream(PlaylistQueueNotifier.playing).data ??
         PlaylistQueueNotifier.isPlaying;
+    final theme = Theme.of(context);
 
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
@@ -139,7 +140,7 @@ class PlayerControls extends HookConsumerWidget {
                     icon: Icon(
                       SpotubeIcons.shuffle,
                       color: playlist?.isShuffled == true
-                          ? Theme.of(context).primaryColor
+                          ? theme.colorScheme.primary
                           : null,
                     ),
                     onPressed: playlist == null
@@ -194,7 +195,7 @@ class PlayerControls extends HookConsumerWidget {
                           ? SpotubeIcons.repeatOne
                           : SpotubeIcons.repeat,
                       color: playlist?.isLooping == true
-                          ? Theme.of(context).primaryColor
+                          ? theme.colorScheme.primary
                           : null,
                     ),
                     onPressed: playlist == null || playlist.isLoading

diff --git a/lib/components/player/player_overlay.dart b/lib/components/player/player_overlay.dart
@@ -30,7 +30,8 @@ class PlayerOverlay extends HookConsumerWidget {
     final playing = useStream(PlaylistQueueNotifier.playing).data ??
         PlaylistQueueNotifier.isPlaying;
 
-    final textColor = Theme.of(context).colorScheme.primary;
+    final theme = Theme.of(context);
+    final textColor = theme.colorScheme.primary;
 
     const radius = BorderRadius.only(
       topLeft: Radius.circular(10),
@@ -54,10 +55,7 @@ class PlayerOverlay extends HookConsumerWidget {
             width: MediaQuery.of(context).size.width,
             height: canShow ? 53 : 0,
             decoration: BoxDecoration(
-              color: Theme.of(context)
-                  .colorScheme
-                  .secondaryContainer
-                  .withOpacity(.8),
+              color: theme.colorScheme.secondaryContainer.withOpacity(.8),
               borderRadius: radius,
             ),
             child: AnimatedOpacity(
@@ -81,7 +79,7 @@ class PlayerOverlay extends HookConsumerWidget {
                               minHeight: 2,
                               backgroundColor: Colors.transparent,
                               valueColor: AlwaysStoppedAnimation(
-                                Theme.of(context).colorScheme.primary,
+                                theme.colorScheme.primary,
                               ),
                             );
                           },

diff --git a/lib/components/player/player_queue.dart b/lib/components/player/player_queue.dart
@@ -36,7 +36,8 @@ class PlayerQueue extends HookConsumerWidget {
             topLeft: Radius.circular(10),
             topRight: Radius.circular(10),
           );
-    final headlineColor = Theme.of(context).textTheme.headlineSmall?.color;
+    final theme = Theme.of(context);
+    final headlineColor = theme.textTheme.headlineSmall?.color;
 
     useEffect(() {
       if (playlist == null) return null;
@@ -60,7 +61,7 @@ class PlayerQueue extends HookConsumerWidget {
           top: 5.0,
         ),
         decoration: BoxDecoration(
-          color: Theme.of(context).scaffoldBackgroundColor.withOpacity(0.5),
+          color: theme.scaffoldBackgroundColor.withOpacity(0.5),
           borderRadius: borderRadius,
         ),
         child: Column(
@@ -88,11 +89,9 @@ class PlayerQueue extends HookConsumerWidget {
                 const Spacer(),
                 FilledButton(
                   style: FilledButton.styleFrom(
-                    backgroundColor: Theme.of(context)
-                        .scaffoldBackgroundColor
-                        .withOpacity(0.5),
-                    foregroundColor:
-                        Theme.of(context).textTheme.headlineSmall?.color,
+                    backgroundColor:
+                        theme.scaffoldBackgroundColor.withOpacity(0.5),
+                    foregroundColor: theme.textTheme.headlineSmall?.color,
                   ),
                   child: Row(
                     children: const [

diff --git a/lib/components/player/player_track_details.dart b/lib/components/player/player_track_details.dart
@@ -16,6 +16,7 @@ class PlayerTrackDetails extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
+    final theme = Theme.of(context);
     final breakpoint = useBreakpoints();
     final playback = ref.watch(PlaylistQueueNotifier.provider);
 
@@ -50,19 +51,16 @@ class PlayerTrackDetails extends HookConsumerWidget {
                 Text(
                   playback?.activeTrack.name ?? "",
                   overflow: TextOverflow.ellipsis,
-                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                        color: color,
-                      ),
+                  style: theme.textTheme.bodyMedium?.copyWith(
+                    color: color,
+                  ),
                 ),
                 Text(
                   TypeConversionUtils.artists_X_String<Artist>(
                     playback?.activeTrack.artists ?? [],
                   ),
                   overflow: TextOverflow.ellipsis,
-                  style: Theme.of(context)
-                      .textTheme
-                      .bodySmall!
-                      .copyWith(color: color),
+                  style: theme.textTheme.bodySmall!.copyWith(color: color),
                 )
               ],
             ),