Creating a business card in Flutter with Audio & Video!

Flutter is the best framework available today for mobile App Development. To support this statement, I have multiple reasons:

• It is developed by Google.
• It supports Hot reloading.
• It supports Mobile Development with Website Development also.
• It is a standard tool to develop apps for iOS & Android.

This blog will explain the procedure of designing a beautiful business profile card with a Modular Approach. Code is written in Dart Langauge because understands only Dart Language.

Code & Explanation

The most important step before writing this code is to include some of the dependencies for other modules in the flutter pubspec.yml file for extra functionality. Add the below-given dependencies in the dependencies section of the pubspec.yaml file.

audioplayers: ^0.15.1
video_player: ^0.10.11+2

Another important part is to uncomment the assets section in the same file & then add the path to all the assets which are to be used in the App development.

Module 1: Creating the "main" execution file.

# Importing the required files.
import 'package:Audio_Video_Play/home.dart';
import 'package:flutter/material.dart';


# Main function of the program.
void main() {
  runApp(MyApp());
}


# Implementing StatelessWidget class to provide the functionality of the Hot Reload.
class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return myHome();
  }
}

Module 2: Creating the complete Profile in one go!

# Importing required Libraries
import 'package:audioplayers/audio_cache.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:video_player/video_player.dart';


# Function to print the content when Email button is pressed.
Email() {
  print("Email Sent");
}


tap() {
  print("Image Tapped Single Time!");
}


doubleTap() {
  print("Image Tapped Double Time!");
}


myHome() {
  var myBody = Container(
    width: double.infinity,
    height: double.infinity,
    color: Colors.amberAccent[100],
    margin: EdgeInsets.all(15),
    alignment: Alignment.center,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      //crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        Text(
          "Local Assets",
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 25,
            color: Colors.pink,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic,
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              width: 160,
              margin: EdgeInsets.all(10),
              child: RaisedButton(
                onPressed: () => AudioCache().play("Audios/sultan.mp3"),
                color: Colors.greenAccent,
                splashColor: Colors.greenAccent,
                child: Card(
                  color: Colors.greenAccent,
                  elevation: 50,
                  child: Text(
                    "Play song",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.purpleAccent,
                      fontSize: 22,
                      fontStyle: FontStyle.italic,
                    ),
                  ),
                ),
              ),
            ),
            Container(
              width: 160,
              margin: EdgeInsets.all(10),
              child: RaisedButton(
                onPressed: () {
                  var audioPlayer = AudioPlayer(mode: PlayerMode.MEDIA_PLAYER);
                  audioPlayer.pause();
                },
                color: Colors.greenAccent,
                splashColor: Colors.greenAccent,
                child: Card(
                  color: Colors.greenAccent,
                  elevation: 50,
                  child: Text(
                    "Pause song",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.purpleAccent,
                      fontSize: 22,
                      fontStyle: FontStyle.italic,
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
        Text(
          "Remote Assets",
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 25,
            color: Colors.pink,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic,
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              width: 160,
              margin: EdgeInsets.all(10),
              child: RaisedButton(
                onPressed: () => VideoPlayerController.network(
                        "https://github.com/HarshitDawar55/Flutter/raw/master/Audio_Video_Play/assets/Vidoes/SGA.mp4")
                    .play(),
                color: Colors.greenAccent,
                splashColor: Colors.greenAccent,
                child: Card(
                  color: Colors.greenAccent,
                  elevation: 50,
                  child: Text(
                    "Play Video",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.purpleAccent,
                      fontSize: 22,
                      fontStyle: FontStyle.italic,
                    ),
                  ),
                ),
              ),
            ),
            Container(
              width: 160,
              margin: EdgeInsets.all(10),
              child: RaisedButton(
                onPressed: () => VideoPlayerController.network(
                        "https://github.com/HarshitDawar55/Flutter/raw/master/Audio_Video_Play/assets/Vidoes/SGA.mp4")
                    .pause(),
                color: Colors.greenAccent,
                splashColor: Colors.greenAccent,
                child: Card(
                  color: Colors.greenAccent,
                  elevation: 50,
                  child: Text(
                    "Pause Video",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.purpleAccent,
                      fontSize: 21,
                      fontStyle: FontStyle.italic,
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
        Stack(
          // This will allign the child container as the Top Center.
          alignment: Alignment.topCenter,
          children: <Widget>[
            Container(
              // alignment: Alignment.bottomRight,
              width: 350,
              height: 250,
              // color: Colors.pinkAccent[100],
              margin: EdgeInsets.all(50),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.pinkAccent[100],
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    "Harshit Dawar",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 25,
                        fontWeight: FontWeight.bold),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      IconButton(icon: Icon(Icons.email), onPressed: Email),
                      Text(
                        "CEO & CTO @TW",
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                          color: Colors.white,
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),


            // Image Container
            InkWell(
              onTap: tap,
              onDoubleTap: doubleTap,
              child: Container(
                width: 110,
                height: 110,
                // color: Colors.brown,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(50),
                  border: Border.all(
                    color: Colors.pinkAccent[100],
                  ),
                  image: DecorationImage(
                    image: NetworkImage(
                        "https://github.com/HarshitDawar55/Flutter/raw/master/Images/Latest_Image.jpg"),
                    fit: BoxFit.cover,
                  ),
                  // color: Colors.pinkAccent[100],
                ),
              ),
            ),
          ],
        ),
      ],
    ),
  );


  // ignore: non_constant_identifier_names
  var HomeDesign = Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.greenAccent,
      title: Text(
        "Mr. Harshit Dawar's business Card!",
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: 23,
          fontWeight: FontWeight.bold,
          fontStyle: FontStyle.italic,
          color: Colors.red,
        ),
      ),
    ),
    body: myBody,
  );


  return MaterialApp(
    debugShowCheckedModeBanner: false,
    home: HomeDesign,
  );
}

Look of Final App!

Thank you so much for investing your time in reading my blog!