Flutter Use ChangeNotifier for create list message

Question

I would like to make a push message list but I can't find a method to update this list and rebuild my "HomePage".

for more information the big problème is this 2 line:

final MessageModel messageModel = MessageModel();

messageModel.addMessage(message);

main()

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';
import 'package:notification_exemple_4/version/v1/pages/home_page.dart';
import 'package:notification_exemple_4/version/v1/pages/notification_page.dart';
import 'package:provider/provider.dart';

import 'api/firebase_api.dart';
import 'firebase_options.dart';

final navigatorKey = GlobalKey<NavigatorState>();

class MessageModel extends ChangeNotifier {
  List<Widget> _messaging = [];
  List<Widget> get messaging => _messaging;

  void addMessage(RemoteMessage remoteMessage) {
    messaging.add(Text(remoteMessage.messageId.toString()));
    notifyListeners();
  }
}

final MessageModel messageModel = MessageModel();

@pragma('vm:entry-point')
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message,) async {
  // If you're going to use other Firebase services in the background, such as Firestore,
  // make sure you call `initializeApp` before using other Firebase services.
  await Firebase.initializeApp();

  print("Handling a background message: ${message.messageId}");
}

Future<void> main() async{
  WidgetsFlutterBinding.ensureInitialized();
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print('Got a message whilst in the foreground!');
    print('Message data: ${message.data}');

    if (message.notification != null) {
      messageModel.addMessage(message);
      print("tp failed");
      /*navigatorKey.currentState?.pushNamed(
        '/home',
        arguments: message,
      );*/
      print('Message also contained a notification: ${message.notification}');
    }
  });


  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  await FirebaseApi().iniNotifications();

  runApp(
      MultiProvider(
        providers: [
          ChangeNotifierProvider(create: (_) => MessageModel()),
        ],
        child: const MyApp(),
      )
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
      navigatorKey: navigatorKey,
      routes: {
        "/home": (context) => const HomePage(),
        "/notification_screen": (context) => const NotificationPage(),
      },
    );
  }
}

on this page i use MessageModel to Stock Message on List for display on call (just for testing)

HomePage()

import 'package:flutter/material.dart';
import 'package:notification_exemple_4/version/v1/main.dart';
import 'package:provider/provider.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    print(messageModel.messaging);

    return Scaffold(
      appBar: AppBar(title: const Text("Home Page"),),
      body: SafeArea(
        child: ListView(
          children: context.watch<MessageModel>().messaging,
        )
      ),
    );
  }
}

on this page i call my list of message and display on ListView (read() as change to watch(), thanks user18309290).

I try to use Provider package but i not have context in "onMessage.listen()" and on use personnal function but i can't rebuild my "HomePage".

Answer 1

You should use watch not read:

    return Scaffold(
      appBar: AppBar(title: const Text("Home Page"),),
      body: SafeArea(
        child: ListView(
          children: context.watch<MessageModel>().messaging,
        )
      ),
    );