Flutter - Use Notification to message other widgets

Question

I would like to use a flutter Notification in a StatefulWidget to communicate with another StatefulWidget widget. I have posted an example below that I feel should be working but it does not. When you click the "+" icon button, it should send out the notification to the subPage widget. Currently, when you click the button, nothing seems to happen. I would expect the onTitlePush() function to be executed. This is my first time trying Notifications and I must have something set up incorrectly. I am using this in a larger app but the code below is just a sample of the implementation. Could you let me know where I went wrong?

import 'package:flutter/material.dart';

void main() => runApp(TestApp());

class TestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Notificaton Test',
      home: MainPage(),
    );
  }
}

class MyNotification extends Notification {
  final String title;

  const MyNotification({this.title});
}

class MainPage extends StatefulWidget {
  @override
  MainPageState createState() {
    return new MainPageState();
  }
}

class MainPageState extends State<MainPage> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Basic AppBar'),
          actions: <Widget>[
            // action button
            IconButton(
              icon: new Icon(Icons.add),
              onPressed: () {
                MyNotification(title: "Updated Text!")..dispatch(context);
              },
            ),
            // action button
          ],
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: new SubPage(),
        ),
      ),
    );
  }
}

class SubPage extends StatefulWidget {
  @override
  SubPageState createState() {
    return new SubPageState();
  }
}

class SubPageState extends State<SubPage> {
  String _text = "Click the Plus Icon";
  @override
  Widget build(BuildContext context) {
    return NotificationListener<MyNotification>(
      onNotification: onTitlePush,
      child: new Center(
          child: new Text(_text, style: new TextStyle(fontSize: 40.0))
      ),
    );
  }
  bool onTitlePush(MyNotification notification) {
    print("New item ${notification.title}");

    setState(() { _text = notification.title; });
    return true;
  }
}

Rémi Rousselet · Accepted Answer · 2018-10-04T17:18:14.710

20

Notifications are the opposite of BuildContext. With notifications, it is children that sends value to their parents.

Notifications are not global. Widgets that are not parent of the dispatcher cannot listen to the said notification.

Therefore, what you are trying to achieve in fact cannot be done with notifications.

There are a few alternatives:

Use Listenable such as ValueListenable How to set state from another widget?
Use Streams Trigger a function from a widget to a State object
Refactor your Widget tree so that listeners are parents of the dispatcher

edited Oct 04 '18 at 17:18

answered Oct 04 '18 at 17:05

Rémi Rousselet

256,336
79
519
432

This makes sense, thank you. Could you suggest the correct way that I could send an event to a child widget with data and have the child widget respond? I could use a key but I would like the make the child widget responsive. – casmang Oct 04 '18 at 17:09
Refactoring your widget tree or passing streams/valuelistenables as parameter of your widgets. I made a few posts about state management: https://stackoverflow.com/questions/46057353/controlling-state-from-outside-of-a-statefulwidget/51460832#51460832 https://stackoverflow.com/questions/50430273/how-to-set-state-from-another-widget/50430389#50430389 https://stackoverflow.com/questions/50733840/trigger-a-function-from-a-widget-to-a-state-object/50739019#50739019 – Rémi Rousselet Oct 04 '18 at 17:15

Flutter - Use Notification to message other widgets

1 Answers1