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) {
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<MusicPlayer> {
_buildToggleListButton(),
],
)),
Positioned(
bottom: 10,
right: 10,
@ -227,7 +199,7 @@ class _MusicPlayerState extends State<MusicPlayer> {
],
);
},
);
));
Widget _playerWithPlaylistPane() => LayoutBuilder(
builder: (context, constraints) {
@ -241,7 +213,49 @@ class _MusicPlayerState extends State<MusicPlayer> {
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,9 +308,7 @@ class _MusicPlayerState extends State<MusicPlayer> {
Widget _buildSmallPlayerWidget(double width) {
var partSize = width > smartphoneSize ? width / 3 : width / 2.5;
return fluent.Container(
color: Colors.black,
child: Padding(
return Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
@ -361,7 +373,6 @@ class _MusicPlayerState extends State<MusicPlayer> {
_buildToggleListButton()
],
),
),
);
}
@ -463,7 +474,7 @@ class _MusicPlayerState extends State<MusicPlayer> {
itemCount: (_filteredList ?? widget.musicsList).length,
),
),
_filteredList == null
(_filteredList?.length ?? 0) < 2
? Container()
: ListTile(
leading: fluent.ToggleSwitch(