Notifications (local) in Flutter - Mini App: Build & Ship

Build: Local Notification Demo

This screen shows a button that, when tapped, triggers a local notification on the device.

Target UI

-------------------------
| Local Notification Demo |
|-----------------------|
|                       |
|   [ Show Notification ]|
|                       |
-------------------------

Add a button labeled 'Show Notification' centered on the screen.

When the button is tapped, display a local notification with a title and message.

Use flutter_local_notifications package for notification handling.

Request notification permissions if needed.

Ensure the notification appears even if the app is in the background.

Starter Code

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: NotificationScreen(),
    );
  }
}

class NotificationScreen extends StatefulWidget {
  const NotificationScreen({super.key});

  @override
  State<NotificationScreen> createState() => _NotificationScreenState();
}

class _NotificationScreenState extends State<NotificationScreen> {
  // TODO: Initialize notification plugin here

  @override
  void initState() {
    super.initState();
    // TODO: Request permissions and initialize notifications
  }

  void _showNotification() {
    // TODO: Show a local notification
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Local Notification Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showNotification,
          child: const Text('Show Notification'),
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

Flutter

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: NotificationScreen(),
    );
  }
}

class NotificationScreen extends StatefulWidget {
  const NotificationScreen({super.key});

  @override
  State<NotificationScreen> createState() => _NotificationScreenState();
}

class _NotificationScreenState extends State<NotificationScreen> {
  final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();

  @override
  void initState() {
    super.initState();
    _initializeNotifications();
  }

  Future<void> _initializeNotifications() async {
    const AndroidInitializationSettings initializationSettingsAndroid = AndroidInitializationSettings('@mipmap/ic_launcher');
    const DarwinInitializationSettings initializationSettingsIOS = DarwinInitializationSettings(
      requestAlertPermission: true,
      requestBadgePermission: true,
      requestSoundPermission: true,
    );
    const InitializationSettings initializationSettings = InitializationSettings(
      android: initializationSettingsAndroid,
      iOS: initializationSettingsIOS,
    );

    await flutterLocalNotificationsPlugin.initialize(initializationSettings);
  }

  Future<void> _showNotification() async {
    const AndroidNotificationDetails androidDetails = AndroidNotificationDetails(
      'channel_id',
      'Local Notifications',
      channelDescription: 'Channel for local notifications',
      importance: Importance.max,
      priority: Priority.high,
      ticker: 'ticker',
    );
    const DarwinNotificationDetails iosDetails = DarwinNotificationDetails();
    const NotificationDetails platformDetails = NotificationDetails(
      android: androidDetails,
      iOS: iosDetails,
    );

    await flutterLocalNotificationsPlugin.show(
      0,
      'Hello!',
      'This is a local notification.',
      platformDetails,
      payload: 'Notification Payload',
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Local Notification Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showNotification,
          child: const Text('Show Notification'),
        ),
      ),
    );
  }
}

We use the flutter_local_notifications package to handle local notifications.

In initState, we initialize the notification plugin with settings for Android and iOS, requesting permissions on iOS.

The _showNotification method creates notification details for both platforms and calls show to display the notification immediately.

The button triggers this method when tapped, so the user sees a notification with a title and message.

Final Result

Completed Screen

-------------------------
| Local Notification Demo |
|-----------------------|
|                       |
|   [ Show Notification ]|
|                       |
-------------------------

User taps 'Show Notification' button.

A local notification appears on the device with title 'Hello!' and message 'This is a local notification.'.

Notification shows even if app is in background.

Stretch Goal

Add a notification action button that opens the app when tapped.

💡 Hint

Use the 'payload' parameter in show() and handle it in onSelectNotification callback during initialization.