From ba6ea515d5a2834ba280c4aecfbaff7feb81718b Mon Sep 17 00:00:00 2001 From: Pierre Hubert Date: Sat, 1 Oct 2022 16:05:47 +0200 Subject: [PATCH] Add blurred background to new UI --- lib/ui/music_player.dart | 205 +++++++++++++++++++++------------------ 1 file changed, 108 insertions(+), 97 deletions(-) diff --git a/lib/ui/music_player.dart b/lib/ui/music_player.dart index 620a481..86e20bd 100644 --- a/lib/ui/music_player.dart +++ b/lib/ui/music_player.dart @@ -163,45 +163,18 @@ class _MusicPlayerState extends State { } } - Widget _playerWithoutPlaylistPane() => LayoutBuilder( + Widget _playerWithoutPlaylistPane() => _buildWithBackground(LayoutBuilder( builder: (context, constraints) { - final mainAreaWidth = constraints.maxWidth; - return fluent.Row( children: [ SizedBox( - width: mainAreaWidth, + width: constraints.maxWidth, child: Stack( children: [ - // Background image - CoverImage( - music: currMusic, - width: mainAreaWidth, - height: constraints.maxHeight, - fit: BoxFit.cover, - ), - - // Blur background image - ClipRRect( - // Clip it cleanly. - child: BackdropFilter( - filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), - child: Container( - color: Colors.black.withOpacity(0.8), - alignment: Alignment.center, - child: SizedBox( - width: mainAreaWidth, - height: constraints.maxHeight, - ), - ), - ), - ), - fluent.SizedBox( - width: mainAreaWidth, + width: constraints.maxWidth, child: _buildPlayerWidget(), ), - Positioned( top: 10, right: 10, @@ -210,7 +183,6 @@ class _MusicPlayerState extends State { _buildToggleListButton(), ], )), - Positioned( bottom: 10, right: 10, @@ -227,7 +199,7 @@ class _MusicPlayerState extends State { ], ); }, - ); + )); Widget _playerWithPlaylistPane() => LayoutBuilder( builder: (context, constraints) { @@ -241,7 +213,49 @@ class _MusicPlayerState extends State { fluent.SizedBox( height: playerSize, width: constraints.maxWidth, - child: _buildSmallPlayerWidget(constraints.maxWidth), + child: _buildWithBackground( + _buildSmallPlayerWidget(constraints.maxWidth)), + ), + ], + ); + }, + ); + + Widget _buildWithBackground(Widget child) => LayoutBuilder( + builder: (context, constraints) { + return fluent.Row( + children: [ + SizedBox( + width: constraints.maxWidth, + child: Stack( + children: [ + // Background image + CoverImage( + music: currMusic, + width: constraints.maxWidth, + height: constraints.maxHeight, + fit: BoxFit.cover, + ), + + // Blur background image + ClipRRect( + // Clip it cleanly. + child: BackdropFilter( + filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), + child: Container( + color: Colors.black.withOpacity(0.8), + alignment: Alignment.center, + child: SizedBox( + width: constraints.maxWidth, + height: constraints.maxHeight, + ), + ), + ), + ), + + child + ], + ), ), ], ); @@ -294,73 +308,70 @@ class _MusicPlayerState extends State { 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, - ), + return 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, - ), - ], - ), - ) - ], - ), - ), - ), - SizedBox( - width: partSize, - child: Column( - children: [ - fluent.Row( + ), + // Artist area + const SizedBox(width: 10), + fluent.ClipRect( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, children: [ - DurationText(_position), - const SizedBox(width: 20), - _buildProgressBar(), - const SizedBox(width: 20), - DurationText(_duration), + Text( + currMusic.title, + style: const TextStyle(fontSize: 22), + overflow: TextOverflow.ellipsis, + ), + Text( + currMusic.artist, + textAlign: TextAlign.start, + overflow: TextOverflow.ellipsis, + ), ], ), - const SizedBox(height: 5), - _buildPlayersIcons(25), - ], - )), - const Spacer(), - _buildToggleListButton() - ], - ), + ) + ], + ), + ), + ), + SizedBox( + width: partSize, + child: Column( + children: [ + fluent.Row( + children: [ + DurationText(_position), + const SizedBox(width: 20), + _buildProgressBar(), + const SizedBox(width: 20), + DurationText(_duration), + ], + ), + const SizedBox(height: 5), + _buildPlayersIcons(25), + ], + )), + const Spacer(), + _buildToggleListButton() + ], ), ); } @@ -463,7 +474,7 @@ class _MusicPlayerState extends State { itemCount: (_filteredList ?? widget.musicsList).length, ), ), - _filteredList == null + (_filteredList?.length ?? 0) < 2 ? Container() : ListTile( leading: fluent.ToggleSwitch(