Media Player Using Flutter

August 04, 2020

Media Player Using Flutter

Flutter is a mobile development SDK and an open-source project currently in beta. It is developed by Google. It helps you build a fast, beautiful, and cross-platform mobile application. It uses a new language called Dart.

One of the biggest advantages of Flutter is Reactive views and Widgets. Flutter provides Reactive views without the need for the javascript bridge. It improves performance significantly. Everything is Widget

Key Features

Hot Reload: Flutter’s version of hot reload really ease the effort and makes the development process enjoyable. It is already present in React Native.

Smart widgets: If a single widget has an error in processing, only that widgets and its child will get affected. All other widgets will render just fine. In place of affected widgets, the error message is displaced.

Everything is a widget: In Flutter, Everything is a widget nested inside another widget. It comes with beautiful, customizable widgets and we can control the behavior of each widget, and also styling becomes easy.

Problem statement

1. Create a flutter app.

2. Use assets (eg. audios and videos).

3. The app will have to play these audios and videos from Assets.

4. Also, add Features to play audio and video from the Internet(Network).

5. Create buttons like play, pause, and stop for audio and video both.

Let's look at the code

import 'package:flutter/material.dart';

import 'UI/home.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return myapp();
  }
}

this is the main. dart file code which imports two packages one material. dart package provided by the flutter for building an app with the material design...and then we create a main function which by runs app method

Also, note that execution always starts from Main() function and there is Only one file which contains the main function

It uses a build context method of storing widgets so it enables the hot-reload features to our app which is somewhat like magic for developers as they can see the changes they made in code on a real app just like the way we are painting or drawing we can see the changes we make in front of eyes so rather than reloading the app on an emulator which is a very time-consuming process..hot reloading makes life easy!!

Let's go-ahead to home.dart file:

import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/material.dart';
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
import 'package:audioplayers/audioplayers.dart';

these are the packages which we need to import in home.dart file for our required problem statement

for some packages we need to include them in the dependencies section of our pubspec.yaml file in our created project

  cupertino_icons: ^0.1.3
  audioplayers: any
  full_screen_image: any
  video_player: ^0.10.11+2
  flutter_statusbarcolor: ^0.2.3

now you need to create some directories for storing songs or videos -or images and you need to include them as assets in pubspec.yaml file

 assets:
  #   - images/a_dot_burr.jpeg
      - images/796858.jpg
      - audio/demoaudio.mp3

import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/material.dart';
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
import 'package:audioplayers/audioplayers.dart';

AudioPlayer newPlayer = new AudioPlayer();
AudioCache audio = new AudioCache(fixedPlayer: newPlayer);
bool play = false;
bool stop = true;
playAudio() {
  if (play == false || stop == true) {
    audio.play("audio/demoaudio.mp3");
    play = true;
    stop = false;
  }
}

pauseAudio() {
  if (play == true) {
    newPlayer.pause();
    play = false;
  }
}

stopAudio() {
  if (play == true && stop == false) {
    newPlayer.stop();
    play = false;
    stop = true;
  }
}

myapp() {
  FlutterStatusbarcolor.setStatusBarColor(Colors.greenAccent);
  FlutterStatusbarcolor.setNavigationBarColor(Colors.blue.shade900);

  var body = Scaffold(
    appBar: AppBar(
      title: Text("Melody"),
      backgroundColor: Colors.redAccent,
    ),
    backgroundColor: Colors.limeAccent,
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Container(
          width: 400,
          height: 400,
          child: Image.asset("images/796858.jpg"),
        ),
        Row(
          children: <Widget>[
            FlatButton(
              onPressed: playAudio,
              child: Icon(Icons.play_arrow),
            ),
            FlatButton(
              onPressed: pauseAudio,
              child: Icon(Icons.pause),
            ),
            FlatButton(
              onPressed: stopAudio,
              child: Icon(Icons.stop),
            ),
          ],
        ),
      ],
    ),
  );

  var design = MaterialApp(
    home: body,
    debugShowCheckedModeBanner: false,
  );
  return design;
}