import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
import 'dart:ui';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
//setting the project url
String img_cover_url =
"https://i.pinimg.com/736x/a7/a9/cb/a7a9cbcefc58f5b677d8c480cf4ddc5d.jpg";
bool isPlaying = false;
double value = 0;
final player = AudioPlayer();
Duration? duration = Duration(); //seconds: 0
Duration? position = Duration();
void initPlayer() async {
await player.setSource(AssetSource("forest.mp3"));
duration = await player.getDuration();
player.onPositionChanged.listen((Duration d) {
setState(() {
value = d.inSeconds.toDouble();
});
}
);
}
//init the player
@override
void initState() {
// TODO: implement initState
super.initState();
initPlayer();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
constraints: const BoxConstraints.expand(),
height: 300.0,
width: 300.0,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/cover.jpg"),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 28, sigmaY: 28),
child: Container(
color: Colors.black.withOpacity(0.6),
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//setting the music cover
ClipRRect(
borderRadius: BorderRadius.circular(30.0),
child: Image.asset(
"assets/cover.jpg",
width: 250.0,
),
),
const SizedBox(
height: 10.0,
),
const Text(
"Summer",
style: TextStyle(
color: Colors.white, fontSize: 36, letterSpacing: 6),
),
//Setting the seekbar
const SizedBox(
height: 50.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"${(value / 60).floor()} : ${(value % 60).floor()}",
style: const TextStyle(
color: Colors.white,
),
),
Slider.adaptive(
onChanged: (v){
setState(() {
value = v;
});
},
min: 0.0,
max: duration!.inSeconds.toDouble(),
value: value,
onChangeEnd: (newValue) async{
setState((){
value = newValue;
print(newValue);
});
player.pause();
await player.seek(Duration(seconds: newValue.toInt()));
await player.resume();
},
activeColor: Colors.white,
),
Text(
"${duration!.inMinutes} : ${duration!.inSeconds% 60}",
style: const TextStyle(
color: Colors.white,
),
),
],
),
const SizedBox(
height: 60.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60.0),
color: Colors.black87,
border: Border.all(color: Colors.white38),
),
width: 50.0,
height: 50.0,
child: InkWell(
onTapDown: (details) {
player.setPlaybackRate(0.5);
},
onTapUp: (details) {
player.setPlaybackRate(1);
},
child: const Center(
child: Icon(
Icons.fast_rewind_rounded,
color: Colors.white,
),
),
),
),
const SizedBox(
width: 60.0,
),
Container(
width: 50.0,
height: 50.0,
decoration:
BoxDecoration(
borderRadius: BorderRadius.circular(60.0),
color: Colors.black87,
border: Border.all(color: Colors.pink),
),
child: InkWell(
onTap: () async{
if (isPlaying) {
await player.pause();
setState((){
isPlaying = false;
});
} else {
await player.resume();
setState((){
isPlaying = true;
});
player.onPositionChanged.listen(
(position) {
setState((){
value = position.inSeconds.toDouble();
});
},
);
setState(() async {
duration = await player.getDuration() as Duration?;
});
}
},
child: Icon(
isPlaying ? Icons.pause: Icons.play_arrow,
color: Colors.white,
),
)
),
const SizedBox(
width: 60.0,
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60.0),
color: Colors.black87,
border: Border.all(color: Colors.white38),
),
width: 50.0,
height: 50.0,
child: InkWell(
onTapDown: (details) {
player.setPlaybackRate(2);
},
onTapUp: (details) {
player.setPlaybackRate(1);
},
child: const Center(
child: Icon(
Icons.fast_forward_rounded,
color: Colors.white,
),
),
),
),
],
)
],
),
],
),
);
}
}
This is flutter music player application using audioplayer. I want to show the time it played and total music time length for example like below.
1.23 ----- slider ----- 3.14
Only when I click the play button, it shows the total music time length. Before clicking the button, it shows 0.0. But I want it to show total time length from when the page is showed.
Could anyone help me with this?