Using Audio and Video Assets in Flutter

We all know adding audio and videos is one of the crucial part of a beautiful app. So in this blog i have try to show how to use audio and video in Flutter app.

Flutter is a free and open source Google mobile UI framework that provides a fast and expressive way for developers to build native apps on both IOS and Android.

Necessary Requirements:

1. Flutter whole setup
2. Android Studio
3. Android sdk
4. Some basic knowledge of Flutter
5. You can get my code from here

Steps:

Step 1: Use below command in terminal to create a new app

flutter create <your_app_name>

Step 2: Go to lib -> main.dart and clear all previous code.

Then go to pubspec.yaml file and there add packages for our app for playing audio and video.
Note: The syntax should be correct to avoid any error.

dependencies:
  flutter:
    sdk: flutter
  video_player: 
  audioplayers: ^0.15.1

Then use flutter pub get command in terminal to configure above packages.

Step 2: Now in order to play video on android you have to make one adjustment in build gradle file. File can be located under your app as below.

android => app => build.gradle

There change minSdkVersion to 21. By default it is 16.

Step 3: Create assets folder and place your audio or videos there.

Step 4: Now mention your assets in pubspec.yaml file.

Now restart your code editor to make above changes successfully.

Step 5: Below is the code for main.dart file . This is the main file which is run when our app runs.

Step 6: Below is the guide on how you can add your assets in your app.

For Playing Video: Following steps are done are necessary in order to play a video

• Create a StatefulWidget with a companion State class
• Add a variable to the State class to store the VideoPlayerController
• Add a variable to the State class to store the Future returned from VideoPlayerController.initialize
• Create and initialize the controller in the initState method
• Dispose of the controller in the dispose method

For more guide and better understanding you can visit here.

Similarly for Playing Audio : Follow below steps

• Create a AudioPlayer instance . It can play a single audio at a time. To create it, simply call the constructor

AudioPlayer audioPlayer = AudioPlayer();

• For playing audio create a async function. Below method works best for playing audio files from internet.
  For Local Assets, you have to use the AudioCache class.

play() async {
    int result = await audioPlayer.play(url);
    if (result == 1) {
      // success
    }
  }

• Then for controlling audio you can use below methods

1). For Pause

int result = await audioPlayer.pause();

2). For resume

int result = await audioPlayer.resume();

3). For stop

int result = await audioPlayer.stop();

for more help visit here.

Optional: Here is my code for playing audio and video. My code is not perfectly optimised but you can refer to get some help.

Step 7: That’s it you are ready to go. Run avove code on emulator or android device to test.

Here is my sample shots for the app i created.

Video is playing at top. There are two buttons for controlling video.
One is Pause and Play button and other is Stop button.
Same goes for audio.

So that’s it for this blog. See you in next blog.