• Courses
  • YouTube
  • Dev News
  • Technology
  • Blogs
  • Flutter Jobs
  • Contact
    • About Us
    • RegisterLogin
    Navoki
    • Courses
    • YouTube
    • Dev News
    • Technology
    • Blogs
    • Flutter Jobs
    • Contact
      • About Us
    • RegisterLogin

      Flutter

      • Home
      • Blog
      • Flutter
      • Firebase integration in Flutter app (Android and iOS)
      Imageedit 8 5907461769 1 | Firebase Integration In Flutter App (Android And Ios)

      Firebase integration in Flutter app (Android and iOS)

      • Posted by Shivam Srivastava
      • Categories Flutter, Developers
      • Date June 6, 2020
      • Comments 0 comment
      Spread the love

      In this tutorial, I will explain how to integrate your flutter project with Firebase with some simple steps.

      Lets Begin

      Firebase Console

      1. Go to firebase console https://console.firebase.google.com

      2. Click on Go to Console at the top right of your window, make sure you are logged in with the Gmail account.

      3. Click on Add project.

      Firebase Console

      4. Enter the name of your project. Then click continue. After your project is created on the firebase console now start to configure it with a flutter app.

      First, Firebase needs to be set up on both native platforms.

      Setup Android project

      5. Click on the android icon to add android project, a popup will open.

      Add Firebase In Android

      6. Enter <your package name> if you don’t know your package name just go to <your_project>/android/app /src/main/AndroidManifest.xml , you can see your project at the top left on your window it looks like com.examples.projectName.

      7. Enter your SHA-1, and then click on Register app. if you don’t know how to get it just go to this link. This will use debug.keystore to generate SHA-1 which for testing/development purposes only. When you will publish your app you have to create new <name>.keystore file to get new SHA-1 and add it in the android app in Project Settings–> Add fingerprint.

      8. Next, you will be asked to download a file google-services.json, just download it and paste in <your_project>/android/app. Remember don’t change the name of this file and also paste it on the correct location else project will not run.

      9. Next, you see some dependency copy it and paste these lines on a given on exact location then click Next. This will be added in <your_project>/android/build.gradle file.

      buildscript {
        repositories {
          // Add the following line:
          google()  // Google's Maven repository
        }
        dependencies {
          // Add the following line:
          classpath 'com.google.gms:google-services:4.3.3'  // Google Services plugin
        }
      }
      allprojects {
        repositories {
          // Add the following line:
          google()  
        }
      }

      and this below line of code will be added in <your_project>/android/app/build.gradle

      // Add the following line:
      apply plugin: 'com.google.gms.google-services'  // Google Services plugin
      android {
      }

      Now you Firebase integration with android app is complete to use different features of Firebase you have to add dependencies of each feature separately. You can get all dependencies from here.

      Still There

      If you have any problem with the related topics just ask me to comment section below.

      Setup iOS project

      10. Click on the iOS icon to add iOS project, a popup will open.

      Add Firebase In Ios

      11. Enter Bundle Id from your XCode Project. Open <project-name>/iosof your flutter project in XCode to check this.

      Xcodepproject

      12. Download the GoogleService-Info.plist file and move it to your project as shown below.

      Googleservice-Info.plist

      13. Open Terminal on path <project-name>/ios and run this code.

      pod init

      14. Open Podfile and add this line for Firebase analytics

      pod 'Firebase/Analytics'

      You have to add Pods for each Firebase feature, You can get a list for all here

      15. After adding Pods run this command. This creates a.xcworkspace file for your app. Use this file for all future development on your application.

      pod install

      16. Now in your AppDelegate class add this import at the top import Firebase

      17. In the same file add this FirebaseApp.configure() line in the same way as mentioned.

        override func application(
          _ application: UIApplication,
          didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
        ) -> Bool {
          
          FirebaseApp.configure() // add here
            
          GeneratedPluginRegistrant.register(with: self) // above this line
          return super.application(application, didFinishLaunchingWithOptions: launchOptions)
        }

      Hurray

      Now your firebase integration is COMPLETE.

      Remember! for each feature you have to add libraries at each native end, the rest of your logic will be on the flutter app. Also, you have to add packages for each feature in flutter pubspec.yaml file, for example

        dependencies:
        firebase_auth: ^0.16.1
        firebase_messaging: ^6.0.16

      Thank you for reading till the end. now what to do next? you can experiment with more firebase feature by following our videos and blogs at navoki.com some of the links are below

      Bookmark(0)

      Please login to bookmark

      Continue with Google
      0

      Tag:firebase into flutter app, flutter firebase tutorial, flutter with firebase, how to integrate firebase into flutter app, integrate firebase into flutter app, introducing flutter, using firestore as a backend to your flutter app

      • Share:
      author avatar
      Shivam Srivastava

      Mobile Solution [email protected], Android and Flutter Dev, Dart ,Founder of @Navoki, Instructor

      Previous post

      Embed CodePen with Flutter on your website
      June 6, 2020

      Next post

      TOP MOBILE APPLICATION DEVELOPER TOOLS in 2020
      June 22, 2020

      You may also like

      everything-about-flutter-3-in-google-i-o-2022 navoki.com
      Everything about Flutter 3 in Google I/O 2022
      12 May, 2022
      Flutter-Web-CORS-Error-SOLVED-Navoki.com
      [SOLVED] Flutter Web CORS Error
      4 May, 2022
      How Video Call works in Flutter
      How Incoming Video Call Notification works in Flutter
      15 April, 2022

      Leave A Reply Cancel reply

      You must be logged in to post a comment.


      Categories

      • Android
      • Dart
      • Dart Server
      • Dart Web
      • Developers
      • Flutter
      • Flutter Desktop
      • Flutter Mobile
      • Flutter Web
      • Fuchsia
      • Go Lang
      • Technology
      • Uncategorized

      Recent Post

      • Everything-About-Flutter-3-In-Google-I-O-2022 Navoki.comEverything about Flutter 3 in Google I/O 2022
      • Flutter-Web-Cors-Error-Solved-Navoki.com[SOLVED] Flutter Web CORS Error
      • How Video Call Works In FlutterHow Incoming Video Call Notification works in Flutter

      Subscribe Now

       

      Recent Courses

      Single And Multi Selection Listview In Flutter

      Single and Multi Selection ListView in Flutter

      Go Installation And Variables

      Go Installation and Variables

      List In Dart Programming Language

      List in Dart Programming language

      Variables In Dart Programming Language

      Variables in Dart Programming language

      View All

      DON’T MISS
      FLUTTER UPDATES

      Be the first to know when our blog is published.

      flutter-mobile-mockup

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   Navoki Technologies Pvt. Ltd.
        JMD Megapolis , Sector 48, Gurugram, Haryana 122018

      Company

      • About Us
      • Blogs
      • Contact
      • Privacy policy
      • Terms & Condition

      Useful Links

      • Courses
      • Youtube
      • Dev News

      Mobile

      Click and Get started in seconds

      "Navoki" is a registered trademark of Navoki.com ® 2020–2030 Navoki Technologies Pvt Ltd.

      • Terms & Condition

      Login with your site account

      Continue with Google

      By "Sign in” above to accept Navoki’s Terms of Service & Privacy Policy.

      Not a member yet? Register now

      Register a new account

      Continue with Google

      By "Sign Up” above to accept Navoki’s Terms of Service & Privacy Policy.

      Are you a member? Login now