Improved code (like button)

BASEBOOM · May 31, 2024 · d6a7664 · d6a7664
1 parent 1f3e28c
commit d6a7664
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 56 deletions.
diff --git a/lib/widgets/like_button.dart b/lib/widgets/like_button.dart
@@ -0,0 +1,38 @@
+import 'package:fluentui_system_icons/fluentui_system_icons.dart';
+import 'package:flutter/material.dart';
+
+class LikeButton extends StatelessWidget {
+  LikeButton({
+    super.key,
+    required this.onSecondaryColor,
+    required this.onPrimaryColor,
+    required this.isLiked,
+    required this.onPressed,
+  });
+  final Color onSecondaryColor;
+  final Color onPrimaryColor;
+  final bool isLiked;
+  final VoidCallback onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    const likeStatusToIconMapper = {
+      true: FluentIcons.heart_24_filled,
+      false: FluentIcons.heart_24_regular,
+    };
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: onSecondaryColor,
+        borderRadius: BorderRadius.circular(10),
+      ),
+      child: IconButton(
+        onPressed: onPressed,
+        icon: Icon(
+          likeStatusToIconMapper[isLiked],
+          color: onPrimaryColor,
+          size: 25,
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/widgets/playlist_cube.dart b/lib/widgets/playlist_cube.dart
@@ -25,6 +25,7 @@ import 'package:flutter/material.dart';
 import 'package:musify/API/musify.dart';
 import 'package:musify/extensions/l10n.dart';
 import 'package:musify/screens/playlist_page.dart';
+import 'package:musify/widgets/like_button.dart';
 import 'package:musify/widgets/no_artwork_cube.dart';
 
 class PlaylistCube extends StatelessWidget {
@@ -63,7 +64,8 @@ class PlaylistCube extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final _secondaryColor = Theme.of(context).colorScheme.secondary;
+    final _onSecondaryColor =
+        Theme.of(context).colorScheme.onSecondaryContainer;
     final _onPrimaryColor = Theme.of(context).colorScheme.onPrimary;
 
     return Stack(
@@ -113,30 +115,22 @@ class PlaylistCube extends StatelessWidget {
               return Positioned(
                 bottom: 5,
                 right: 5,
-                child: DecoratedBox(
-                  decoration: BoxDecoration(
-                    color: _secondaryColor,
-                    borderRadius: BorderRadius.circular(10),
-                  ),
-                  child: IconButton(
-                    onPressed: () {
-                      playlistLikeStatus.value = !playlistLikeStatus.value;
-                      updatePlaylistLikeStatus(
-                        id!,
-                        image,
-                        title,
-                        playlistLikeStatus.value,
-                      );
-                      currentLikedPlaylistsLength.value = value
-                          ? currentLikedPlaylistsLength.value + 1
-                          : currentLikedPlaylistsLength.value - 1;
-                    },
-                    icon: Icon(
-                      likeStatusToIconMapper[value],
-                      color: _onPrimaryColor,
-                      size: 25,
-                    ),
-                  ),
+                child: LikeButton(
+                  onPrimaryColor: _onPrimaryColor,
+                  onSecondaryColor: _onSecondaryColor,
+                  isLiked: value,
+                  onPressed: () {
+                    playlistLikeStatus.value = !playlistLikeStatus.value;
+                    updatePlaylistLikeStatus(
+                      id!,
+                      image,
+                      title,
+                      playlistLikeStatus.value,
+                    );
+                    currentLikedPlaylistsLength.value = value
+                        ? currentLikedPlaylistsLength.value + 1
+                        : currentLikedPlaylistsLength.value - 1;
+                  },
                 ),
               );
             },
@@ -147,7 +141,7 @@ class PlaylistCube extends StatelessWidget {
             right: 5,
             child: Container(
               decoration: BoxDecoration(
-                color: _secondaryColor,
+                color: _onSecondaryColor,
                 borderRadius: BorderRadius.circular(5),
               ),
               padding: const EdgeInsets.all(4),

diff --git a/lib/widgets/song_cube.dart b/lib/widgets/song_cube.dart
@@ -22,10 +22,10 @@
 import 'dart:io';
 
 import 'package:cached_network_image/cached_network_image.dart';
-import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/material.dart';
 import 'package:musify/API/musify.dart';
 import 'package:musify/main.dart';
+import 'package:musify/widgets/like_button.dart';
 import 'package:musify/widgets/marque.dart';
 import 'package:musify/widgets/no_artwork_cube.dart';
 
@@ -47,11 +47,6 @@ class SongCube extends StatelessWidget {
   final VoidCallback? onPlay;
   final double size;
 
-  static const likeStatusToIconMapper = {
-    true: FluentIcons.heart_24_filled,
-    false: FluentIcons.heart_24_regular,
-  };
-
   late final songLikeStatus =
       ValueNotifier<bool>(isSongAlreadyLiked(song['ytid']));
 
@@ -116,30 +111,20 @@ class SongCube extends StatelessWidget {
                   return Positioned(
                     bottom: 5,
                     right: 5,
-                    child: DecoratedBox(
-                      decoration: BoxDecoration(
-                        color: _onSecondaryColor,
-                        borderRadius: BorderRadius.circular(10),
-                      ),
-                      child: IconButton(
-                        onPressed: () {
-                          songLikeStatus.value = !songLikeStatus.value;
-                          updateSongLikeStatus(
-                            song['ytid'],
-                            songLikeStatus.value,
-                          );
-                          final likedSongsLength =
-                              currentLikedSongsLength.value;
-                          currentLikedSongsLength.value = value
-                              ? likedSongsLength + 1
-                              : likedSongsLength - 1;
-                        },
-                        icon: Icon(
-                          likeStatusToIconMapper[value],
-                          color: _onPrimaryColor,
-                          size: 25,
-                        ),
-                      ),
+                    child: LikeButton(
+                      onPrimaryColor: _onPrimaryColor,
+                      onSecondaryColor: _onSecondaryColor,
+                      isLiked: value,
+                      onPressed: () {
+                        songLikeStatus.value = !songLikeStatus.value;
+                        updateSongLikeStatus(
+                          song['ytid'],
+                          songLikeStatus.value,
+                        );
+                        final likedSongsLength = currentLikedSongsLength.value;
+                        currentLikedSongsLength.value =
+                            value ? likedSongsLength + 1 : likedSongsLength - 1;
+                      },
                     ),
                   );
                 },