Flutter App Development
Flutter is Google's SDK for crafting beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.
Flutter is fast. It's powered by the same hardware-accelerated 2D graphics library that underpins Chrome and Android: Skia. Flutter is architected to support glitch-free, jank-free graphics at the native speed of your device. Flutter code is powered by the world-class Dart platform, which enables compilation to 32-bit and 64-bit ARM machine code for iOS and Android, as well as JavaScript for the web and Intel x64 for desktop devices.
Let's create an app that plays music and video from cache as well as network.
TASK:
1.Create a flutter app.
2. Use assets (eg. audios and videos).
3. App will have to play this audios and videos from Assets.
4. Also add Features to play audio and video from Internet(Network).
5. Create buttons like play, pause and stop for audio and video both.
Let's get started :
SPLASH.DART
import 'package:beatzly_app/ui/beatzly.dart';
import 'package:flutter/material.dart';
import 'package:custom_splash/custom_splash.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomSplash(
imagePath: 'assets/rock_music_PNG59.png',
backGroundColor: Colors.blue[50],
// backGroundColor: Color(0xfffc6042),
animationEffect: 'zoom-in',
logoSize: 1000,
// home: Mychat(),
home: MyMusic(),
// customFunction: duringSplash,
duration: 2500,
type: CustomSplashType.StaticDuration,
// outputAndHome: op,
);
}
}
beatzly.dart : This file contains audios we want to play in our app and functions like play, pause and stop
import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
AudioPlayer audioPlayer = AudioPlayer();
playit() {
var a=AudioCache();
a.play('bey711.mp3');
}
pauseit(){
audioPlayer.pause();
}
stopit() {
audioPlayer.stop();
}
var mymusic=Icon(Icons.queue_music);
class MyMusic extends StatelessWidget {
music(){
//Navigator.pushNamed(context,"/video");
}
@override
Widget build(BuildContext context) {
return
Scaffold(
appBar: AppBar(
title: Center(child: Text('BEATZLY',style: TextStyle(fontSize: 35,fontWeight: FontWeight.bold,fontStyle:FontStyle.italic,
color:Colors.cyanAccent),)),
actions: <Widget>[ IconButton(icon: mymusic,onPressed:
(){
Navigator.pushNamed(context, "/video");
})],
backgroundColor: Colors.black,
)
,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[SingleChildScrollView(
child: Stack(
children:<Widget>[ Card(
color: Colors.tealAccent,
child: Image.asset('bey.jpg'), ),
Container(
padding:EdgeInsets.only(top:500) ,
alignment: Alignment.center,
child:Text('SONG: 7/11 (BEYONCE)',style: TextStyle(fontSize: 30,fontWeight: FontWeight.bold,fontStyle:FontStyle.italic),)
) ]),
),
Container(
child: Card(
elevation:5,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const RaisedButton(
color: Colors.cyanAccent,
onPressed: playit,
child: Icon(
Icons.play_arrow, size: 50,
),
), const RaisedButton(
color: Colors.cyanAccent,
onPressed: pauseit,
child: Icon(
Icons.pause, size: 50,
),
)
,
const RaisedButton(
color: Colors.cyanAccent,
onPressed: stopit,
child: Icon(
Icons.stop, size: 50,)
, )]),
))])));
}
}
VIDEO LINK OF THE APP:
Another SCREEN for playing videos from the internet as well as from the assets folder
videomain.dart: this file has the functions to pause, play and stop the videos
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:beatzly_app/ui/beatzly.dart';
class VideoPlayerApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Video Player',
home: VideoPlayerScreen(),
debugShowCheckedModeBanner:false,
);
}
}
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() {
// Create and store the VideoPlayerController. The VideoPlayerController
// offers several different constructors to play videos from assets, files,
// or the internet.
_controller = VideoPlayerController.network(
'https://github.com/ashimachopra20/beatzly/raw/master/WhatsApp%20Video%202020-08-04%20at%209.07.31%20PM.mp4',
);
// Initialize the controller and store the Future for later use.
_initializeVideoPlayerFuture = _controller.initialize();
// Use the controller to loop the video.
_controller.setLooping(true);
super.initState();
}
@override
void dispose() {
// Ensure disposing of the VideoPlayerController to free up resources.
_controller.dispose();
super.dispose();
}
var myicon=Icon(Icons.video_label);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Center(child: Text('VIDEO PLAYER',style: TextStyle(fontSize: 35,fontWeight: FontWeight.bold,fontStyle:FontStyle.italic,
color:Colors.blueGrey),)),
actions: <Widget>[ IconButton(icon: myicon,onPressed:(){
Navigator.pushNamed(context, "/music");
},)],
backgroundColor: Colors.yellowAccent,
),
// Use a FutureBuilder to display a loading spinner while waiting for the
// VideoPlayerController to finish initializing.
body: FutureBuilder(
future: _initializeVideoPlayerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
// If the VideoPlayerController has finished initialization, use
// the data it provides to limit the aspect ratio of the video.
return AspectRatio(
aspectRatio: _controller.value.aspectRatio,
// Use the VideoPlayer widget to display the video.
child: VideoPlayer(_controller),
);
} else {
// If the VideoPlayerController is still initializing, show a
// loading spinner.
return Center(child: CircularProgressIndicator());
}
},
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.yellowAccent,
onPressed: () {
// Wrap the play or pause in a call to `setState`. This ensures the
// correct icon is shown.
setState(() {
// If the video is playing, pause it.
if (_controller.value.isPlaying) {
_controller.pause();
} else {
// If the video is paused, play it.
_controller.play();
}
});
},
// Display the correct icon depending on the state of the player.
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
VIDEO LINK OF THE APP:
Check out my code , open to any improvements :)
Great