Discount !! E-commerce App With Backend Source Code Video and Voice Chatting App Firebase Chatting App Source Code Complete Gym App BLoC State Management Source Code Complete Study App Buy Ticket Booking App Source Code Buy Travel App With Backend Source Code Complete Chat App Udemy Course Special Offer Discount !! Online Learning Course App (BLoC) Online Learning Course App (Riverpod) Online Learning Course App (Getx) Discount !! Shopping App (Provider) Cool Flutter Game Nodejs Flutter Complete App

Flutter Video Chat App

Flutter Video Chat App

    Previouly we built a flutter chatting app mostly text and image based. This time we will build a new chatting app using flutter framework. This will include some cool features which covers both video and voice calling along with text and image sending as well as emoji.

    Another main feature of this app is that, you can notification both for audio and video calling. If someone called you you will get notification and the other person will have to wait until you receive it. Both end will have calling sound. It's custom sound.

    This chat app is also included here in this study app source code.

    Cool features of the app

      1. video chat
      2. voice chat
      3. text chat
      4. sending images 
      5. sending stickers
      6. save chat in the local database
      7. sync local database with remote database
      8. both laravel and firebase backend
      9. notification is send first as you do video
      10. notification number and icons based on your chat message number
      11. notification is received even if the app is killed
      12. user need to tap on the button to accept the video call
      13. notification is send first as you do voice call
      14. there's sound on the other side as you call
      15. caller also can hear the sound 
      16. every text message has notification
      17. call ends automitically as you hang up the call
      18. phone number message verification
      19. multi line mesagge box as you type more
      20. auto hide of message box as you are done
      21. show chat time duration
      22. audio video controller (buttons)

    App UI

    Get the complete app from here

    Buymecoffee link

    Patreon link

    Download the apk video chat

    Starter code

    Some features, we were not able to record sound in the screen recording of iOS device.

    Technology used in this app

    1. Flutter framework
    2. Firebase service
    3. Agora SDK
    4. Laravel framework

    The whole architecture is based on Flutter framework. We used Firebase service for chatting and storing user chat information including texts and images. 

    We used Agora SDK for video chat and voice chat.

    We used Laravel Framework for basic backend service and where you can video basic user data.

    App Deployment Locally

    1. create a new flutter project
    2. copy all the files and folers like lib, assets and pubspec.yaml from the downloaded project in your new project
    3. make sure you create a firebase project with above project from terminal
    4. you need to make sure you connect this app with your own firebase project
    5. make sure you generate SHA1 and SHA256 key with your project
    6. create an account with Agora video sdk
    7. install the laravel application
    8. make sure that you have SSL with your domain
    9. make sure you replace the App ID and App Certificate

    App and Laravel

    Agora Laravel and Firebase Integration

    Laravel Backend

    The backend is mostly used for to know how many users do you have and who they are. You may also maintain them from there.

    Backend installation requirement

    1. prepare a domain
    2. have it with SSL
    3. PHP verion 7.4 or higher
    4. MySQL version 5.7 or higher

    Notification

    See how notification works. It should be coming from your app to your server to your firebase account to your user. For this reason we have integrated Firebase Admin SDK with PHP.

    Why use third party SDK

    The reason why we use third party SDK to do it, because Flutter does not provide any higher level API to connect with video technology like WebRTC.

    If a small team or some students try to do it, it would be almost very difficult to get the job done. Even if they do it, the video signal would be very bad and shaky. Apart from them they have to build up their own server to send the video signals to different users in different country.

    They also need to spend thousands of dollars for building servers and decoding the signal.

    Third party SDK solves these problems since they are dedicated to do it and they have a very big team to get the job done. 

    In this app, the way used it here is an example. It requires PHP and Agora integration.

    UI Concepts

    Some concepts used in this app, which are difficult for beginners. These concepts are must for building any kind of complex app. Apart from this app, I have used them in other two apps as well. Let's take a look who they are

    1. CustomScrollView
    2. ScrollController
    3. addPostFrameCallback

    If you just wanna know about them, click on the links and learn on your own free time.

    Issues

    You can not have a Facebook login (only developers account) if you don't publish the app in the Google play and iOS store.

    Simply speaking Facebook login requires app publishing

     

    Change Log

    9. 01-08-2023 multi line message box as you chat

    8. 01-07-2023 time during bug fix

    7. 01-06-2023 phone number verifciation

    6. 01-06-2023 app receives notification even if it's killed

    5. 01-06-2023 show notification number as red dots

    4. 01-05-2023 update time showing during video and voice call

    3. 01-04-2023 update loading icon

    2. 01-03-2023 update routing

    1. 01-03-2023 online

    .......coming more....

    Courses

    Recent posts