Flutter OneSignal Examples

Flutter OneSignal - How To Examples

Introduction

OneSignal is a popular push notification service that allows developers to send push notifications to their mobile app users. It supports multiple platforms, including Flutter.

This tutorial will guide you through several examples of using OneSignal in Flutter. We will cover the installation process, initializing OneSignal in your Flutter app, and implementing various features like sending notifications, handling received notifications, and customizing notification appearance.

Installation

To get started with OneSignal in your Flutter app, you need to add the onesignal_flutter package to your project's pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  onesignal_flutter: ^latest_version

Replace latest_version with the latest version of the onesignal_flutter package.

After updating the pubspec.yaml file, run the following command to fetch the package:

flutter pub get

Example 1: Initializing OneSignal

To begin using OneSignal, you need to initialize it in your Flutter app. Here's an example of how to do it:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Initialize OneSignal
    OneSignal.shared.init(
      "YOUR_ONESIGNAL_APP_ID",
      iOSSettings: {
        OSiOSSettings.autoPrompt: false,
        OSiOSSettings.inAppLaunchUrl: true,
      },
    );

    // Set notification received and opened handlers
    OneSignal.shared.setNotificationReceivedHandler((OSNotification notification) {
      // Handle received notification
    });

    OneSignal.shared.setNotificationOpenedHandler((OSNotificationOpenedResult result) {
      // Handle opened notification
    });

    return MaterialApp(
      title: 'Flutter OneSignal Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter OneSignal Example'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

Make sure to replace "YOUR_ONESIGNAL_APP_ID" with your actual OneSignal app ID.

In this example, we initialize OneSignal with the provided app ID and configure some iOS settings. We also set the notification received and opened handlers to handle incoming notifications.

Example 2: Sending a Notification

To send a notification to your app users using OneSignal, you can use the OneSignal API or the OneSignal dashboard. Here's an example of using the OneSignal API:

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

void sendNotification() {
  // Create a notification content
  var notification = OSCreateNotification(
    playerIds: ['USER_PLAYER_ID'],
    content: 'Hello from OneSignal!',
    heading: 'New Message',
  );

  // Send the notification
  OneSignal.shared.postNotification(notification).then((response) {
    // Handle response
  }).catchError((error) {
    // Handle error
  });
}

Replace 'USER_PLAYER_ID' with the player ID of the user you want to send the notification to. You can obtain the player ID from the OneSignal dashboard or by using OneSignal API methods.

In this example, we create a OSCreateNotification object with the player ID, notification content, and heading. Then we use the postNotification method of OneSignal to send the notification.

Example 3: Customizing Notification Appearance

OneSignal allows you to customize the appearance of push notifications in your Flutter app. Here's an example of how to customize the notification appearance:

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

void main() {
  // Customize notification appearance
  OneSignal.shared.setNotificationWillShowInForegroundHandler((OSNotificationReceivedEvent event) {
    event.complete(
      OSNotification(
        displayType: OSNotificationDisplayType.notification,
        title: 'Custom Title',
        body: 'Custom Body',
        sound: 'custom_sound.wav',
        additionalData: {'key': 'value'},
      ),
    );
  });

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Initialize OneSignal
    OneSignal.shared.init("YOUR_ONESIGNAL_APP_ID");

    return MaterialApp(
      title: 'Flutter OneSignal Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter OneSignal Example'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

In this example, we use the setNotificationWillShowInForegroundHandler method of OneSignal to customize the notification appearance. We provide a new OSNotification object with the desired title, body, sound, and additional data.

Example 4: Handling Received Notifications

When a notification is received by your Flutter app, you can handle it and perform specific actions. Here's an example of how to handle received notifications:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Initialize OneSignal
    OneSignal.shared.init("YOUR_ONESIGNAL_APP_ID");

    // Set notification received handler
    OneSignal.shared.setNotificationReceivedHandler((OSNotification notification) {
      // Handle received notification
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text(notification.title ?? ''),
            content: Text(notification.body ?? ''),
            actions: [
              TextButton(
                child: Text('Close'),
                onPressed: () => Navigator.of(context).pop(),
              ),
            ],
          );
        },
      );
    });

    return MaterialApp(
      title: 'Flutter OneSignal Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter OneSignal Example'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

In this example, we set the notification received handler using the setNotificationReceivedHandler method of OneSignal. When a notification is received, we show an alert dialog with the notification title and body.

Example 5: Handling Opened Notifications

When a notification is opened by the user, you can handle it and navigate to a specific screen or perform other actions. Here's an example of how to handle opened notifications:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Initialize OneSignal
    OneSignal.shared.init("YOUR_ONESIGNAL_APP_ID");

    // Set notification opened handler
    OneSignal.shared.setNotificationOpenedHandler((OSNotificationOpenedResult result) {
      // Handle opened notification
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text(result.notification.title ?? ''),
            content: Text(result.notification.body ?? ''),
            actions: [
              TextButton(
                child: Text('Close'),
                onPressed: () => Navigator.of(context).pop(),
              ),
            ],
          );
        },
      );
    });

    return MaterialApp(
      title: 'Flutter OneSignal Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter OneSignal Example'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

In this example, we set the notification opened handler using the setNotificationOpenedHandler method of OneSignal. When a notification is opened, we show an alert dialog with the notification title and body.

Conclusion

This tutorial covered several examples of using OneSignal in Flutter. You learned how to initialize OneSignal, send notifications, customize notification appearance, handle received notifications, and handle opened notifications. With these examples, you can enhance your Flutter app with push notification capabilities using OneSignal.