Local notifications in SpaceX GO!
Hi, I’m Jesús Rodríguez, developer of ‘SpaceX GO!’. A few months back, I wrote about how I developed SpaceX GO! using Flutter. It was a huge success, receiving more than 400 claps, so thanks to all of you!
Today, I’m announcing the launch of the v2.3 update. The main feature of this update a highly requested one: notifications support. As all of you Flutter developers know, including notifications in your apps is a non-trivial thing. In fact, this is one of the features the Flutter team wants to officially support this year, as detailed in their roadmap.
In this case, I’m using the flutter_local_notifications package, which allows to show & schedule notifications with relative ease. In this article, I’m going to explain how this feature is implemented in ‘SpaceX GO!’.
Push VS Local notifications
Push notifications are delivered to the device by an online service, so you need to be connected to the internet to receive them. In Flutter apps, is usual to use Firebase services to deliver this kind of notifications.
In the other hand, local notifications are scheduled & delivered by an app installed on the device, all of the notification logic in baked inside the app. Also, you don’t need to be connected to the internet to receive them. In this article, we’re going to look deeper into this kind of service.
First steps
First, you’ll have to add the notification’s package to your pubspec.yaml file. Then, run ‘flutter packages get’ on the console.
After that, we need to add some user permissions under the AndroidManifest file. These permissions will allow the app to scheduled notifications. You can add more user permissions, for handling custom sound & vibration patterns. Here’s a list with all available permissions in Android.
If you’re working with iOS devices, here are all the things you’ll need to add to your project in order to support notification on them.
Adding assets
After that, we need to add a new asset, which will be displayed as an icon in the notification banner. To do that, go to the drawable/ folder, under the Android project. If you’re using Android Studio, you can add .svg images easily: right click on the src/ folder, then New > Vector Asset.
You can add as many icons as you want. Later on, you’ll be able to select the icon for specific notifications. The names of these files are really important, as is their locations.
It’s coding time!
So it’s time now for some Dart coding, don’t you think? As a base, you could use the example project provided by the package: it’s well documented & full of examples and simple implementations.
The main use of notifications in SpaceX GO! is to alert users at set times before the rocket launches from the pad. It will notify the user a day, an hour and 30 minutes before lift-off. So we need to schedule three notifications, which are dependent on the launch time.
When the ‘Home’ page loads, it requests details about the next launch to the r/SpaceX API. All of this is done inside a model, using the scoped_model package.
After the model finishes loading & parsing the data, it will start scheduling notifications for the nearest future launch. Let’s see how it does it.
Initializing the plugin
First, we’ll need to instantiate and initialize the ‘LocalNotificationsPlugin’ class. I do this in the ‘AppModel’ scoped model, which you can find here. This model wraps, in my case, the whole MaterialApp.
Note that in line 13 we’re initializing the plugin itself, applying the settings for both Android & iOS notifications. We have to specify the default Android notification icon. This name must be the name of the asset we’ve already created on the drawable/ folder inside the Android project.
Scheduling notifications
Now we’re going to center our attention in the ‘Home’ model, where the cool stuff happens. This model includes an object called ‘launch’, which will have all the details about a specific launch. You can find more details about both the Launch class, and the Home model in the SpaceX GO! GitHub repository.
First, it checks if the launch date has been moved (which is not unusual in the space industry), comparing the saved date & the current one. All of this is done by using the shared_preferences package.
If dates aren’t the same, it then proceeds to reschedule notifications. It will call three times to the ‘_scheduleNotification()’ function, which will, as its name suggests, schedule the notification itself. After that, it’ll storage the current launch date, in order to check in the future, if the date has been moved once again.
The ‘_scheduleNotification()’ block is an asynchronous function that will schedule a notification, based on its parameters, calling to the ‘notifications’ variable, an instance of ‘FlutterLocalNotifications’, inside the ‘AppModel’ scoped model. Because this model wraps the whole app, we can access its information easily, using the app context itself. This is the power of the ScopedModel library.
Did you notice the ‘FlutterI18n’ thing? This package is a really awesome one. It allows us to internationalize our apps easily, storing language data in a single JSON file. You can find mine here, so you can check out how I’m displaying the information.
Final result
And this right here is the final result. This notification, for example, will pop up 30 minutes before lift-off.
Note that both notification’s title & description are displaying the correct data, using placeholders. Also, the icon corresponds with the one we’ve set up earlier.
That’s all for today folks!
You can contact me directly via email, Twitter or Reddit. Ask me anything you want :) You can also reply directly to this post.
If you want even more details about local notifications, Johannes Milke has some cool tutorials on his YouTube channel, check them out if you’re interested!
If you’re interested specifically in this app, SpaceX GO!, it’s available on the Play Store. Source code is also available in GitHub for everyone! Tell me what you think about it by leaving your feedback!
Thanks to the Flutter Community publication, and especially to Nash to help me publishing this article: you’re awesome!
