DEV Community: Olamide Gabriel

Simplifying Null Safety in Flutter

Olamide Gabriel — Wed, 29 Dec 2021 20:43:42 +0000

INTRODUCTION

Have you ever run into the red screen of horror while debugging a flutter app?

I mean, if you haven’t, are you a Flutter developer at all?

Out of numerous reasons for your app to relay your error in such a manner, null errors are one of the most common. In an attempt to eliminate this and the numerous null errors that occur while building/debugging your app, the great Flutter and Dart team introduced Null Safety.

In simple terms, Null Safety allows the dart analyser to detect possible null errors pre-compilation, that is, before you even run your app. It ensures proper notifications of possible null data that could break your app while running.

This article is for you, if

You understand the basics of data types in Dart.
You know a bit about classes, objects, i.e. the basics of OOP in Dart.

Else, you might want to go through the Dart documentation.

First, we will discuss the syntax changes and what they mean with the introduction of Null Safety.

You may have seen characters such as "?", "!", and "??", and keywords such as "late".They are the main code additions you are required to understand.

For the dart analyser to help you convert your runtime errors to "code time" errors, it needs some information. Before Null Safety, all variables were particularly nullable, so developers may forget to check if these variables are null, causing the red screen of death during debugging quite often or crash during production in the worst-case scenario. The analyser needs to know what variables might be null or will never be null.

Before Null Safety, you would create a variable like this:

///BEFORE
int myFavoriteNumber = 5;
//OR
int myFavoriteNumber;

In the first instance, we assigned myFavoriteNumber a value of 5. Although, along the line, we could assign it a value of null by writing

myFavoriteNumber = null;

And in the second instance, myFavoriteNumber was null from the start.

However, with Null Safety present, the rules have changed.

#Instance 1
int favoriteNonNull = 7;
# Instance 2
int? favoriteNullable;
#Instance 3
int? favoriteNullabe2 = 10;

Instance 1: We created a non-nullable variable and assigned it a value of 7. What does this mean? We have simply told the dart analyser that this variable can and must NEVER be null. It means you must assign it a value at the point of creation, and you could NEVER assign it a null value in the future. Going against any of these would force the dart analyser to scream in your face.

Instance 2&3: We added a "?" right in front of the data type. It tells the analyser that "favoriteNullable" can be null. Thus, in cases where a non-nullable variable is required, the dart analyser should remind us to do a null check. You can mess with this variable and assign it a null value. The analyser is your guide.

How do you perform null checks?

While writing Dart, which is an OOP language, you might find yourself using objects a lot with attributes/properties that may have null values. Your objects could be null as well as variables. Not to worry, "?" and "??" help with this issue.

Let us examine a simple class "Dog" with attributes "name", "colour", and "weight".

class Dog{
String? name;
String? colorName;
int? weight;
Dog({this.name,this.colorName,this.weight});
}

Dog? nullableDog;
Dog? nullableDog2 = Dog(
name :  "Jack",
colorName:  "Brown",
weight : 20,
);
Dog nonNullableDog = Dog(
name :  "Finn",
weight : 18,
);
#Extra variable for demo purposes
int? demoVariable = 30;

The easiest and most common way to perform a null check is using an if statement.

if(variable != null){
//use variable
}

However, we want to explore how the characters mentioned above can help us instead.
For instance, say you're to use a nullable String in a Text widget which would not take nullable strings as a parameter. "??" comes in handy as you can use it to perform a quick null check and provide an alternative for the widget, thereby preventing possible crashes.

String? parameter;
//Some Widget Tree
...
Text(
parameter ?? "Alternative Text",
)
...
//Some Widget Tree

Note: The dart analyser won't be too happy about an absence of a null check and alternative in this scenario.

What if we wanted the name of our "nullableDog2" created above?

Recall that "nullableDog2" is a nullable object with the nullable attribute "name". Did that confuse you? It simply means our "nullableDog2" may be null, and even if it isn't, its attribute name may be null as well. If we use this value in our Text widget, we would need to perform some extra checks. "?" allows you to perform a quick null check on an object while accessing its attributes. It saves you a couple of lines of code and makes objects easier to use within widgets.

Here’s a brief demonstration:

//Some Widget Tree
...
Text(
nullableDog2?.name ?? "Alternative Text",
)
...
//Some Widget Tree

The dart analyser isn't perfect and sometimes would not realise some things a developer would. For example, you might be 100% sure a variable you have created to be nullable would not be null at the point you wish to use it. You want to shut the analyser up and tell it you know better. That's fine, but it comes with the risk of crashing your app. You need to be 100% sure. Dart has provided "!" to help silence the edit time warnings.

A quick demo

String? parameter;

//Written some magic somewhere to make sure "parameter" isn't null when I need it...
//Some Widget Tree
...
Text(
parameter!,
)
...
//Some Widget Tree

String? parameter;

//Some Widget Tree
...
if(parameter != null) //the analyzer may not detect this check
Text(
parameter!,
)
...
//Some Widget Tree

Finally, let's talk about the late keyword. Referencing the meaning of the word “late”, which means "not on time", by using this keyword, you are simply telling Dart that your variable is not going to be null, but you are not going to assign a value immediately it's created. You're going to assign it a value a little bit later before it is used.
This is useful for variables that are expensive to create.
Note: Failure to assign a value to late variables would cause your app to crash/errors during debugging.

//Inside some stateful widget
...
late AnimationController controller;
@override
initState(){
super.initState();
controller = AnimationController(
vsync:this,
);
}

We have covered the basics of null safety and the keywords you would mainly be dealing with. I hope this will help you prevent more null errors in the future!

For more examples and active practice, check out intro to null safety by the Dart team.

If this was useful for you, be sure to leave a like and comment, and please share. Thank you!

Automating Push Notifications in Flutter with Firebase Cloud Functions and OneSignal.

Olamide Gabriel — Sun, 06 Jun 2021 21:24:31 +0000

Cover Photo by Jamie Street on Unsplash

Check my previous article to learn how to set up OneSignal in Flutter.

Your database is going to get updated from time to time, and most times when they do, you want to inform your users about this change through push notifications.

What do you do when you need to send notifications to hundreds of users based on an update to your FireStore collection?

Lucky for us, OneSignal has an easy-to-use API that can be integrated with Firebase Cloud functions.

Enough of the talks, let's automate our push notifications!

Requirements

You must have set up firebase authentication in your Flutter app.

If you have not set up authentication in your app, check out the official FlutterFire documentation on Firebase Authentication with Flutter to get started.

Step 1
OneSignal provides unique player IDs to identify different devices. You need to save the player IDs of every user that registers on your app.

Create a Firestore collection named 'onesignalids' where you would save the player IDs for each user.
Add two fields to the collection.
(i) The customer_id field where you save the user ID of a particular user.
(ii) An array of strings where you save the player ID of that user.
Use the savePlayerId method to save the user's player id. This method should be invoked when the user registers or logs in depending on your use case.

What this method does is to create a new list of player-ids for a user, if it doesn't already exist.
FieldValue.arrayUnion() ensures that there are no duplicate player-ids in the array.

savePlayerId() async {
//Call the required instances.
    final firebaseAuth = FirebaseAuth.instance;
    final firestore = FirebaseFirestore.instance;
    try {
      final subState = await OneSignal.shared.getPermissionSubscriptionState();
      final deviceId = subState.subscriptionStatus.userId;
      final firestoreDeviceIdReference = await firestore
          .collection("onesignalids")
          .where("customer_id", isEqualTo: firebaseAuth.currentUser?.uid ?? "")
          .get();
      if (firestoreDeviceIdReference != null &&
          firestoreDeviceIdReference.size != 0) {
        await firestore
            .collection("onesignalids")
            .doc(firestoreDeviceIdReference.docs[0].id)
            .update({
          "player_ids": FieldValue.arrayUnion([deviceId])
        });
      } else {
        await firestore.collection("onesignalids").add({
          "customer_id": firebaseAuth.currentUser?.uid ?? "",
          "player_ids": [deviceId],
        });
      }
    } catch (e) {
      print("ERROR $e");
    }
  }
}

Next, you create your notifications collection on Firebase FireStore.

Create a FireStore collection named 'notifications' where you would save the notifications for all users.
Add the following fields to the collection.
(i) The customer_id field which takes the user ID of the recipient of the notification.
(ii) The title field that takes the title of your notification.
(iii) The detail field that takes in the notification payload.
(iv) The time field that takes the timestamp of the notification.

PS: You can name these fields however you want to, as long as you remain consistent.

IMPORTANT: To be able to use cloud functions, you need to upgrade your project's plan to the Blaze plan. You can easily upgrade in the settings section of your project.

To be able to use cloud functions, you must have Node installed. This gives you access to run npm functions.

If you don't already have firebase tools installed,
run npm install -g firebase-tools in the command prompt.

Ensure to run firebase login in the command prompt to log in on your device.

Let's create and deploy our cloud function!

Create a new folder and run firebase init functions in cmd.
Select your Firebase project and be sure to install dependencies with npm.

Also, run npm install https as you will need it to make API calls.

We will make use of Javascript to write our cloud functions.

Open the index.js in the folder in your code editor (VSCode or any preferred editor) and follow the next steps.

First, you need to load the modules you will require for this project.

const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp(functions.config.functions);
 const https = require("https");

Next, we create a method that handles sending of push notifications via an API call.

This function takes in our push notification data containing our message and the player IDs of recipients and makes a request to the OneSignal server to have them sent.

const sendNotification = (data) => {
  var headers = {
    "Content-Type": "application/json; charset=utf-8",
    Authorization: "Basic $YOUR ONESIGNAL API KEY",
  };

  var options = {
    host: "onesignal.com",
    port: 443,
    path: "/api/v1/notifications",
    method: "POST",
    headers: headers,
  };

  var req = https.request(options, (res) => {
    console.log("statusCode:", res.statusCode);
    console.log("headers:", res.headers);
    res.on("data", (data) => {
      console.log("Response:");
      console.log(JSON.parse(data));
    });
  });


  req.on("error", (e) => {
    console.log("ERROR:");
    console.log(e);
  });

  req.write(JSON.stringify(data));
  req.end();
};

Next, we assign a function that is executed when a document is created on our notifications collection in FireStore to an export.

The 'pushNotificationMessage' export function is responsible for fetching the player IDs and notification message, and sending it to the OneSignal server for delivery to the recipients.

exports.pushNotificationMessage = functions.firestore.document("notifications/{id}").onCreate(async (snapshot, context) => {
 //OnCreate function will go here. 
});

Let's walk through the 'onCreate' callback.

First, we fetch the player ID of the notification's recipient.


  var playerIdsDocs = await admin.firestore().collection("onesignalids")
  .where("customer_id","==" , snapshot.data().customer_id,)
  .get(); //this fetches the document containing the user's player //ids
  var playerIds = [];
  if(!playerIdsDocs.empty){
     playerIdsDocs.forEach((playerIdSingleDoc)=>{
       playerIds = playerIdSingleDoc.data().player_ids; // this //assigns the player id(s) to the list variable above.
     });
}

Note : Only one document would be fetched for each user.

Next, we save the notification in a message variable.

var message = {
        app_id: "YOUR APP ID",
        contents: { en : snapshot.data().detail },
        headings: { en : snapshot.data().title },
        include_player_ids : playerIds,
      };

Finally, for the callback, we call the 'sendNotification' function we defined earlier.

   if(!playerIds.empty){
      return sendNotification(message);
   }
      else{
        return ;
      }

The only thing left to do is to open the terminal and run firebase deploy.

Every time the notifications collection is updated, OneSignal will send a notification on your behalf.

The complete cloud functions code can be viewed below.

Implementing Push Notifications With Flutter and OneSignal-Part 1

Olamide Gabriel — Fri, 04 Jun 2021 20:36:52 +0000

Cover Photo by Jamie Street on Unsplash

Your users are definitely not going to be on your app for 24 hours every day. However, you might want to remind them to check your app, or notify them of new things happening in your app even when it's closed. You use Push Notifications to achieve this. And contrary to popular belief, they're really easy to implement with Flutter and OneSignal.

Let's get started

Requirements

A OneSignal Account

Step One

Setup your firebase project
Go to https://firebase.google.com to get started.

You should have something like this on the console.

On the next page, you could choose to enable or disable analytics. Your project should take a few seconds to be created depending on your internet connection

Step Two

Setup your flutter project.
-create flutter project
run flutter create push_notifications_demo in your command line interface(command prompt).
-add your app to the firebase project

For Android

Click the android button as shown in the image below.
Add your app credentials and download the config file.

Note
Your android package name is the "applicationId" in your app-level build.gradle file(android/app/build.gradle).
Be sure to add the googleservices.json file to your project and set up the Firebase SDK as instructed in the process.

Once you've followed the instructions correctly, you should see an android app in your project.

-setup Onesignal for your app

Log into OneSignal and create a new app. You could choose to use the default organization or an organization of your own. No worries, you can always change it later. .
Add your firebase server key and sender ID.
You can find these keys here.
Select the Android platform and Flutter as the SDK.
You should now be able to see your application ID.
Add firebase_core and one_signal_flutter plugin to your app.

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
onesignal_flutter: ^2.6.3
firebase_core: ^1.1.0

5. In your project level(android/build.gradle) build.gradle file, add the following line of code:

repositories {
jcenter()
maven { url 'https://plugins.gradle.org/m2/' } //add this line
}
dependencies {
classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[0.12.6, 0.99.99]'
...
}

In your app level(android/app/build.gradle) build.gradle file, add the following line of code:

apply plugin: 'com.android.application' //this already exits
//add this line
apply plugin: 'com.onesignal.androidsdk.onesignal-gradle-plugin'
...

Great! You're all set up on Android.

**For iOS**

Requirements 
1. An apple developer account with an Admin role.
2. A Macbook with XCode 11+

Steps
1. Generate an iOS Push Certificate.
You can easily generate one using the [OneSignal provisioning tool ](https://onesignal.com/provisionatorhttps://onesignal.com/provisionatorhttps://onesignal.com/provisionator) here

2. Enable iOS push capability and extension service following the instructions on the [Official OneSignal documentation here](https://documentation.onesignal.com/docs/flutter-sdk-setup#step-4---enable-ios-push-capability-in-xcode-ios-apps-only)

We're done setting up!

Now, let's practice sending a push notification.

In the main.dart file of your project, we need to initialize the OneSignal plugin.

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

void main() {
WidgetsFlutterBinding.ensureInitialized();
Firebase.initializeApp();
OneSignal.shared.init("YOUR ONESIGNAL APP ID", iOSSettings: {
OSiOSSettings.autoPrompt: false,
OSiOSSettings.inAppLaunchUrl: false
});
runApp(MyApp());
}

Run your app to initialize the plugin.

Next, on the Dashboard section of your application's OneSignal account, do the following:

1. Click on the "New Push" button shown below. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebdwyc58k766x49iewf5.png)

2. Enter the title and message of your notification.

3. Click send to test device.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdc2xz4v0koh7a1ohjxf.png)
You should be redirected to a page of all users so you can add a test user.

4. You should find your device there. If you don't, run the app again. Click on options and add your device as a test user.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gxtg2zix4kjby9oqqji.png)

5. Go back and click on Send To Test Device. Select your device and send.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edi3i3i2sqsy6d2ci62v.png)

You've successfully sent your first notification!

Tip: Add handlers to your notifications to run functions at specific events.

To handle callbacks once notifications are received:

OneSignal.shared.setNotificationReceivedHandler((OSNotification notification) {
//This will be called whenever a notification is received
});

To handle callbacks when notifications are opened:

OneSignal.shared.setNotificationOpenedHandler((OSNotificationOpenedResult result) {
// This will be called whenever a notification is opened.
});


And with this, you can send your users push notifications anytime you want!

[OneSignal's documentation](https://documentation.onesignal.com/docs/flutter-sdk) is very rich and easy to read. You can get more detail on features and methods available on the SDK.