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

Improve new UI

Browse Source
This commit is contained in:
Pierre HUBERT 2022-10-01 15:56:22 +02:00
parent 25e64f67e0
commit fa8f72c376
1 changed files with 68 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
lib/ui/music_player.dart
View File

@ -17,7 +17,7 @@ extension DurationExt on Duration {
} }
} }
const double playlistWidth = 300; const smartphoneSize = 700;
class MusicPlayer extends StatefulWidget { class MusicPlayer extends StatefulWidget {
final MusicsList musicsList; final MusicsList musicsList;
@ -291,83 +291,79 @@ class _MusicPlayerState extends State<MusicPlayer> {
), ),
); );
Widget _buildSmallPlayerWidget(double width) => fluent.Container( Widget _buildSmallPlayerWidget(double width) {
color: Colors.black, var partSize = width > smartphoneSize ? width / 3 : width / 2.5;
child: Padding(
padding: const EdgeInsets.all(16.0), return fluent.Container(
child: Row( color: Colors.black,
mainAxisAlignment: MainAxisAlignment.start, child: Padding(
crossAxisAlignment: CrossAxisAlignment.center, padding: const EdgeInsets.all(16.0),
children: [ child: Row(
fluent.ClipRect( mainAxisAlignment: MainAxisAlignment.start,
child: Flexible( crossAxisAlignment: CrossAxisAlignment.center,
flex: 1, children: [
child: ConstrainedBox( fluent.ClipRect(
constraints: child: SizedBox(
BoxConstraints(maxWidth: min(350, width * (1 / 2))), width: partSize,
child: Row( child: Row(
children: [ children: [
RoundedImage( RoundedImage(
child: CoverImage( child: CoverImage(
music: currMusic, music: currMusic,
width: 80, width: 80,
height: 80, height: 80,
backgroundColor: Colors.black, backgroundColor: Colors.black,
fit: BoxFit.cover, 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,
),
],
),
)
],
), ),
), // 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,
),
],
),
)
],
), ),
), ),
const Spacer(), ),
Flexible( SizedBox(
child: ConstrainedBox( width: partSize,
constraints: child: Column(
BoxConstraints(maxWidth: min(500, width * (1 / 4))), children: [
child: Column( fluent.Row(
children: [ children: [
fluent.Row( DurationText(_position),
children: [ const SizedBox(width: 20),
DurationText(_position), _buildProgressBar(),
const SizedBox(width: 20), const SizedBox(width: 20),
_buildProgressBar(), DurationText(_duration),
const SizedBox(width: 20),
DurationText(_duration),
],
),
const SizedBox(height: 5),
_buildPlayersIcons(25),
], ],
)), ),
), const SizedBox(height: 5),
const Spacer(), _buildPlayersIcons(25),
_buildToggleListButton() ],
], )),
), const Spacer(),
_buildToggleListButton()
],
), ),
); ),
);
}
Widget _buildPlayersIcons([double? size]) => fluent.Row( Widget _buildPlayersIcons([double? size]) => fluent.Row(
children: [ children: [