Flutter - widget variables are always null

Question

I have a Flutter app connected to firebase, and I'm using it to receive push notifications from Firebase Cloud Messaging, using this code. Whenever I call the variables widget.title, widget.body, they are null, but when the method receives a notification, they have the value that came from FCM. What should I do?

class PushList extends StatefulWidget {
  
  Map<dynamic, dynamic> notific;
  String title, body;

  Future<dynamic> fcmMessageReceiver() async {
    FirebaseMessaging.instance.getInitialMessage().then((value) {
      if (value != null) {}
    });

    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      if (message.notification != null) {
        notificacao = {
          'title': message.notification.title,
          'body': message.notification.body
        };
        title = message.notification.title;
        body = message.notification.body;

        print('MENSAGEM: $notific');
      }
    });
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {});
  }

  PushList() {
  }

  @override
  _PushListState createState() => _PushListState();
}

class _PushListState extends State<PushList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      backgroundColor: Colors.white,
      appBar: null,
      body: ListView(
        children: [
          widget.notific != null
              ? Card(
                  margin: EdgeInsets.all(10),
                  elevation: 4,
                  child: ListTile(
                    title: Text(
                      widget.title,
                    ),
                    subtitle: Text(
                      widget.body,
                    ),
                  ),
                )
              : Container(
                  child: Text("U don't have new notifcs."),
                ),
        ],
      ),
    );
  }
}

Answer 1

PushList should be immutable. Define the properties inside the state and call fcmMessageReceiver inside initState. Also you need to call setState to trigger rebuild after you set title and body:

class PushList extends StatefulWidget {
  @override
  _PushListState createState() => _PushListState();
}

class _PushListState extends State<PushList> {
  Map<dynamic, dynamic> notific;
  String title, body;

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

  Future<dynamic> fcmMessageReceiver() async {
    FirebaseMessaging.instance.getInitialMessage().then((value) {
      if (value != null) {}
    });

    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      if (message.notification != null) {
        if (mounted) {
          setState(() {
            notificacao = {
              'title': message.notification.title,
              'body': message.notification.body
            };
            title = message.notification.title;
            body = message.notification.body;
          });
        }
        print('MENSAGEM: $notific');
      }
    });
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      backgroundColor: Colors.white,
      appBar: null,
      body: ListView(
        children: [
          notific != null
              ? Card(
                  margin: EdgeInsets.all(10),
                  elevation: 4,
                  child: ListTile(
                    title: Text(
                      title ?? '',
                    ),
                    subtitle: Text(
                      body ?? '',
                    ),
                  ),
                )
              : Container(
                  child: Text("U don't have new notifcs."),
                ),
        ],
      ),
    );
  }
}