From fa8f72c376b294ad4ffd479841c1564da6599a6f Mon Sep 17 00:00:00 2001 From: Pierre Hubert Date: Sat, 1 Oct 2022 15:56:22 +0200 Subject: [PATCH] Improve new UI --- lib/ui/music_player.dart | 140 +++++++++++++++++++-------------------- 1 file changed, 68 insertions(+), 72 deletions(-) diff --git a/lib/ui/music_player.dart b/lib/ui/music_player.dart index 287e104..620a481 100644 --- a/lib/ui/music_player.dart +++ b/lib/ui/music_player.dart @@ -17,7 +17,7 @@ extension DurationExt on Duration { } } -const double playlistWidth = 300; +const smartphoneSize = 700; class MusicPlayer extends StatefulWidget { final MusicsList musicsList; @@ -291,83 +291,79 @@ class _MusicPlayerState extends State { ), ); - Widget _buildSmallPlayerWidget(double width) => fluent.Container( - color: Colors.black, - child: Padding( - padding: const EdgeInsets.all(16.0), - child: Row( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - fluent.ClipRect( - child: Flexible( - flex: 1, - child: ConstrainedBox( - constraints: - BoxConstraints(maxWidth: min(350, width * (1 / 2))), - child: Row( - children: [ - RoundedImage( - child: CoverImage( - music: currMusic, - width: 80, - height: 80, - backgroundColor: Colors.black, - fit: BoxFit.cover, - ), - ), - // Artist area - const SizedBox(width: 10), - fluent.ClipRect( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - currMusic.title, - style: const TextStyle(fontSize: 22), - overflow: TextOverflow.ellipsis, - ), - Text( - currMusic.artist, - textAlign: TextAlign.start, - overflow: TextOverflow.ellipsis, - ), - ], - ), - ) - ], + Widget _buildSmallPlayerWidget(double width) { + var partSize = width > smartphoneSize ? width / 3 : width / 2.5; + + return fluent.Container( + color: Colors.black, + child: Padding( + padding: const EdgeInsets.all(16.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + fluent.ClipRect( + child: SizedBox( + width: partSize, + child: Row( + children: [ + RoundedImage( + child: CoverImage( + music: currMusic, + width: 80, + height: 80, + backgroundColor: Colors.black, + fit: BoxFit.cover, + ), ), - ), + // Artist area + const SizedBox(width: 10), + fluent.ClipRect( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + currMusic.title, + style: const TextStyle(fontSize: 22), + overflow: TextOverflow.ellipsis, + ), + Text( + currMusic.artist, + textAlign: TextAlign.start, + overflow: TextOverflow.ellipsis, + ), + ], + ), + ) + ], ), ), - const Spacer(), - Flexible( - child: ConstrainedBox( - constraints: - BoxConstraints(maxWidth: min(500, width * (1 / 4))), - child: Column( + ), + SizedBox( + width: partSize, + child: Column( + children: [ + fluent.Row( children: [ - fluent.Row( - children: [ - DurationText(_position), - const SizedBox(width: 20), - _buildProgressBar(), - const SizedBox(width: 20), - DurationText(_duration), - ], - ), - const SizedBox(height: 5), - _buildPlayersIcons(25), + DurationText(_position), + const SizedBox(width: 20), + _buildProgressBar(), + const SizedBox(width: 20), + DurationText(_duration), ], - )), - ), - const Spacer(), - _buildToggleListButton() - ], - ), + ), + const SizedBox(height: 5), + _buildPlayersIcons(25), + ], + )), + const Spacer(), + _buildToggleListButton() + ], ), - ); + ), + ); + } Widget _buildPlayersIcons([double? size]) => fluent.Row( children: [