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) {
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,73 +308,70 @@ 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(
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<MusicPlayer> {
itemCount: (_filteredList ?? widget.musicsList).length,
),
),
_filteredList == null
(_filteredList?.length ?? 0) < 2
? Container()
: ListTile(
leading: fluent.ToggleSwitch(