答案 0 :(得分:2)
编辑:根据您的要求,您想要创建一个自定义播放器,该播放器根据歌曲的当前位置更新其颜色。
为此,您可以使用CustomPaint
播放器创建一个CustomPainter
小部件,该播放器会在歌曲状态更改时进行更新。
class MyPlayerBar extends CustomPainter {
MyPlayerBar({this.fullSongTimeInSeconds, this.currentSecond});
final int fullSongTimeInSeconds;
final int currentSecond;
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
double cursor = (currentSecond * size.width) / fullSongTimeInSeconds;
Radius cornerRadius = Radius.circular(3.0);
// Already played half color (your darker orange)
paint.color = Color.fromRGBO(206, 69, 0, 1.0);
// Painting already played half
canvas.drawRRect(
RRect.fromRectAndCorners(Rect.fromLTWH(0.0, 0.0, cursor, size.height),
topLeft: cornerRadius, bottomLeft: cornerRadius),
paint);
// Yet to play half color (your lighter orange)
paint.color = Color.fromRGBO(227, 113, 18, 1.0);
// Painting the remaining space
canvas.drawRRect(
RRect.fromRectAndCorners(Rect.fromLTWH(cursor, 0.0, size.width - cursor, size.height),
bottomRight: cornerRadius, topRight: cornerRadius),
paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
我创建了一个完整的示例,该示例模拟3分钟的歌曲(180秒),结果如下:
完整的示例代码:
class MyPlayer extends StatefulWidget {
_MyPlayerState createState() => _MyPlayerState();
}
class _MyPlayerState extends State<MyPlayer> {
int _songCurrentPosition = 0;
int _fullSongInSeconds = 180; // 3 minutes song
@override
void initState() {
super.initState();
_songPlaying();
}
void _songPlaying() async {
if (_songCurrentPosition >= _fullSongInSeconds) return;
await Future.delayed(Duration(seconds: 1));
setState(() => _songCurrentPosition += 1);
_songPlaying();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My player'),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: CustomPaint(
painter: MyPlayerBar(
currentSecond: _songCurrentPosition, // Your current song position in seconds
fullSongTimeInSeconds: _fullSongInSeconds,
),
child: Container(
alignment: Alignment.center,
height: 30.0,
width: double.infinity,
child: Text(
'Playing: 01 - Hey, this is my life',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
),
),
),
);
}
}
class MyPlayerBar extends CustomPainter {
MyPlayerBar({this.fullSongTimeInSeconds, this.currentSecond});
final int fullSongTimeInSeconds;
final int currentSecond;
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
double cursor = (currentSecond * size.width) / fullSongTimeInSeconds;
Radius cornerRadius = Radius.circular(3.0);
// Already played half color (your darker orange)
paint.color = Color.fromRGBO(206, 69, 0, 1.0);
// Painting already played half
canvas.drawRRect(
RRect.fromRectAndCorners(Rect.fromLTWH(0.0, 0.0, cursor, size.height),
topLeft: cornerRadius, bottomLeft: cornerRadius),
paint);
// Yet to play half color (your lighter orange)
paint.color = Color.fromRGBO(227, 113, 18, 1.0);
// Painting the remaining space
canvas.drawRRect(
RRect.fromRectAndCorners(Rect.fromLTWH(cursor, 0.0, size.width - cursor, size.height),
bottomRight: cornerRadius, topRight: cornerRadius),
paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}