Flutter. How to Create Your Own Native Notification in Android

Artem Diashkin
Nov 15, 2020 · 6 min read
Image for post
Image for post

Here we will be talking about Flutter plugging creation, Flutter → Android → Flutter communication, and after that, we will be creating our own native Android notification with attaching it to our Flutter project.

What will be covered in this article:

  • Creating Flutter Plugin project
  • How Flutter plugin works
  • The Big picture
  • Implementing native notification

Result:

Image for post
Image for post

Creating Flutter Plugin project

In this chapter, I will guide you through all steps you will be needed to take while creating your Flutter Plugin project.

First, open your Android Studio IDE and select Create New Flutter Project:

Image for post
Image for post

Next, select Flutter Plugin and click Next:

Image for post
Image for post

Next, type your Project name, Flutteer SDK path, Project location, and Description. If you are just creating this project for demo purposes — name and description are irrelevant:

Image for post
Image for post

Same for the package name. Don’t worry, select any name you like:

Image for post
Image for post

Wait few moments…

Image for post
Image for post

After creating Flutter Plugin project → open /android folder in Android studio. This /android folder is our native part, here we will be telling Android what we would like to do (show notification, in our case)

Image for post
Image for post

This is how it will look like in your IDE. FlutterNotificationPlugin file (name depends on a package and project name you used while creating a new project) is the entry point of the Android native part. We will return to this project soon enough…

Image for post
Image for post

Return to the Flutter plugin project and run /example/lib/main.dart file. Here we will be testing the work of our Flutter plugin.

Image for post
Image for post

After running the “example” app you will see the result in the Android emulator:

Image for post
Image for post

How Flutter plugin works

Before we will dive deep into the “own plugging creation”, let’s take a look at how this simple example works. You could think that it is too complex, but believe me, you just need to see the whole FlutterAndroidFlutter communication path and you will get it.

First questions:

  • How does the “example” flutter project know what it should do?
  • Where is the “connection” between the “example” project and our local Flutter plugin?

The answer lies in is in the pubspec.yaml file. It is done exactly the same way as when you define new Flutter dependency, but in our case, it is not yet published as the public https://pub.dev/ library → it is our local library:

Image for post
Image for post

Path variable is pointing to our local plugin:

Image for post
Image for post

The Big picture

Before we will take a look at the code fragments let’s take a look at a Flutter app and hosts communication diagram:

Image for post
Image for post

As you can see the main connector between Flutter and Android/iOS is the MethodChannel, let’s take a look at it in code.

First, “example” Flutter project invokes FlutterNotificationPlugin.platformVersion method and experts a platformVersion result:

Image for post
Image for post

You can find this FlutterNotificationPlugin.platformVersion method in the /lib/<name>.dart file:

Image for post
Image for post

What is getPlatformVersion? Where I can find it?

Now, let’s return to our previously open Android project:

Image for post
Image for post

As you probably noticed we have a function name-checking:

if(call.method == "getPlatformVersion")
Image for post
Image for post

You can pass as many functions with any names as you like. Let’s make a few changes and after that, you will get the main idea behind the Flutter plugins and we will create our first Android native notification with the use of Flutter.

At first, we will create a new function with the name getHello .

Image for post
Image for post

Inside our getHello function call, we will invoke helloWorld function that will be used in our Android project. As you can see we are passing two arguments to the helloWorld function one and two (very useful names I agree 😉)

After that, we will modify our if-else block in our Android project:

Image for post
Image for post

And our final step will be changing the function invoke name in the Flutter “example” project:

Image for post
Image for post

⚠️ NOTE: After making changes in the Android project you will need to stop and re-run your project. Flutter’s “hot-reload” will not work.

Now we can check what we’ve accomplished so far:

Image for post
Image for post

Now you understand how to create your own Flutter plugging, so we can go further and create our own Android notifications.

If you would like to know more about creating Flutter packages/plugins you can check here:

Implementing native notification

We will be creating a basic notification from this example. If you would like to know more you can check here:

Let’s begin…

At first, we will create a new function showBasicNotification in our Flutter plugin that we’ll be using in future:

Image for post
Image for post

Next, we will need to update out Flutter “example” project’s main.dart file:

Image for post
Image for post

Icon is required by the Android’s specification. It will be show at the top of our notification. We are just saying that for the notification pop-up icon Android should use the ic_launcher file that is located in the /mipmap folders in the resources (“/example” project).

Image for post
Image for post

And now the most difficult part, because if you are not related to the Android native development, code for a simple notification is not so simple.

Open /android module in the Android Studio IDE:

Image for post
Image for post

And add new else if block to the onMethodCall .

Image for post
Image for post

⚠️ context private variable can be added and initialied like this:

The main functionality of our Android notification lies lies with the NotificationCompat builder…

Image for post
Image for post

And to make it work we needed to create a notification channel, check if we need a notification_id (that depends on Android SDK), etc → this is required configiguration without which this small builder block would not work.

And now we can check what we’ve accomplished :

Image for post
Image for post

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store