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

87
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,9 +308,7 @@ 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,
child: Padding(
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.all(16.0),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
@ -361,7 +373,6 @@ class _MusicPlayerState extends State<MusicPlayer> {
_buildToggleListButton() _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(