
Download the starter code from the next section
Push play and work hard every day to turn challenges into change as you build a video and voice call app in Flutter.
Learn about the project structure and how we will go ahead and what we will learn.
Organize a flutter project by creating a structured folder hierarchy—pages, frame, welcome—and add core files like first_bindings.dart, index.dart, state.dart, and view.dart while reviewing required packages in pubspec.yaml.
Leverage GetX state management to build a welcome controller and welcome state, create bindings, expose state variables, and use onReady for navigation and routing between pages.
Create a welcome library by exporting the state, controller, and index files, exposing a single library named welcome for easy referencing across the app.
Create a welcome page as a stateless Flutter widget, bind its title to a controller via GetX, and style text with Montserrat, primary colors, and a scaffold layout.
Build a responsive flutter screen by configuring margins, colors, and design size with screen util, spx font sizing, and GetX setup for adaptive UI.
Build the sign-in page UI, rename and connect the sign in state, binding, and controller, and organize files into a sign in folder before advancing to the controller section.
learn to create a Google sign-in button in flutter by building a reusable third-party login widget with styled containers, border radius, shadows, padding, and dynamic login type handling.
Build a sign-in page with dynamic login type and logo by passing parameters, using Dart string interpolation to switch Google, Facebook, and Apple logos.
Implement Google sign-in in a Flutter sign-in controller, configure OpenID scope, and handle login types (Google, Facebook, Apple, phone) with async/await and error handling.
Learn to change android package name and iOS bundle identifier, replace identifiers across files, and reconfigure Firebase with FlutterFire for iOS and Android.
Here you will build a real world app and master app building technique by learning Flutter, Laravel, Firebase and third party SDK for audio and video call app.
Who will take it
Beginners to advanced learners
For landing a job
For colleague thesis
For prototyping
For mastering app building
App functional features
Third party login
Phone number login
Text chat
Image chat
Audio call chat
Video call chat
Sending notification (text, audio and video chat)
Profile page
Notification on text message receive
Notification on audio call
Notification on video call
Sound on initiating audio call
Sound on initiating video call
Save chat history
Third party login would involve Google, Facebook and Apple login. We will also see how to login using phone number. The chatting feature of this is very seamless since we used SQFLITE to save the chatting history locally. First we save chat messages locally and send them to the other end in the background service.
So users feel like the app very fast sending messages. The same happens for sending images. We first save the image locally and then send to other user.
We also save user profile locally, so you don't have to confirm with Firebase or Laravel for login.
Next time a user logs in, user will feel like it's fast, since we read the data locally first. The same happens for chatting history. Chat history is read from local storage first.
Flutter framework
We used Flutter framework for building beautiful UI for both iOS and Android. In Flutter framework, we also cover a lot of Dart knowledge and how to use models and classes to work with view and controllers.
Firebase service
We used Firebase for sending users registration and phone number login. We used Firebase also for sending notification. Here in this tutorial you will more complex features of firebase like saving chat history, images, listening to document updates and uploading images.
Laravel framework
Laravel framework we used for building API for authentication. We used it also for saving basic information and communicating with Firebase for sending notification.
Agora SDK
We used Agora SDK for using video and audio call service. Agora provides very stable API for audio and video call.