How to Show Image from Assets and URL on Local Notification in Flutter App

In this example, we are going to show you how to add images from the assets folder and from the network URL on the local notification in Flutter App. This App example code is the easiest way to show images on the local notifications in Flutter App.

First, you must learn to integrate local notification in Flutter App. We have previously posted a detailed article on How to show local notification in the Flutter app. You can see the notification setup guide in detail.

In this example, we are simply going to show you how to show images in the local notification. To achieve an image on local notification, first add the awesome_notifications Flutter package by adding the following lines in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  awesome_notifications: ^0.6.19

awesome_notifications is the best flutter package we got to show local notifications in the Flutter app.

To show images from the assets folder on local notification, first, you need to create an assets folder and index in pubspec.yaml file. Here our images are located at:

And in our pubspect.yaml, we index the assets folder like below:

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
     - assets/images/

If, you don't know how to add an image yet in Flutter, have a look at How to Add Image from Assets Folder in Flutter App.

Now show the notification like below:

AwesomeNotifications().createNotification(
    content: NotificationContent( //with asset image
        id: 1234,
        channelKey: 'image',
        title: 'Hello ! How are you?',
        body: 'This simple notification is from Flutter App with Asset Image',
        bigPicture: 'asset://assets/images/puppy.jpg',
        notificationLayout: NotificationLayout.BigPicture, 
    )
);

If you are thinking about what is channelKey, have a look at the full app example below, or you can see the article mentioned above where we have shown how to set up a local notification in Flutter App.

Remember, if you haven't configured notificationLayout to NotificationLayout.BigPicutre, your image will not be displayed.

AwesomeNotifications().createNotification(
    content: NotificationContent( //with image from URL
        id: 12345,
        channelKey: 'image',
        title: 'Simple Notification with Network Image',
        body: 'This simple notification is from Flutter App',
        bigPicture: 'https://www.fluttercampus.com/img/logo_small.webp',
        notificationLayout: NotificationLayout.BigPicture,
    )
);

In bigPicture attribute, add the URL where your image is located.

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

void main() async {
   WidgetsFlutterBinding.ensureInitialized();
   AwesomeNotifications().initialize(
     'resource://drawable/notification_icon', 
     [            // notification icon 
        NotificationChannel(
            channelGroupKey: 'basic_test',
            channelKey: 'basic',
            channelName: 'Basic notifications',
            channelDescription: 'Notification channel for basic tests',
            channelShowBadge: true,
            importance: NotificationImportance.High,
            enableVibration: true,
        ),

        NotificationChannel(
            channelGroupKey: 'image_test',
            channelKey: 'image',
            channelName: 'image notifications',
            channelDescription: 'Notification channel for image tests',
            defaultColor: Colors.redAccent,
            ledColor: Colors.white,
            channelShowBadge: true,
            importance: NotificationImportance.High
        )

        //add more notification type with different configuration

     ]
  );

  //tap listiner on notification
  AwesomeNotifications().actionStream.listen((ReceivedNotification receivedNotification){
     print(receivedNotification.payload!['name']);
     //output from first notification:  FlutterCampus
  });

  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
         home: Home()
      );
  }
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("Image on Local Notification"),
            backgroundColor: Colors.deepPurpleAccent
        ),
        body: Container( 
            alignment: Alignment.topCenter,
            padding: EdgeInsets.all(20),
            child: Column(
              children: [

                    ElevatedButton(
                      onPressed: () async {
                            bool isallowed = await AwesomeNotifications().isNotificationAllowed();
                            if (!isallowed) {
                              //no permission of local notification
                              AwesomeNotifications().requestPermissionToSendNotifications();
                            }else{
                                //show notification
                                AwesomeNotifications().createNotification(
                                    content: NotificationContent( //with asset image
                                        id: 1234,
                                        channelKey: 'image',
                                        title: 'Hello ! How are you?',
                                        body: 'This simple notification is from Flutter App with Asset Image',
                                        bigPicture: 'asset://assets/images/puppy.jpg',
                                        notificationLayout: NotificationLayout.BigPicture, 
                                        payload: {"name":"fluttercampus"}
                                    )
                                );
                           }
                      }, 
                      child: Text("Show Notification With Asset Image")
                    ),

                    ElevatedButton(
                      onPressed: () async {
                            bool isallowed = await AwesomeNotifications().isNotificationAllowed();
                            if (!isallowed) {
                              //no permission of local notification
                              AwesomeNotifications().requestPermissionToSendNotifications();
                            }else{
                                //show notification
                                AwesomeNotifications().createNotification(
                                    content: NotificationContent( //with image from URL
                                        id: 12345,
                                        channelKey: 'image',
                                        title: 'Simple Notification with Network Image',
                                        body: 'This simple notification is from Flutter App',
                                        bigPicture: 'https://www.fluttercampus.com/img/logo_small.webp',
                                        notificationLayout: NotificationLayout.BigPicture,
                                        payload: {"name":"flutter"}
                                    )
                                );
                           }
                      }, 
                      child: Text("Show Notification With Network Image")
                    ),

                    
              ],
            ),
        ),
    );
  } 
}

Widgets Output