A TikTok Clone in Flutter and Firebase.

Overview


TikTok Flutter

Clone of TikTok with Flutter and Firebase.

shields.io shields.io shields.io shields.io


drawing

drawing drawing drawing drawing

Caracteristics

Video Demo: https://youtu.be/sMKg6ILYgv0

-TikTok UI
-Swipe Videos
-Dynamic Video Data Source
-User Data (Name, Image)
-Animations(Image rotation)

Libraries

-video_player.
-cloud_firestore:
-cached_network_image

Installation

1.-Clone or download this repository

git clone https://github.com/salvadordeveloper/TikTok-Flutter.git

2.-Config your Firebase instance and insert the google-service.json in android/app/ or ios/Runner

3.-Config flutter project :

flutter pub get

Database

The app obtains the data from Firestore and Firebase Storage.

You can upload your videos to Firebase Storage or any site you want, you only need the link of the source, then configure the archive lib/data/demo_data.dart with the list of your videos, this data going to be automatically saved in your Firestore instance.

TODO

-Likes.
-Comments.
-System of User (Register, Login, Profile Screen).
-Upload Videos from the app

Changelog

19/06/2020

  • Realtime Database To Firestore
  • caroulsel_slider To PageView

21/06/2020

  • Bloc Pattern
  • VideoManager
  • Performace Improvements.

22/07/2020

  • Change Bloc to Locator with GetIt
  • Solved problems with iOS
  • Better UI
  • Screens Added
  • Clean Code
  • Videos from file
  • Performace Improvements.
Comments
  • Icon getter not defined

    Icon getter not defined

    I running it in Android Studio and i am getting this messages as well:

    error: The getter 'person_add_alt_1_outlined' isn't defined for the type 'Icons'. (undefined_getter at [tiktok_flutter] lib/screens/profile_screen.dart:21)

    error: The getter 'qr_code' isn't defined for the type 'Icons'. (undefined_getter at [tiktok_flutter] lib/screens/search_screen.dart:43)

    Any idea how to resolve this?

    opened by TheFutureStartsNow 5
  • Firebase Database

    Firebase Database

    Hi,

    I have created my firebase instance and generated google-services.json file and added in android/app path but database/tables are not created when i run this project so please tell me where i am wrong? i want to add any connections in project files? I am new to flutter so please guide me. I am getting an error in videos_api.dart page as "Exception has occurred. RangeError (RangeError (index): Invalid value: Valid value range is empty: 0)" please guide me.

    opened by RaviKumarK25 5
  • Use local database instead of Firebase

    Use local database instead of Firebase

    Hi,

    First of all you have done a great job to creating this as i have found many TikTok UI clone but they are just using background image. You have created a complete project.

    I am struggling to use this with my local database which is MySql.

    Also i didn't found much documentation for this. Youtube video was also smaller.

    Can you put some documentations or help to implement it with other database instead of Firebase.

    opened by rayad 4
  • Video is not loading

    Video is not loading

    E/flutter (17787): [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: RangeError (index): Invalid value: Valid value range is empty: 0 E/flutter (17787): #0 List.[] (dart:core-patch/growable_array.dart:177:60) E/flutter (17787): #1 FeedViewModel.loadVideo (package:tiktok_flutter/screens/feed_viewmodel.dart:35:33) E/flutter (17787): #2 _FeedScreenState.initState (package:tiktok_flutter/screens/feed_screen.dart:28:19) E/flutter (17787): #3 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4765:58) E/flutter (17787): #4 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4601:5) E/flutter (17787): #5 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3569:14) E/flutter (17787): #6 Element.updateChild (package:flutter/src/widgets/framework.dart:3327:18) E/flutter (17787): #7 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6118:14) E/flutter (17787): #8 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3569:14) E/flutter (17787): #9 Element.updateChild (package:flutter/src/widgets/framework.dart:3327:18) E/flutter (17787): #10 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4652:16) E/flutter (17787): #11 Element.rebuild (package:flutter/src/widgets/framework.dart:4343:5) E/flutter (17787): #12 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4606:5) E/flutter (17787): #13 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4601:5) E/flutter (17787): #14 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3569:14) E/flutter (17787): #15 Element.updateChild (package:flutter/src/widgets/framework.dart:3327:18) E/flutter (17787): #16 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6118:14) E/flutter (17787): #17 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3569:14) E/flutter (17787): #18 Element.updateChild (package:flutter/src/widgets/framework.dart:3327:18) E/flutter (17787): #19 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6118:14) E/flutter (17787): #20 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3569:14) E/flutter (17787): #21 Element.updateChild (package:flutter/src/widgets/framework.dart:3327:18) E/flutter (17787): #22 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4652:16) E/flutter (17787): #23 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4800:11) E/flutter (17787): #24 Element.rebuild (package:flutter/src/widgets/framework.dart:4343:5) E/flutter (17787): #25 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4606:5) E/flutter (17787): #26 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4791:11) E/flutter (17787): #27 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4601:5) E/flutter (17787): #28 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3569:14) E/flutter (17787): #29 Element.updateChild (package:flutter/src/widgets/framework.dart:3327:18) E/flutter (17787): #30 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6118:14) E/flutter (17787): #31 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3569:14) E/flutter (17787): #32 Element.updateChild (package:flutter/src/widgets/framework.dart:3327:18) E/flutter (17787): #33 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6118:14) E/flutter (17787): #34 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3569:14) E/flutter (17787): #35 Element.updateChild (package:flutter/src/widgets/framework.dart:3327:18) E/flutter (17787): #36 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4652:16) E/flutter (17787): #37 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4800:11) E/flutter (17787): #38 Element.rebuild (package:flutter/src/widgets/framework.dart:4343:5) E/flutter (17787): #39 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4606:5) E/flutter (17787): #40 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4791:11) E/flutter (17787): #41 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4601:5) E/flutter (17787): #42 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3569:14) E/flutter (17787): #43 Element.updateChild (package:flutter/src/widgets/framework.dart:3327:18) E/flutter (17787): #44 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4652:16) E/flutter (17787): #45 Element.rebuild (package:flutter/src/widgets/framework.dart:

    opened by shubhamrb 3
  • Can you make a tutorial for this please?

    Can you make a tutorial for this please?

    @salvadordeveloper Hello, I am really liking this whole idea. Could you perhaps make a youtube tutorial on this. Also I want to know where do I add the google-services.json and what rules do I need to change in the firebase?

    opened by akshaybalaji123 3
  • Out Of Memory Exception when scrolling through many videos

    Out Of Memory Exception when scrolling through many videos

    Hey man I believe your project is quite amazing, I have been having fun with it for the past few days.

    One issue I cannot fix at all, I am getting out of memory exception when scrolling through many videos, I have been trying to find a way to dispose the video controller without success

    I see that you have tried also, did you manage to solve that issue somehow ?

    Thanks !

    opened by massanu 1
  • CocoaPods can't be downloaded

    CocoaPods can't be downloaded

    I have followed the instructions in the readme and added my firebase file and when i try to start the app in iOS i get this:

    Resolving dependencies of Podfile [!] CDN: trunk URL couldn't be downloaded: https://cdn.cocoapods.org/CocoaPods-version.yml Response: 500

    Fastly error: unknown domain cdn.cocoapods.org

    Fastly error: unknown domain: cdn.cocoapods.org. Please check that this domain has been added to a service.

    Details: cache-fra19171-FRA

    Any idea?

    opened by TheFutureStartsNow 1
  • Getting Error

    Getting Error

    Hi @salvadordeveloper bro, please help me to solve this issue. I am getting error in these below codes

    var userData = await Firestore.instance.collection("Users").where("username",isEqualTo: userId).getDocuments(); var videosViewed = userData.documents[0].data['videosViewed'];

    are you using any user table? please help me to solve my issue. I am waiting for your reply,

    opened by RaviKumarK25 1
  • First video freezes due to race condition with loading of first videos

    First video freezes due to race condition with loading of first videos

    I noticed that sometimes when running the app, the first video froze after a few frames and the audio from the 2nd video started playing. After analyzing, it seems to be due to a race condition on initState of _FeedScreenState:

      void initState() {
        feedViewModel.loadVideo(0);
        feedViewModel.loadVideo(1);
    
        super.initState();
      }
    
      void loadVideo(int index) async {
        if (videoSource!.listVideos.length > index) {
          await videoSource!.listVideos[index].loadController();
          videoSource!.listVideos[index].controller?.play();
          notifyListeners();
        }
      }
    

    Both videos are loaded asynchronously, and after loading the video starts to get played. If the 1st video gets loaded before the 2nd, then when the 2nd finishes loading we call controller.play() which starts playing the audio from the 2nd video.

    opened by luistrivelatto 0
Owner
Salvador Valverde
Salvador Valverde
A TikTok Clone in Flutter and Firebase.

TikTok Flutter Clone of TikTok with Flutter and Firebase. Caracteristics Video Demo: https://youtu.be/sMKg6ILYgv0 -TikTok UI -Swipe Videos -Dynamic Vi

Salvador Valverde 863 Jan 3, 2023
Full Stack TikTok Clone using Flutter, Firebase & GetX

TikTok Clone A Tiktok App- Works on Android & iOS! Features Authentication with Email & Password Uploading Videos with Caption Compressing Videos Gene

Rivaan Ranawat 200 Dec 30, 2022
A tiktok clone built with flutter and getx

A tiktok clone built with flutter and getx

Ikwechegh Ukandu 5 Apr 3, 2022
A clone of the TikTok App using Flutter.

Tik Tok App clone TikTok is an iOS and Android media app for creating and sharing short videos. The app was launched in 2017 by ByteDance, for markets

Maxwell Cofie 211 Dec 19, 2022
Flutter Tiktok 抖音实战 🍰🍓🍖🍟🍕🍔

Flutter实现抖音的UI效果,希望大家喜欢 Flutter Version:2.0.2 Dart Version:2.12.1 B站视频地址 推荐 视频点赞 侧边栏点赞 评论/分享 首页测滑 用户页 推荐/关注/城市 tab切换 搜索页 直播页 直播页切换 朋友页测滑 拍摄页 扫一扫/抖音码 北

钉某人 398 Jan 6, 2023
🚀 This is mobile application using Flutter for develop Tiktok

Flutter Tiktok Clone Description: ?? This is mobile application using Flutter for develop Tiktok How I can run it? ?? Clone this repo ?? Run below cod

Dao Hong Vinh 12 Feb 8, 2022
A Tiktok App- Works on Android & iOS!

TikTok Clone A Tiktok App- Works on Android & iOS! Features Authentication with Email & Password Uploading Videos with Caption Compressing Videos Gene

Alok Dubey 32 Jan 9, 2023
WiwaChat-WhatsApp-Like-Clone - A beautiful and fully functional WhatsApp UI clone in Flutter

Wiwa Chat - A WhatsApp Clone in Flutter A beautiful and fully functional WhatsAp

Ogbodo ThankGod 7 Nov 6, 2022
Whats-App-Clone-UI-using-Flutter - WhatsApp Clone UI using Flutter

WhatsApp ?? Clone UI ?? using Flutter ?? Screenshots Links My Socials Youtube ch

AmirHossein Bayat 6 Dec 7, 2022
Wordle-clone - A Wordle-clone built using Flutter

Wordle-clone The project consists of two applications : wordle_clone_api : Which

Aswin Gopinathan 2 Jan 25, 2022
Whatapp clone UI - WhatApp UI clone in flutter

whatapp clone in flutter WhatApp UI clone in flutter Getting Started

Neha Tanwar 4 Feb 6, 2022
Fashion App Clone - a clone app from Emre Altunbilek's Flutter Course

Fashion App Clone This is a clone app from Emre Altunbilek's Flutter Course. I am trying to clone UI and improve code.

Eren 5 Oct 2, 2022
Whatsapp-clone - A whatsapp clone with dart

whatsapp-clone Just a simple whatsapp clone with dart

arinzejustinng 1 Mar 28, 2022
A full stack Instagram clone built with Flutter and Firebase

instagram_clone Responsive Instagram clone built with Flutter and Firebase. Getting Started This project is a starting point for a Flutter application

Simba Shi 2 Nov 26, 2022
Fluttergram - A working Instagram clone written in Flutter using Firebase / Firestore

Fluttergram - A working Instagram clone written in Flutter using Firebase / Firestore

Dominique Rwema Bagirishya 33 Oct 5, 2022
(Complete flutter application) Exam and training app as social media, prepared with Firebase backend services, Bloc State management, Singleton design pattern, Unit and widget tests, firebase mocking, Custom local libraries, etc.

(Complete flutter application) Exam and training app as social media, prepared with Firebase backend services, Bloc State management, Singleton design pattern, Unit and widget tests, firebase mocking, Custom local libraries, etc.

Ismael Shakverdiev 45 Jul 14, 2022
Simple product management app, with Auth module made with Firebase Auth and Firebase Firestore ODM

Firestore App Simple product management app, with Auth module made with Firebase Auth and Firebase Firestore ODM. You can login or signup with email o

null 3 Jun 24, 2022
A WhatsApp clone build using Flutter and AWS Amplify DataStore

Whatsapp Clone using Amplify DataStore in Flutter About The Project Built With Flutter AWS Amplify DataStore Getting Started To get a local copy up an

GeekyAnts 35 Jan 4, 2023
Mobile and Desktop whatsapp clone with Flutter UI tool kit

Mobile and Desktop whatsapp clone with Flutter UI tool kit

Travis Okonicha 10 Oct 25, 2022