flutter+firebase

Flutter push notification using firebase (FCM)

Flutter

FCM (Firebase Cloud Messaging) is a cross-platform messaging solution that lets you reliably deliver messages at no cost. It is provided by Google as part of the Firebase suite of tools.

To use FCM in a Flutter app, you will need to use the firebase_messaging plugin. This plugin provides a simple API for handling messages, including displaying notifications on the device.

Here is an example of how you can use the firebase_messaging plugin to listen for and handle messages in a Flutter app:

import 'package:firebase_messaging/firebase_messaging.dart';

FirebaseMessaging firebaseMessaging = FirebaseMessaging();

firebaseMessaging.configure(
  onMessage: (Map<String, dynamic> message) async {
    print("onMessage: $message");
    // Show a notification
  },
  onLaunch: (Map<String, dynamic> message) async {
    print("onLaunch: $message");
    // Navigate to a new screen
  },
  onResume: (Map<String, dynamic> message) async {
    print("onResume: $message");
    // Navigate to a new screen
  },
);

You can then send messages to the app using the Firebase console or through the FCM API. For more information on using FCM in a Flutter app, see the firebase_messaging plugin documentation:

https://pub.dev/packages/firebase_messaging

Show The Notification On Card

To show a notification on a card in a Flutter app, you can use the Card widget from the material library, along with the showNotification method from the firebase_messaging plugin.

Here is an example of how you can use these widgets to display a notification in a Flutter app:

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

FirebaseMessaging firebaseMessaging = FirebaseMessaging();

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _notificationText = 'No notification yet';

  @override
  void initState() {
    super.initState();
    firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        setState(() {
          _notificationText = message['notification']['body'];
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Card(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(_notificationText),
          ),
        ),
      ),
    );
  }
}

This code will listen for notifications using the firebase_messaging plugin, and when a notification is received, it will update the text displayed on the card.

You can customize the appearance of the card by using different attributes of the Card widget, such as the elevation and color properties. You can also use other widgets, such as images or buttons, inside the card to create more complex notifications.

For more information on using the Card widget and the firebase_messaging plugin in a Flutter app, see the following documentation:

Comments are closed.