Push Notifications in Flutter with Native Notify
Tags: flutter, mobile, notifications
Published: 2022-07-08 22:05:58

by [Sam Victor](https://blog.openreplay.com/authors/sam-victor)

Push Notifications are short messages, alerts, and information sent from third-party applications that pop up on a user's phone, Tab, or desktop, nudging them to take specific actions. Push notifications aid in sending updates on products and services, or create a general awareness to users through some pop-up messages nudging users to take some action. This enhances advertisement in the business sector.

[Native Notify](https://nativenotify.com/) is a push notification platform for sending push notifications to Flutter and React Native applications, that features:

- Sending push notifications to cross-platform applications (Android and IOS)
- Sending Mass Push Notifications to app users
- Sending data with push notifications
- In-app notification sending system subscribed users.

In this article, we'll set up an application to receive notifications, to show how to use Native Notify.

## Setting up Notifications

Before creating our application, Let's set up our notification platform. Head over to [Native Notify](http://nativenotify.com) and click on "Get Started Now".

![1](https://blog.openreplay.com/static/89d3e9383c32a1cb2b6c7f9bd22662a3/1a152/image01.png)

> Native Notify doesn't require card details to sign up. 

After Signing up, click on "Create An App" to get started and select Flutter as your framework.

![2](https://blog.openreplay.com/static/c8115f374b22af55d05b4e6c917362c6/1a152/image02.png)
 

## Creating our Flutter application

To create the app, go to your preferred directory and run the command below in your terminal.

```
flutter create notify_app
cd notify_app
```

Open the `pubspec.yaml` file and add [native_notify](https://pub.dev/packages/native_notify) below under the `cuperino_icons` or run `flutter pub add native_notify`.

```
name: notify_app
description: A new Flutter project.
publish_to: 'none' 
version: 1.0.0+1
environment:
    sdk: ">=2.17.0 <3.0.0"

dependencies:
    flutter:
    sdk: flutter
    cupertino_icons: ^1.0.2

    native_notify: ^0.0.13 # Add this package

dev_dependencies:
    flutter_test:
    sdk: flutter

    flutter_lints: ^2.0.0

flutter:
    uses-material-design: true
```    

## Configuring our Notify App

Before receiving Push notifications with our application, we need to configure some root files to grant us access to the push notification system. 

### Android Configuration

Head over to the `android/app/build.gradle` file. In the `android` object, upgrade the `compileSdkVersion flutter.compileSdkVersion` to  `compileSdkVersion 31`. Still under the `android` object, upgrade the `minSdkVersion flutter.minSdkVersion` located in the `defaultConfig` object to `minSdkVersion 21`. With all that done, your `android` object should look like the snippet below.

```
android {   
    compileSdkVersion 31
    
    ...

    defaultConfig {
        applicationId "com.example.notify_app"
        minSdkVersion 21
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
}
```

### iOS Configuration

For IOS configuration, head over to **ios/Podfile** and update `platform :ios` to 10.0 or higher.

```
platform :ios, '10.0'
```

If `platform :ios` is commented out, do well to uncomment it. 


## Open Source Session Replay

_[OpenReplay](https://github.com/openreplay/openreplay) is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data._

![replayer.png](https://static.openreplay.com/images/banner-blog.png)

_Start enjoying your debugging experience - [start using OpenReplay for free](https://github.com/openreplay/openreplay)._


## Displaying Push Notification

With the platform configurations done, let's set up our `main.dart` and start receiving some notifications. Head to the `main.dart` file in the **lib** folder and update the `main()` function.

```
import 'package:flutter/material.dart';
import 'package:native_notify/native_notify.dart';

void main() {
    WidgetsFlutterBinding.ensureInitialized();
    NativeNotify.initialize(appId, appToken, null, null);
    runApp(const MyApp());
}
```

Based on the code block above, we imported the `native_notify` package into the `main.dart` file then we initialized it in the `main()` function, making it run on initialization of the application. The `NativeNotify.initialize` method requires an `appId` and an `appToken`, which are provided in the NativeNotify guide. Do not remove the two null parameters in the NativeNotify method. The appId and appToken are given on the NativeNotify dashboard on their Official site.

## Sending Push Notifications

With all the configuration and setup, let's start sending push notifications. First, run the application on an emulator or actual device using the command in a terminal. 

```
flutter run
```

The command above will build the Flutter default counter app and install it on your device. If all configurations were successful, you'd see a NativeNotify success message on the terminal. After building the application, head back to the [Official Native Notify](http://nativenotify.com) site and click on the Send symbol on the left tab bar.

![3](https://blog.openreplay.com/static/867f795cd6b3a2d84aaa7f99e349b2dd/1a152/image03.png)

Now, send a push notification by entering the Title and Notification message.

![4](https://blog.openreplay.com/3c17b0b5c41eeb0fe41d30d98859561f/image04.gif)

## Sending Big Pictures 

The Push notification was a success. Now let's send a push notification with some big pictures. Still, on the Send tab, click on "Advanced Settings."

![5](https://blog.openreplay.com/static/9af12485f93628cac340793b191eb7e4/1a152/image05.png)

Fill in the Title, Message and then provide an image URL for the Big Picture URL. We'll be sending the data below.

```
title --> New Anime Picture !!
message --> This is Kurosaki Ichigo
big Picture --> https://imgix.ranker.com/user_node_img/50081/1001610696/original/to-shatter-fate-photo-u1?auto=format&q=60&fit=crop&fm=pjpg&dpr=2&w=650
```

![6](https://blog.openreplay.com/4df468740ff438ea898de33324ed6221/image06.gif)

The Push Data Object is used when trying to send JSON information about the notification to the user. This doesn't show on the notification but aids in redirecting to the in-question page question when the notification is clicked.

## Conclusion

Push Notification is a very interesting and magnificent way of sending out brief pieces of information and awareness in Mobile development. In this tutorial, we've been able to set up our push notification system, integrate it into our application, and test it out. Congratulations!!

## Resources

Here is the link to the [source code on Github](https://github.com/iamVictorSam/notifyApp)

[![newsletter](https://blog.openreplay.com/static/e6b18eda7a327511296a2f27692f9c70/e9957/newsletter.png)](https://newsletter.openreplay.com/)