How to Show Image from Assets and URL on Local Notification in Flutter App
Introduction
Local notifications are an essential feature in mobile applications that provide users with timely and relevant information. In Flutter, the `flutterlocalnotifications` package is used to handle local notifications. However, one of the common requirements for local notifications is to display an image from either assets or a URL. In this article, we will explore how to achieve this in a Flutter app.
Prerequisites
Before we dive into the code, make sure you have the following prerequisites:
- Flutter SDK installed on your machine
- A Flutter project set up in your favorite IDE
- `flutterlocalnotifications` package added to your project (if not already)
Showing Image from Assets
To show an image from assets, we need to create a notification icon in PNG format with a suitable size (e.g., 100×100 pixels). Then, we can use the ` notificationDetails` widget to load the asset as a notification icon.
Here’s an example code snippet:
“`dart
import ‘package:flutter/material.dart’;
import ‘package:flutterlocalnotifications/flutterlocalnotifications.dart’;
class LocalNotification extends StatefulWidget {
@override
LocalNotificationState createState() => LocalNotificationState();
}
class _LocalNotificationState extends State
final FlutterLocalNotificationsPlugin _flutterLocalNotificationsPlugin =
FlutterLocalNotificationsPlugin();
@override
void initState() {
super.initState();
_initNotifications();
}
Future
await _flutterLocalNotificationsPlugin.initialize(
onSelectNotification: onSelectNotification,
);
}
Future
await _flutterLocalNotificationsPlugin.show(
0,
“Notification”,
“This is a test notification”,
NotificationDetails(
android: AndroidNotificationDetails(
“com.example.app”,
“Local Notifications”,
importance: Importance.max,
icon: “notification_icon”,
),
),
);
}
Future onSelectNotification(String payload) async {
// Launch a specific screen of your app
await Navigator.push(
context,
MaterialPageRoute(builder: (context) => AddEntry()),
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: “Local Notification”,
home: Scaffold(
appBar: AppBar(
title: Text(“Local Notification”),
),
body: Center(
child: ElevatedButton(
onPressed: _showNotification,
child: Text(“Show Notification”),
),
),
),
);
}
}
“`
Showing Image from URL
To show an image from a URL, we can use the `CachedNetworkImage` widget from the `cachednetworkimage` package. We need to add this package to our project first.
Here’s an updated code snippet:
“`dart
import ‘package:flutter/material.dart’;
import ‘package:flutterlocalnotifications/flutterlocalnotifications.dart’;
import ‘package:cachednetworkimage/cachednetworkimage.dart’;
// …
class _LocalNotificationState extends State
// …
Future
await _flutterLocalNotificationsPlugin.show(
0,
“Notification”,
“This is a test notification”,
NotificationDetails(
android: AndroidNotificationDetails(
“com.example.app”,
“Local Notifications”,
importance: Importance.max,
icon: “notification_icon”,
),
),
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => AddEntry()),
);
},
payload: “example payload”,
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: “Local Notification”,
home: Scaffold(
appBar: AppBar(
title: Text(“Local Notification”),
),
body: Center(
child: ElevatedButton(
onPressed: _showNotification,
child: Text(“Show Notification”),
),
),
),
);
}
}
“`
Summary of Code
To summarize, we’ve shown how to display images from assets and URLs in a local notification using `flutterlocalnotifications` package. The basic requirements include setting up Flutter SDK, creating a notification icon, and using `notificationDetails` widget to load the image.
Conclusion
In conclusion, displaying images from assets and URLs in a Flutter local notification can be achieved using the `flutterlocalnotifications` package. By following the steps outlined in this article, you can create a notification that includes a custom image, enhancing the user experience of your app.
FAQs
1. Q: Can I show a large-sized image in a local notification?
A: Yes, you can show a large-sized image, but keep in mind that the original image will be resized according to the notification icon size (100×100 pixels).
2. Q: How can I add a color to the notification icon?
A: You can set the `color` parameter in `AndroidNotificationDetails` widget to add a color to the notification icon.
3. Q: How can I display a video in a local notification?
A: Unfortunately, displaying a video in a local notification is not currently supported. You can suggest this feature to the package maintainers.
4. Q: Can I customize the notification layout?
A: Yes, you can customize the notification layout by modifying the `notificationDetails` widget. However, keep in mind that some customization may require additional packages or manually digging into the package’s source code.
5. Q: How can I get the notification tapped payload?
A: The notification tapped payload can be obtained using the `selectNotification` callback function. Just call `onSelectNotification` with the parsed payload data.
Assets and Packages Used
- `flutterlocalnotifications` package: https://pub.dev/packages/flutterlocalnotifications
- `cachednetworkimage` package: https://pub.dev/packages/cachednetworkimage
License
This article is released under the MIT License.
