DEV Community: Sanskar Tiwari

Maximum call stack size exceeded

Sanskar Tiwari — Mon, 14 Nov 2022 16:48:13 +0000

I faced this problem with NextJs recently and the solution was quite simple.

I had a component Name PeopleInfo and the page with the same name, So when i tried importing the component into the page this error happened.

Discord notifications on Google form submission

Sanskar Tiwari — Wed, 17 Aug 2022 21:47:02 +0000

it works in 3 simple steps

Step 1 Get Webhook

Visit your discord channel and get the webhook url from integration settings

Step 2 Open DiscordNotify

Just open the google form and open DiscordNotify App, Click Add and add all the info with message template and press "Add"

Step 3 Ready to Go 💨

DiscordNotify will do the heavylifting of sending Discord Notifications on you Google Form Submit

Messenger Clone built with Flutter & Firebase

Sanskar Tiwari — Thu, 14 Jan 2021 05:20:38 +0000

Originally published at : Messenger Clone built with Flutter & Firebase

Let's learn how to build a chat app with flutter and firebase by building messenger clone. [Full source code]

https://youtu.be/2d1fslyxBjQ

If you like to learn via video then you can watch it on Youtube, Or you can watch the demo at least, source code link in the end.

📕 Things covered in this video:

Firebase Firestore (updated 2021) create, update, read
Firestore Query & Composite Query
Google Sign In with Firebase Auth & Sign Out
User Login Persistence.
Save user info locally with shared preference

App Features:

Sign in with Google
Search user via username
Send user message real time (it's better)

Prerequisites :

Install Flutter if not already https://flutter.dev/docs/get-started/install

Step1: Creating Flutter project & Refactor Code

Step2: Import required packages in pubspec.yaml

  firebase_auth:
  firebase_core:
  google_sign_in:
  shared_preferences:
  random_string:
  cloud_firestore:

Step3: Implemnet Sign In with Google

for this we will create a folder called services/auth.dart file

As you can see in auth.dart once the user is signed in we save user info to local database with sharedpreference so we need to create those functions.

Step4: Create function to get and save data with sharedpreference. so create a folder helperfun/sharedpref_helper.dart file.

Step5: Connect flutter app with firebase.

Step6: Add Sha1 key to firebase project to make google sign in work properly

run this command in terminal/cmd link to answer on stackoverflow

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

then add the sha1 key to firebase> project settings > Add fingerprint > Save.

Step7: Upload user info to firestore.

create a file in services/database.dart create a class called DatabaseMethods and add this function to it.

addUserInfoToDB(
      {String userID,
      String email,
      String username,
      String name,
      String profileUrl}) {
    FirebaseFirestore.instance.collection("users").doc(userID).set({
      "email": email,
      "username": username,
      "name": name,
      "imgUrl": profileUrl
    });
  }

Step8: Fix multidex Issue

open android/app/build.gradle and add multidex to true (multiDexEnabled true) in default config.

    defaultConfig {
        // Enabling multidex support.
        multiDexEnabled true
    }

and add the dependency.

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

Step9: Implement search user by username

First we will create the user interface with a textfield, search icon & back icon to cancel search.

Then we will create a firebase query function to fetch the user info from firestore where username is equal to what we are searching for.

Future<Stream<QuerySnapshot>> getUserByUserName(String username) async {
    return FirebaseFirestore.instance
        .collection("users")
        .where("username", isEqualTo: username)
        .snapshots();
  }

Step10: Create Conversation screen

we will start by creating the message box.

Step11: Write function to add message to firebase database.

Step12: Check & Create Chatroom with usernames

Step13: Get and Set Messages

now since we have added messages now let's fetch them and show in a list view with custom list item.

Step14: Show list of chatrooms

Full source code: https://github.com/theindianappguy/messenger-clone-flutter

Let's Build More fully functioning apps with Flutter :

Build a Recipe App with Flutter 🍳

Sanskar Tiwari — Thu, 26 Nov 2020 19:06:10 +0000

Let’s make a recipe app with flutter, basically learning how to build full app with flutter, also learning how to use API in a flutter app, It is a good flutter project to add to cv.

If you like to learn via video then you can watch the video

📕 Things covered in this Series:

Fetch data from an API with flutter
How useState in a flutter app
How to pass down data in a flutter widget
Using Custom Font in Flutter App
How to show a grid view and much more. Prerequisites :

Install Flutter if not already.

Source code:

theindianappguy / recipe_app

Recipe App with Flutter

Build a Recipe App with Flutter

Full FREE Course : https://youtu.be/VTR5HpRfS0A

In todays episode we are going to take the basics of #flutter and we are going to create a real world application. We are going to learn how to build a food recipe application using only flutter.

📕 Things covered in this video:

• Fetch data from an api with flutter

• How useState in flutter

• How to pass down data in flutter on widgets

• How to show a grid view

If you are a beginner with flutter I highly encourage you to follow along because you are going to learn how to put all the small pieces together to understand things like how to fetch data from an api, how to update state and more

View on GitHub

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.

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

Step 3: Install the required package
http // for using api.
webview_flutter // for webview in mobile app.
url_launcher // for website to open recipe url in new tab.
to install just add then to pubspec.yaml file below cupertino_icons and then for vs code CTRL + S (save) , Android Studio click on Packages get at the top right hand corner.

Step 4: Create home.dart
inside views folder and add it to main.dart like this.

import 'package:flutter/material.dart';
import 'package:recipe_app/views/home.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Recipe',
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

Step 5: Let’s create the User Interface for our app now.
As a beginner to understand all the widgets (everything is widget in flutter image, text, container…..) check out flutter official Widget catalog : https://flutter.dev/docs/development/ui/widgets

Let’s discuss most important once i will recommend to watch the video to understand better.

What is Scaffold?

It’s a wrapper which provides prebuild widgets like appbar, floating action button, drawer and much more so we don’t have to create all of them from scratch.

What is Stack?

We use stack to put one widget above another think of it like a sandwich but instead of brads we have some widgets, it can be text above image, may be full app above custom image/background and many more

What is Column?

Column are used to arrange widgets in Vertical Manner one below the other.

What is Row?

Row are used to arrange widget in Horizontal Manner one after the other.

What is Sizedbox?

Sizedbox are used to create space in our app that can be space between between the image and the text and text and text and in general with any widgets.

How to use Gradient Color background?

For Gradient color we use Box Decoration property if Container which have a Linear Gradient property.

Furthermore we have used Textedit Controller to keep track of what user is typing in the field. I have also used a custom font Overpass(i really like this one) so next step will be to add it as well.

This all sums up what we have built in home.dart file. ( did i miss anything? let me know in the comments)

import 'dart:convert';
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:recipe_app/models/recipe_model.dart';
import 'package:recipe_app/views/recipe_view.dart';
import 'package:url_launcher/url_launcher.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<RecipeModel> recipies = new List();
  String ingridients;
  bool _loading = false;
  String query = "";
  TextEditingController textEditingController = new TextEditingController();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [
                  const Color(0xff213A50),
                  const Color(0xff071930)
                ],
                    begin: FractionalOffset.topRight,
                    end: FractionalOffset.bottomLeft)),
          ),
          SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.symmetric(vertical: !kIsWeb ? Platform.isIOS? 60: 30 : 30, horizontal: 24),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: kIsWeb
                        ? MainAxisAlignment.start
                        : MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        "AppGuy",
                        style: TextStyle(
                            fontSize: 18,
                            color: Colors.white,
                            fontFamily: 'Overpass'),
                      ),
                      Text(
                        "Recipes",
                        style: TextStyle(
                            fontSize: 18,
                            color: Colors.blue,
                            fontFamily: 'Overpass'),
                      )
                    ],
                  ),
                  SizedBox(
                    height: 60,
                  ),
                  Text(
                    "What will you cook today?",
                    style: TextStyle(
                        fontSize: 20,
                        color: Colors.white,
                        fontWeight: FontWeight.w400,
                        fontFamily: 'Overpass'),
                  ),
                  Text(
                    "Just Enter Ingredients you have and we will show the best recipe for you",
                    style: TextStyle(
                        fontSize: 15,
                        color: Colors.white,
                        fontWeight: FontWeight.w300,
                        fontFamily: 'OverpassRegular'),
                  ),
                  SizedBox(
                    height: 40,
                  ),
                  Container(
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: TextField(
                            controller: textEditingController,
                            style: TextStyle(
                                fontSize: 16,
                                color: Colors.white,
                                fontFamily: 'Overpass'),
                            decoration: InputDecoration(
                              hintText: "Enter Ingridients",
                              hintStyle: TextStyle(
                                  fontSize: 16,
                                  color: Colors.white.withOpacity(0.5),
                                  fontFamily: 'Overpass'),
                              enabledBorder: UnderlineInputBorder(
                                borderSide: BorderSide(color: Colors.white),
                              ),
                              focusedBorder: UnderlineInputBorder(
                                borderSide: BorderSide(color: Colors.white),
                              ),
                            ),
                          ),
                        ),
                        SizedBox(
                          width: 16,
                        ),
                        InkWell(
                            onTap: () async {
                              if (textEditingController.text.isNotEmpty) {
                                setState(() {
                                  _loading = true;
                                });
                                recipies = new List();
                                String url =
                                    "https://api.edamam.com/search?q=${textEditingController.text}&app_id=0f21d949&app_key=8bcdd93683d********5cb95e64ab26";
                                var response = await http.get(url);
                                print(" $response this is response");
                                Map<String, dynamic> jsonData =
                                    jsonDecode(response.body);
                                print("this is json Data $jsonData");
                                jsonData["hits"].forEach((element) {
                                  print(element.toString());
                                  RecipeModel recipeModel = new RecipeModel();
                                  recipeModel =
                                      RecipeModel.fromMap(element['recipe']);
                                  recipies.add(recipeModel);
                                  print(recipeModel.url);
                                });
                                setState(() {
                                  _loading = false;
                                });

                                print("doing it");
                              } else {
                                print("not doing it");
                              }
                            },
                            child: Container(
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(8),
                                  gradient: LinearGradient(
                                      colors: [
                                    const Color(0xffA2834D),
                                    const Color(0xffBC9A5F)
                                  ],
                                      begin: FractionalOffset.topRight,
                                      end: FractionalOffset.bottomLeft)),
                              padding: EdgeInsets.all(8),
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  Icon(
                                    Icons.search,
                                    size: 18,
                                      color: Colors.white
                                  ),
                                ],
                              ),
                            )),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 30,
                  ),
                  Container(
                    child: GridView(
                        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                            mainAxisSpacing: 10.0, maxCrossAxisExtent: 200.0),
                        shrinkWrap: true,
                        scrollDirection: Axis.vertical,
                        physics: ClampingScrollPhysics(),
                        children: List.generate(recipies.length, (index) {
                          return GridTile(
                              child: RecipieTile(
                            title: recipies[index].label,
                            imgUrl: recipies[index].image,
                            desc: recipies[index].source,
                            url: recipies[index].url,
                          ));
                        })),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

class RecipieTile extends StatefulWidget {
  final String title, desc, imgUrl, url;

  RecipieTile({this.title, this.desc, this.imgUrl, this.url});

  @override
  _RecipieTileState createState() => _RecipieTileState();
}

class _RecipieTileState extends State<RecipieTile> {
  _launchURL(String url) async {
    print(url);
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: <Widget>[
        GestureDetector(
          onTap: () {
            if (kIsWeb) {
              _launchURL(widget.url);
            } else {
              print(widget.url + " this is what we are going to see");
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => RecipeView(
                            postUrl: widget.url,
                          )));
            }
          },
          child: Container(
            margin: EdgeInsets.all(8),
            child: Stack(
              children: <Widget>[
                Image.network(
                  widget.imgUrl,
                  height: 200,
                  width: 200,
                  fit: BoxFit.cover,
                ),
                Container(
                  width: 200,
                  alignment: Alignment.bottomLeft,
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          colors: [Colors.white30, Colors.white],
                          begin: FractionalOffset.centerRight,
                          end: FractionalOffset.centerLeft)),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          widget.title,
                          style: TextStyle(
                              fontSize: 13,
                              color: Colors.black54,
                              fontFamily: 'Overpass'),
                        ),
                        Text(
                          widget.desc,
                          style: TextStyle(
                              fontSize: 10,
                              color: Colors.black54,
                              fontFamily: 'OverpassRegular'),
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ],
    );
  }
}

class GradientCard extends StatelessWidget {
  final Color topColor;
  final Color bottomColor;
  final String topColorCode;
  final String bottomColorCode;

  GradientCard(
      {this.topColor,
      this.bottomColor,
      this.topColorCode,
      this.bottomColorCode});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Wrap(
        children: <Widget>[
          Container(
            child: Stack(
              children: <Widget>[
                Container(
                  height: 160,
                  width: 180,
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          colors: [topColor, bottomColor],
                          begin: FractionalOffset.topLeft,
                          end: FractionalOffset.bottomRight)),
                ),
                Container(
                  width: 180,
                  alignment: Alignment.bottomLeft,
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          colors: [Colors.white30, Colors.white],
                          begin: FractionalOffset.centerRight,
                          end: FractionalOffset.centerLeft)),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      children: <Widget>[
                        Text(
                          topColorCode,
                          style: TextStyle(fontSize: 16, color: Colors.black54),
                        ),
                        Text(
                          bottomColorCode,
                          style: TextStyle(fontSize: 16, color: bottomColor),
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Step 6: Add Custom Font to Flutter App:
First download the font .otf files from my github repo : here and add then to the assets/ fonts folder

then mention them in the pubspec.yaml file like this. check the full pubspec.yaml file here

 fonts:
    - family: Overpass
      fonts:
       - asset: assets/fonts/overpass_bold.otf
    - family: OverpassRegular
      fonts:
        - asset: assets/fonts/overpass_regular.otf

Step 7: Using Api in Flutter App
now we will add the Edamam Api to use their database of recipes and show when requested in out app

First Signup : https://developer.edamam.com/edamam-recipe-api
Click on Dashboard > Applications > View > Copy the application key.
Step8: Call the api and get data on search in the app so when app user submit something and click on search we will run this onTap:

code is already added in the top home.dart file so now if you will run it should work. Just make sure to update the Api Key

Step 9: Add Web View in the App.
it’s pretty simple to show web view the extra code is just the app bar, also i faced this issue that only https website were visible in webview so i made a custom function to redirect http sites to https. Here is the code just create a new file in views recipe_view.dart

import 'dart:async';
import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class RecipeView extends StatefulWidget {
  final String postUrl;
  RecipeView({@required this.postUrl});

  @override
  _RecipeViewState createState() => _RecipeViewState();
}

class _RecipeViewState extends State<RecipeView> {

  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  String finalUrl ;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    finalUrl = widget.postUrl;
    if(widget.postUrl.contains('http://')){
      finalUrl = widget.postUrl.replaceAll("http://","https://");
      print(finalUrl + "this is final url");
    }

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          children: <Widget>[
            Container(
              padding: EdgeInsets.only(top: Platform.isIOS? 60: 30, right: 24,left: 24,bottom: 16),
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      colors: [
                        const Color(0xff213A50),
                        const Color(0xff071930)
                      ],
                      begin: FractionalOffset.topRight,
                      end: FractionalOffset.bottomLeft)),
              child:  Row(
                mainAxisAlignment: kIsWeb
                    ? MainAxisAlignment.start
                    : MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    "AppGuy",
                    style: TextStyle(
                        fontSize: 18,
                        color: Colors.white,
                        fontFamily: 'Overpass'),
                  ),
                  Text(
                    "Recipes",
                    style: TextStyle(
                        fontSize: 18,
                        color: Colors.blue,
                        fontFamily: 'Overpass'),
                  )
                ],
              ),
            ),
            Container(
              height: MediaQuery.of(context).size.height - (Platform.isIOS ? 104 : 30),
              width: MediaQuery.of(context).size.width,
              child: WebView(
                onPageFinished: (val){
                  print(val);
                },
                javascriptMode: JavascriptMode.unrestricted,
                initialUrl: finalUrl,
                onWebViewCreated: (WebViewController webViewController){
                  setState(() {
                    _controller.complete(webViewController);
                  });
                },
              ),
            ),
          ],
        ),
      )
    );
  }

view rawrecipe_app.dart hosted with ❤ by GitHub
Run the app and test if it is running fine any problems? Google it 😅 (it works for me),……. ohhh still not solved comment it down below all the FlutterNerd community will love to help.

Step 10: Running Flutter App On Web.
First make sure you are in beta channel to run flutter web apps step by step > here <

Then just run the app selecting chrome voila 🥳 it works it’s that simple no setup required.

If you are facing problem i will highly recommend to follow the video it’s better and i tried to explain each step visually.

🎓 More tutorials you may like

1.Build a Fully Functioning Flutter Chat App with Firebase
In this one you learn to build a fully functioning chat app with one-2-one real time chat search user like Insta DM.

👉 https://flutternerd.com/build-a-fully-functioning-flutter-chat-app-with-firebase-part-1-4/

2.Build a Wallpaper App with Flutter
In this You will learn how to build a Wallpaper app with Flutter this is a great project to add to portfolio

https://flutternerd.com/build-a-wallpaper-app-with-flutter/

3.Build a Flutter News App with NewsApi Org
In this project we will use NewsAPI.org and build a news app with it

https://flutternerd.com/news-app-with-newsapi-org-flutter/

Flutter Push Notification on document create Firestore

Sanskar Tiwari — Thu, 29 Oct 2020 09:06:56 +0000

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

1.Select the Android Icon on Firebase Console.
2.Submit package name which you can find from app_folder/android/app/src/main/AndroidManifest.xml line:2
You can provide nickname not mandatory
3.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'
}

Step 8: Setting up Firestore

Open firebase and select Firestore and click “Create database”
Select test mode so that we do not need to add authentication to access the database and click “Next”.
Click selecting firestore location “Done”
Step 9: Adding internet permission

Add this code snippet to AndroidManifest.xml (app_folder/android/app/src/main/AndroidManifest.xml) within the MainActivity

 <intent-filter>
      <action android:name="FLUTTER_NOTIFICATION_CLICK" />
      <category android:name="android.intent.category.DEFAULT" />
  </intent-filter>

open app_folder/android/app/src/main/AndroidManifest.xml and add

Step 10: Add firebase messaging dependency to Android

at /android/app/build.gradle, latest version can be found here

com.google.firebase:firebase-messaging:20.2.4
Step 11: Setting up Firebase Messaging to Your Flutter App:

Add Firebase Messaging variable and initialise.
create a initstate() and then create a function getToken();
Adding getToken() to the initi state
We also added requestNotificationPermissions for IOS

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  String token = '';
  final FirebaseMessaging firebaseMessaging = FirebaseMessaging();

  @override
  void initState() {
    getToken();

    firebaseMessaging.requestNotificationPermissions(
      const IosNotificationSettings(
        alert: true,
        badge: true,
        provisional: true,
        sound: true
      )
    );

    firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        print("onMessage: $message");
        //_showItemDialog(message);
      },
      //onBackgroundMessage: myBackgroundMessageHandler,
      onLaunch: (Map<String, dynamic> message) async {
        print("onLaunch: $message");
        //_navigateToItemDetail(message);
      },
      onResume: (Map<String, dynamic> message) async {
        print("onResume: $message");
        //_navigateToItemDetail(message);
      },
    );

    super.initState();
  }

  void getToken() async {
    token = await firebaseMessaging.getToken();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text("Token : $token")),
      floatingActionButton: FloatingActionButton(onPressed: (){
        print(token);
      },
        child: Icon(Icons.print),
      ),
    );
  }

}

Step 12: Run the App & Get Device token from console when clicking on floating action button.

Step 13: Let’s test if it is working

Visit Firebase “Grow Section” > “Cloud Messaging”

Click on “Send your first message”
Enter title
Enter notification text
click on “Send test message”
submit FCM token
Now make sure the app is in background app will not receive notification if it is in foreground
click on “Test”
you will receive notification on your device.

Step 14: Time to write Cloud Function

1.Visit firebase in the Developer Section click on “Functions”.
2.Click on Get Started
Install firebase tools by running the command as shown in the new folder after opening it in VS code.
Make sure you are logged in to firebase through the terminal

run “firebase login”
then “firebase init”

Now select Functions by clicking the [Space] key then enter
select Use an existing project (remember the project we created before)

Select Javascript for Language

then to use EsLint just click enter

Now the project is setting up once done, Open the index.js file and remove everything and paste as i pasted below

const functions = require("firebase-functions");

admin.initializeApp(functions.config().firebase);

const fcm = admin.messaging();

exports.senddevices = functions.firestore
  .document("notification/{id}")
  .onCreate((snapshot) => {
    const name = snapshot.get("name");
    const subject = snapshot.get("subject");
    const token = snapshot.get("token");

    const payload = {
      notification: {
        title: "from " + name,
        body: "subject " + subject,
        sound: "default",
      },
    };

    return fcm.sendToDevice(token, payload);
  });

Step 15: Let’s deploy this now

run “firebase deploy” and visit the Dashboard section in Function you will be able to see the added function

Step 16: Now open Firestore in firebase

Add a new collection named “notification” as we mentioned in the cloud function and add a document with three values as we require in the cloud function.

click save now if your app is in background you should see the notification

So finally we have successfully added Flutter Push Notification on document create Firestore 🎉.

If you have any questions? any error/problem you are facing feel free to comment them down I will get back to you as soon as possible.

🎓 More tutorials you may like

1.Build a Fully Functioning Flutter Chat App with Firebase
In this one you learn to build a fully functioning chat app with one-2-one real time chat search user like Insta DM.

👉 https://flutternerd.com/build-a-fully-functioning-flutter-chat-app-with-firebase-part-1-4/

2.Build a Wallpaper App with Flutter
In this You will learn how to build a Wallpaper app with Flutter this is a great project to add to portfolio

https://flutternerd.com/build-a-wallpaper-app-with-flutter/

3.Build a Flutter News App with NewsApi Org
In this project we will use NewsAPI.org and build a news app with it

https://flutternerd.com/news-app-with-newsapi-org-flutter/

DEV Community: Sanskar Tiwari

Maximum call stack size exceeded

Discord notifications on Google form submission

Step 1 Get Webhook

Step 2 Open DiscordNotify

Step 3 Ready to Go 💨

Messenger Clone built with Flutter & Firebase

Let's Build More fully functioning apps with Flutter :

Build a Recipe App with Flutter

Build a Wallpaper App with Flutter From Scratch

Build a Quiz Maker App with Flutter & Firebase

Build a Fully Functioning Flutter Chat App with Firebase

Build a Recipe App with Flutter 🍳

theindianappguy / recipe_app

Recipe App with Flutter

Build a Recipe App with Flutter

What is Scaffold?

Flutter Push Notification on document create Firestore

So let’s get started coding,

Android