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";
late AudioPlayer advancedPlayer;
Duration _duration = new Duration();
Duration _position = new Duration();
bool isPlaying = false;
bool isPaused = false;
bool isLoop = false;
void initPlayer() async {
await advancedPlayer.setSource(AssetSource("forest.mp3"));
advancedPlayer.onDurationChanged.listen((d) {setState(() {
_duration = d;
}); });
advancedPlayer.onPositionChanged.listen((p) {setState(() {
_position = p;
}); });
}
//init the player
@override
void initState() {
// TODO: implement initState
super.initState();
advancedPlayer = AudioPlayer();
initPlayer();
}
@override
void changeToSecond(int second) {
Duration newDuration = Duration(seconds: second);
advancedPlayer.seek(newDuration);
}
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/forest.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/forest.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(
_position.toString().split(".")[0],
style: const TextStyle(
color: Colors.white,
),
),
Slider.adaptive(
onChanged: (value){},
min: 0.0,
max: _duration.inSeconds.toDouble(),
value:_position.inSeconds.toDouble(),
onChangeEnd: (double value){
setState((){
changeToSecond(value.toInt());
value = value;
});
advancedPlayer.pause();
advancedPlayer.seek(Duration(seconds: value.toInt()));
advancedPlayer.resume();
},
activeColor: Colors.white,
),
Text(
_duration.toString().split(".")[0],
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) {
advancedPlayer.setPlaybackRate(0.5);
},
onTapUp: (details) {
advancedPlayer.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 advancedPlayer.pause();
setState((){
isPlaying = false;
});
} else {
await advancedPlayer.resume();
setState((){
isPlaying = true;
});
}
},
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) {
advancedPlayer.setPlaybackRate(2);
},
onTapUp: (details) {
advancedPlayer.setPlaybackRate(1);
},
child: const Center(
child: Icon(
Icons.fast_forward_rounded,
color: Colors.white,
),
),
),
),
],
)
],
),
],
),
);
}
}
I am currently making the audio player using flutter audio player. I am having a problem with the slider. For the music playing, play and pause icons are working well as when they are clicked, the music plays and stops. However, when I click slider to specific point, music plays even when the status of the music is stopped and icon shown is when music is paused. Could anyone help me with this?