Audio-Video Player in Flutter

Task Synopsis

Let’s Start

video_player: ^0.10.11+2  //for video player
audioplayers: ^0.14.2 //for audio player
file_picker: ^1.5.0+2 //to pick file from local storage
class MyAudioPlayer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
AudioPlayer _audioPlayer = AudioPlayer();
bool isPlaying = false;
String currentTime = "00:00";
String completeTime= "00:00";

@override
void initState() {
super
.initState();

_audioPlayer.onAudioPositionChanged.listen((Duration duration){
setState(() {
currentTime = duration.toString().split(".")[0];
});
});

_audioPlayer.onDurationChanged.listen((Duration duration){
setState(() {
completeTime = duration.toString().split(".")[0];
});
});

}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Stack(
children: <Widget>[

Image.asset("assets/images/cover.jpg", fit: BoxFit.contain,),

Container(
width: MediaQuery.of(context).size.width*0.8,
height: 80,

margin: EdgeInsets.only(top: MediaQuery.of(context).size.height*0.7, left: MediaQuery.of(context).size.width*0.1),

decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50)
),


child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
IconButton(
icon: Icon(isPlaying ? Icons.pause : Icons.play_arrow),
onPressed: (){
if(isPlaying){
_audioPlayer.pause();

setState(() {
isPlaying = false;
});
}else{
_audioPlayer.resume();

setState(() {
isPlaying = true;
});
}

},
) ,

SizedBox(width: 16,),

IconButton(
icon: Icon(Icons.stop),
onPressed: (){
_audioPlayer.stop();

setState(() {
isPlaying = false;
});

},
),

Text(currentTime, style: TextStyle(fontWeight: FontWeight.w700),),

Text(" | "),

Text(completeTime, style: TextStyle(fontWeight: FontWeight.w300),),



],
),
),
],
),


floatingActionButton: FloatingActionButton(
heroTag: "Audio",
child: Icon(Icons.audiotrack),
onPressed: () async{
String filePath = await FilePicker.getFilePath();

int status = await _audioPlayer.play(filePath, isLocal: true);

if(status == 1){
setState(() {
isPlaying = true;
});
}
},
),

);
}
}
class VideoPlayerApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'IIEC RISE',
home: VideoPlayerScreen(),
);
}
}
class VideoPlayerScreen extends StatefulWidget {
VideoPlayerScreen({Key key}) : super(key: key);

@override
_VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}
class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
VideoPlayerController _controller;
Future<void> _initializeVideoPlayerFuture;

@override
void initState() {
_controller = VideoPlayerController.network(
'https://github.com/dineshcode97/Flutter-Data/raw/master/riseintro.MP4',
);

_initializeVideoPlayerFuture = _controller.initialize();

_controller.setLooping(true);
super.initState();
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Python IIEC RISE'),
backgroundColor: Colors.red,
),
body: Column(
children: <Widget>[
FutureBuilder(
future: _initializeVideoPlayerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
);
} else {
return Center(child: CircularProgressIndicator());
}
},
),
FloatingActionButton(
backgroundColor: Colors.red,
onPressed: () {
setState(() {
if (_controller.value.isPlaying) {
_controller.pause();
} else {
_controller.play();
}
});
},
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
],
),
floatingActionButton: FloatingActionButton(
heroTag: "gotoaudio",
backgroundColor: Colors.red,
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => MyAudioPlayer ()));
},
child: Icon(Icons.music_note,
),
),
);
}
}

Running App ScreenShots

Thankyou for Reading

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dinesh Asija

Head Technical Volunteer @LinuxWorld & IIEC RISE | MLOPS | DevOps AL | Hybrid Multi-Cloud | Terraform | Kubernetes | Docker | EKS | Linux |Ansible