pierre/MusicPlayer
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

Add blurred background to new UI

Browse Source
This commit is contained in:
Pierre HUBERT 2022-10-01 16:05:47 +02:00
parent fa8f72c376
commit ba6ea515d5
1 changed files with 108 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
lib/ui/music_player.dart
View File

@ -163,45 +163,18 @@ class _MusicPlayerState extends State<MusicPlayer> {
} }
} }
Widget _playerWithoutPlaylistPane() => LayoutBuilder( Widget _playerWithoutPlaylistPane() => _buildWithBackground(LayoutBuilder(
builder: (context, constraints) { builder: (context, constraints) {
final mainAreaWidth = constraints.maxWidth;
return fluent.Row( return fluent.Row(
children: [ children: [
SizedBox( SizedBox(
width: mainAreaWidth, width: constraints.maxWidth,
child: Stack( child: Stack(
children: [ 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( fluent.SizedBox(
width: mainAreaWidth, width: constraints.maxWidth,
child: _buildPlayerWidget(), child: _buildPlayerWidget(),
), ),
Positioned( Positioned(
top: 10, top: 10,
right: 10, right: 10,
@ -210,7 +183,6 @@ class _MusicPlayerState extends State<MusicPlayer> {
_buildToggleListButton(), _buildToggleListButton(),
], ],
)), )),
Positioned( Positioned(
bottom: 10, bottom: 10,
right: 10, right: 10,
@ -227,7 +199,7 @@ class _MusicPlayerState extends State<MusicPlayer> {
], ],
); );
}, },
); ));
Widget _playerWithPlaylistPane() => LayoutBuilder( Widget _playerWithPlaylistPane() => LayoutBuilder(
builder: (context, constraints) { builder: (context, constraints) {
@ -241,7 +213,49 @@ class _MusicPlayerState extends State<MusicPlayer> {
fluent.SizedBox( fluent.SizedBox(
height: playerSize, height: playerSize,
width: constraints.maxWidth, 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<MusicPlayer> {
Widget _buildSmallPlayerWidget(double width) { Widget _buildSmallPlayerWidget(double width) {
var partSize = width > smartphoneSize ? width / 3 : width / 2.5; var partSize = width > smartphoneSize ? width / 3 : width / 2.5;
return fluent.Container( return Padding(
color: Colors.black, padding: const EdgeInsets.all(16.0),
child: Padding( child: Row(
padding: const EdgeInsets.all(16.0), mainAxisAlignment: MainAxisAlignment.start,
child: Row( crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start, children: [
crossAxisAlignment: CrossAxisAlignment.center, fluent.ClipRect(
children: [ child: SizedBox(
fluent.ClipRect( width: partSize,
child: SizedBox( child: Row(
width: partSize, children: [
child: Row( RoundedImage(
children: [ child: CoverImage(
RoundedImage( music: currMusic,
child: CoverImage( width: 80,
music: currMusic, height: 80,
width: 80, backgroundColor: Colors.black,
height: 80, fit: BoxFit.cover,
backgroundColor: Colors.black,
fit: BoxFit.cover,
),
), ),
// Artist area ),
const SizedBox(width: 10), // Artist area
fluent.ClipRect( const SizedBox(width: 10),
child: Column( fluent.ClipRect(
crossAxisAlignment: CrossAxisAlignment.start, child: Column(
mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start,
children: [ mainAxisAlignment: MainAxisAlignment.center,
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(
children: [ children: [
DurationText(_position), Text(
const SizedBox(width: 20), currMusic.title,
_buildProgressBar(), style: const TextStyle(fontSize: 22),
const SizedBox(width: 20), overflow: TextOverflow.ellipsis,
DurationText(_duration), ),
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<MusicPlayer> {
itemCount: (_filteredList ?? widget.musicsList).length, itemCount: (_filteredList ?? widget.musicsList).length,
), ),
), ),
_filteredList == null (_filteredList?.length ?? 0) < 2
? Container() ? Container()
: ListTile( : ListTile(
leading: fluent.ToggleSwitch( leading: fluent.ToggleSwitch(