Flutter OneSignal Push Notification Implementation

Flutter OneSignal :

Flutter OneSignal push notification implementation will let you send notifications much easier than before, you can easily integrate and use it as well.

Push notifications are helpful to provide the information to the users regarding the new services / offers so that all the users can get to know them.

In messaging apps like whatsapp, telegram, facebook these notifications allows to know the incoming messages and can also provide a reply though them as well.

We can handle the push notification, i.e., we can display the notification or skip and also parse the information we got from the push notification.

 

Flutter OneSignal Video Tutorial :

 

pubspec.yaml :

Add the dependencies cloud firestore, firebase core, onesignal flutter to your project and specify the version accordingly to avoid code level issues.

dependencies:
  ...
  onesignal_flutter: ^3.2.7
  firebase_core: ^1.10.6
  cloud_firestore: ^2.5.0

 

android/build.gradle :

Add the repository

repositories {
    maven { url 'https://plugins.gradle.org/m2/' }
}

Add the dependencies

dependencies {
    classpath 'com.google.gms:google-services:4.3.10'
    classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[0.12.10, 0.99.99]'
}

 

app/build.gradle :

In android root level we need to add these two plugins for google services, onesignal gradle plugin and sync it with your code.

Apply plugins

apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.onesignal.androidsdk.onesignal-gradle-plugin'

 

main.dart :

Now the first thing is to initialize onesignal with app id such that our app is configured with our onesignal account and can make use of the services.

Here in void main we have added two initialisations for Widgets Flutter Binding and firebase intialize these two are useful to activate firebase by interacting with native code and processing.

Setting log levels such that you are able to identify the issues or configuration messages if any.

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:onesignal_flutter/onesignal_flutter.dart';

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

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

class _HomeState extends State<Home> {

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    OneSignal.shared.setLogLevel(OSLogLevel.debug, OSLogLevel.none);

    OneSignal.shared.setAppId("5f334f2a-7993-4789-9ddb-4a2a02e16bc8");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("OneSignal"),),
      body: const Center(child: Text("OneSignal PushNotification")),
    );
  }
}

 

Flutter onesignal output :

The below screen depicts the output of flutter onesignal push notification implementation.A notification shown on the drop down tap on it to open the app.

 

If you have any query’s in this tutorial on flutter onesignal notification implementation do let us know in the comment section below.If you like this tutorial do like and share us for more interesting updates.