Schedule Local Push Notifications in Flutter

In this article we will discuss about how to schedule local push notifications in our flutter apps based on the given date and time.

🎥 Video Tutorial

🛠️ Dependencies

flutter_local_notifications | Flutter Package

A cross platform plugin for displaying local notifications. Android 4.1+. Uses the NotificationCompat APIs so it can be…

pub.dev

flutter_datetime_picker | Flutter Package

(Pub) flutter_datetime_picker A flutter date time picker inspired by flutter-cupertino-date-picker you can choose date…

pub.dev

🔭 Implementation

This article is going to be a continuation of the 👉 previous article 👈 were in we have discussed about the initial set up of enabling local push notification upon button press event. If you are new here, I recommend you to check this previous article 👉 https://medium.com/p/45d1ebd61d0c
because we are not going to address the initial setup for enabling the local notifications now since it is already done in the above article.

In this article let’s focus on how to schedule the notifications based on the given date time parameter, considering the initial setup is done already.

→ First let’s update the main() method as follows.

import 'package:flutter/material.dart';
import 'package:timezone/data/latest.dart' as tz;

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  NotificationService().initNotification();
  tz.initializeTimeZones();
  runApp(const MyApp());
}

→ Build up the UI for selecting the date-time for scheduling notifications.

DateTime scheduleTime = DateTime.now();

class DatePickerTxt extends StatefulWidget {
  const DatePickerTxt({
    Key? key,
  }) : super(key: key);

  @override
  State<DatePickerTxt> createState() => _DatePickerTxtState();
}

class _DatePickerTxtState extends State<DatePickerTxt> {
  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {
        DatePicker.showDateTimePicker(
          context,
          showTitleActions: true,
          onChanged: (date) => scheduleTime = date,
          onConfirm: (date) {},
        );
      },
      child: const Text(
        'Select Date Time',
        style: TextStyle(color: Colors.blue),
      ),
    );
  }
}

→ Now let’s build an elevated button which when clicked will schedule the notifications on the selected date-time.

class ScheduleBtn extends StatelessWidget {
  const ScheduleBtn({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: const Text('Schedule notifications'),
      onPressed: () {
        debugPrint('Notification Scheduled for $scheduleTime');
        NotificationService().scheduleNotification(
            title: 'Scheduled Notification',
            body: '$scheduleTime',
            scheduledNotificationDateTime: scheduleTime);
      },
    );
  }
}

Here inside the onPressed() event lets try calling the scheduleNotification() method by passing the title, body and the selected date-time.

The scheduleNotification() method is as follows., 👇

  Future scheduleNotification(
      {int id = 0,
      String? title,
      String? body,
      String? payLoad,
      required DateTime scheduledNotificationDateTime}) async {
    return notificationsPlugin.zonedSchedule(
        id,
        title,
        body,
        tz.TZDateTime.from(
          scheduledNotificationDateTime,
          tz.local,
        ),
        await notificationDetails(),
        androidAllowWhileIdle: true,
        uiLocalNotificationDateInterpretation:
            UILocalNotificationDateInterpretation.absoluteTime);
  }