Learn how to send a push notification to Android, IOS, and Flutter Web on new document creation on Firestore.

📕 Things covered in this tutorial:

• Connecting Flutter App to Firebase
• Sending test message from Firebase Cloud Messaging to Android device.
• Adding Multidex support
• Creating cloud function to listen for new document create and push notification automatically to a single device by the token.

Make sure you have flutter installed if not visit flutter.dev

So let’s get started coding,

Step 1: Create a flutter project, I am going to do it with Android studio you can user terminal/cmd or VS code there will be no difference.

to create project in android studio click +Start a new flutter project > select flutter application > provide project name and click next.

Step 2: We will start by getting rid of all the comments in the main.dart and getting rid of MyHomePage() stateful widget

this helps in getting the code more clean to work with.

Step 3: Create a folder/package inside the lib

we will create all the screens in this folder so I am going to name this views. then create home.dart.

just add a stateful widget called Home can call it from MyApp.

Step 4: Create a new Firebase Project

• visit firebase.com and click “Get Started” sign in with google account
• click on Go to console, + Add project
• Enter project name and continue.
• you can add google analytics but it’s not required.

once the project is created.

Step 5: Writing cloud function code we can write it in Javascript and Typescript, don’t worry if you don’t have experience with these

we will use javascript.

• Install Node.js for your operating system ( i downloaded “Recommended for Most Users”)

Step 6: Add firebase to your Android, IOS or Web app

Android

• Select the Android Icon.
• Submit package name which you can find from app_folder/android/app/src/main/AndroidManifest.xml line:2
• You can provide nickname not mandatory
• Add SHA-1 by generating SHA-1 key and submit
• Download the google-services.json file and add it to app_folder/android/app/
• then add what’s missing to Project-level build.gradle

buildscript {
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }
  dependencies {
    ...
    // Add this line
    classpath 'com.google.gms:google-services:4.3.3'
  }
}

allprojects {
  ...
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
    ...
  }
}

• then to App-level build.gradle

apply plugin: 'com.android.application'
// Add this line
apply plugin: 'com.google.gms.google-services'

dependencies {
  // add the Firebase SDK for Google Analytics
  implementation 'com.google.firebase:firebase-analytics:17.5.0'
  // add SDKs for any other desired Firebase products
  // https://firebase.google.com/docs/android/setup#available-libraries
}

• click next and i usually click “skip this step” but you can run the app and confirm the connection.

Step 7: Add cloud firestore package & firebase_messaging from pub.dev

Error you may face

Multi Index : If you find this anywhere in the error then Modify your build.gradle

android {
    compileSdkVersion 22
    buildToolsVersion "23.0.0"

         defaultConfig {
             minSdkVersion 14 //lower than 14 doesn't support multidex
             targetSdkVersion 22

             // Enabling multidex support.
             multiDexEnabled true
         }
}

dependencies {
    implementation 'com.android.support:multidex:1.0.3'
}

#flutter #firebase #mobile-apps #web-development #developer