Get Started Last updated: 7 th Jan, 2020

Welcome to Documentation of the Video Status App. The video status app is developed by CoderQueen. The Video status app is built using Flutter. So you will get both Android & iOS App from Single Codebase. In near future you will be able to generate the Web App, MacOS App, Windows App using Flutter.

More About Flutter
Flutter Made By  Made By Google

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for Mobile, Web, and Desktop from a single codebase.

Features of Flutter

Fast Development

Paint your app to life in milliseconds with Stateful Hot Reload. Use a rich set of fully-customizable widgets to build native interfaces in minutes.

Expressive and Flexible UI

Quickly ship features with a focus on native end-user experiences. Layered architecture allows for full customization, which results in incredibly fast rendering and expressive and flexible designs.

Native Performance

Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts, and your Flutter code is compiled to native ARM machine code using Dart's native compilers. Thus Flutter gives you full native performance on both iOS and Android.

Introduction

If you have already purchased code then extract compressed file.

Prerequisites

Here the complete list of required things are given.

Installing Tools

All the tutorials are from Great Programmers. Videos are from YouTube.

Installing Flutter on Mac
YouTube: (Hitesh Choudhary) youtube.com/hiteshitube
Installing Flutter on Windows with Android Studio
YouTube: (Hitesh Choudhary) youtube.com/hiteshitube
Setup Microsoft VS Code
YouTube: (Hitesh Choudhary) youtube.com/hiteshitube

Firebase

Firebase helps mobile and web app teams succeed. Firebase gives you functionality like analytics, databases, messaging and crash reporting so you can move quickly and focus on your users. Firebase is built on Google infrastructure and scales automatically, for even the largest apps. One platform, with products that work better together. Firebase products work great individually but share data and insights, so they work even better together.

Creating Firebase Project

Creating Firebase project is very easy, in few minutes you will be able to make Firebase project on your own.

Open Firebase Website: https://firebase.google.com/  

Now click on button "Create Porject"

Write Your Project Name.

And Accept the Terms

Enable Google Analytics

Accept the Terms, Select Firebae Location, use (United States) for Better CDN, you can use regional as well.

Click on "Continue"

In few seconds it will be ready

Click on "Continue"

So this is the Firebase Console, from here you can control everything.

Adding Firebase to Admin Website

Click on web icon

(optional) add nickname

Open Video Status App Directory

Open firebase.js file.

Now back to the your browser window, where we are creating web project. Copy Configuration code.

Note

There is no issue even if your credentials are stolen (API Keys). Because you can add Robust security to your Firebae project using Firebase Rules firebase.google.com/docs/rules

Open the Admin project in VS Code.

Open firebase.js file.

Paste configuration code.

Now goto the Firebase > Authentication.

Click on "Set up sign-in in Method".

Enable 1) Email/Password, 2) Google

Enabled

Now goto the Firebase > Database

Click on "Create Database".

Select Production Mode.

Select Cloud Firestore Location. Then click on "Done"

Cloud Firestore is ready.

Now goto the Rules and change it to your choice. Make sure you write secure rules for better security.

Note

There is no issue even if your credentials are stolen (API Keys). Because you can add Robust security to your Firebae project using Firebase Rules firebase.google.com/docs/rules

Navigate to Firebase > Storage.

Click on the "Get Started" button

Click next.

Click on "Done".

Cloud Storage is ready.

Goto Authentication.

Click here to create user.

Configuring Flutter Application

Open App/ Project to your code editor (VS Code).

Click on "Get Packages" or run > flutter pub get

open config/config.dart to change configuration.

Change values as per your need.

Add your AdMob App ID.

Change App Icon

To change any resource, replace the images inside assets/ folder. Make sure you use same name as previous.

To apply change of icon write following command

  1. > flutter pub get
  2. > flutter pub run flutter_launcher_icons:main

Configure Android App

Goto the Firebase.

Select Android

Add Package Name and Your Computer's SHA Key.

Info

To generate SHA key, Read following Guide View Command

Generating SHA KEY

Download google-services.json and save it securely.

Store it inside VideoStatusApp >app > android > app > google-services.json

Then open android > app > build.gradle

Replace the applicationId.

Goto the Firebase and click next.

Click on the "Skip this step".

Open AndroidManifest.xml File.

Add Your AdMob Android App ID.

Configure iOS App

Goto the Firebase. and click on the iOS Button

Add your package ID, then click on "Register App"

Download GoogleServices-Info.plist

Open App folder inside VideoStatusApp

Now open iOS Folder

Open Runner.xcworkspace

Drag n Drop GoogleServices-Info.plist file to Runner > Runner

Select "Copy items if needed"

Goto the Firebase. and click on the "Next" Button

click next

Click on "Skip this step"

Now open app project in VSCode. then open file ios/Runner/Info.plist

Copy Reverse Client ID

Paste Here

Replace your AdMob iOS App ID in Info.plist

Run Flutter App

Open Terminal. and use following command > flutter run

In few moments you will see application running on your Device.

Build & Publish Flutter App

Build & Publish Android App

To build and publish Android app, follow official Documentation Click here for Android

Build & Publish iOS App

To build and publish iOS app, follow official Documentation Click here for iOS