fix: standardize border radius values and improve artwork display in widgets

Author: gokadzev

lib/utilities/common_variables.dart

@@ -25,18 +25,19 @@ const recommendedCubesNumber = 8;
 
 const commonSingleChildScrollViewPadding = EdgeInsets.symmetric(horizontal: 10);
 const commonBarPadding = EdgeInsets.symmetric(horizontal: 8);
-var commonBarRadius = BorderRadius.circular(18);
+var commonBarRadius = BorderRadius.circular(16);
 var commonBarTitleStyle = const TextStyle(
   fontSize: 15,
   fontWeight: FontWeight.bold,
 );
+const commonMiniArtworkRadius = 8.0;
 
-const commonCustomBarRadius = BorderRadius.all(Radius.circular(18));
+const commonCustomBarRadius = BorderRadius.all(Radius.circular(16));
 const commonCustomBarRadiusFirst = BorderRadius.vertical(
-  top: Radius.circular(18),
+  top: Radius.circular(16),
 );
 const commonCustomBarRadiusLast = BorderRadius.vertical(
-  bottom: Radius.circular(18),
+  bottom: Radius.circular(16),
 );
 
 const commonListViewBottmomPadding = EdgeInsets.only(bottom: 8);

lib/widgets/mini_player.dart

@@ -5,6 +5,7 @@ import 'package:musify/main.dart';
 import 'package:musify/models/full_player_state.dart';
 import 'package:musify/models/position_data.dart';
 import 'package:musify/screens/now_playing_page.dart';
+import 'package:musify/utilities/common_variables.dart';
 import 'package:musify/widgets/marque.dart';
 import 'package:musify/widgets/song_artwork.dart';
 import 'package:rxdart/rxdart.dart';
@@ -195,7 +196,7 @@ class _ArtworkWidget extends StatelessWidget {
           metadata: metadata,
           size: MiniPlayer._artworkSize,
           errorWidgetIconSize: MiniPlayer._artworkIconSize,
-          borderRadius: 8,
+          borderRadius: commonMiniArtworkRadius,
         ),
       ),
     );

lib/widgets/song_bar.dart

@@ -153,23 +153,17 @@ class _SongBarState extends State<SongBar> {
     final isDurationAvailable =
         widget.showMusicDuration && widget.song['duration'] != null;
 
-    if (_artworkPath != null) {
-      return ValueListenableBuilder<bool>(
-        valueListenable: _songOfflineStatus,
-        builder: (_, isOffline, __) {
+    return ValueListenableBuilder<bool>(
+      valueListenable: _songOfflineStatus,
+      builder: (_, isOffline, __) {
+        if (isOffline && _artworkPath != null) {
           return _OfflineArtwork(
             artworkPath: _artworkPath,
             size: size,
-            isOffline: isOffline,
             primaryColor: primaryColor,
           );
-        },
-      );
-    }
+        }
 
-    return ValueListenableBuilder<bool>(
-      valueListenable: _songOfflineStatus,
-      builder: (_, isOffline, __) {
         return _OnlineArtwork(
           lowResImageUrl: _lowResImageUrl,
           size: size,
@@ -379,52 +373,46 @@ class _OfflineArtwork extends StatelessWidget {
   const _OfflineArtwork({
     required this.artworkPath,
     required this.size,
-    required this.isOffline,
     required this.primaryColor,
   });
 
   final String artworkPath;
   final double size;
-  final bool isOffline;
   final Color primaryColor;
 
   @override
   Widget build(BuildContext context) {
-    final overlayColor = Theme.of(context).brightness == Brightness.dark
-        ? Colors.black.withValues(alpha: 0.6)
-        : Colors.white.withValues(alpha: 0.7);
-
     return SizedBox(
       width: size,
       height: size,
       child: Stack(
         alignment: Alignment.center,
         children: [
           ClipRRect(
-            borderRadius: commonBarRadius,
+            borderRadius: BorderRadiusGeometry.circular(
+              commonMiniArtworkRadius,
+            ),
             child: Image.file(
               File(artworkPath),
               fit: BoxFit.cover,
               cacheWidth: 256,
               cacheHeight: 256,
+              color: Theme.of(context).colorScheme.primaryContainer,
+              colorBlendMode: BlendMode.multiply,
+              opacity: const AlwaysStoppedAnimation(0.45),
             ),
           ),
-          if (isOffline)
-            Positioned.fill(
-              child: ClipRRect(
-                borderRadius: commonBarRadius,
-                child: ColoredBox(
-                  color: overlayColor,
-                  child: Center(
-                    child: Icon(
-                      FluentIcons.cellular_off_24_filled,
-                      size: 24,
-                      color: primaryColor,
-                    ),
-                  ),
-                ),
+          SizedBox(
+            width: size - 10,
+            child: FittedBox(
+              fit: BoxFit.scaleDown,
+              child: Icon(
+                FluentIcons.cellular_off_24_filled,
+                size: 24,
+                color: primaryColor,
               ),
             ),
+          ),
         ],
       ),
     );
@@ -469,7 +457,9 @@ class _OnlineArtwork extends StatelessWidget {
             memCacheWidth: 256,
             memCacheHeight: 256,
             imageBuilder: (context, imageProvider) => ClipRRect(
-              borderRadius: commonBarRadius,
+              borderRadius: BorderRadiusGeometry.circular(
+                commonMiniArtworkRadius,
+              ),
               child: Stack(
                 alignment: Alignment.center,
                 children: [