如何在flutter上实现事件监听器或委托

Question

I have a main dart class in which the app bar is located and the app bar contains a refresh button. I'm using a navigation drawer to populate two other views f1 and f2.

From my main.dart how can I pass the refresh button clicks to the sub fragment kind of f1.dart so that I can refresh my contents on f1.dart

// State of Main
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: new Column(
          children: <Widget>[

////////////////////////////////////////////////////////////
                new FirstFragment(),
                new SecondFragment()
/////////////////////////////////////////////////////////////
          ],
        ),
      ),
      appBar: AppBar(
        title: Text(widget.title),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              print("refresh pressed");
/////////////////////////
         How to send this refresh pressed event to my FirstFragment class??
/////////////////////////
            },
            color: Colors.white,
          )
        ],
      ),
      body: _getDrawerItemWidget(_selectedDrawerIndex),
    );
  }

}

In Android, I've been using event listeners and for iOS, I can use delegates for the purpose. How can I achieve this on flutter/dart. ?

Answer 1

You can pass a callback, use the VoidCallback and receive the event on your Main widget.

        class MainPage extends StatelessWidget {
          _onTapButton() {
            print("your event here");
          }

          @override
          Widget build(BuildContext context) {
            return Container(
              child: ChildPage(
                onTap: _onTapButton,
              ),
            );
          }
        }

        class ChildPage extends StatelessWidget {
          final VoidCallback onTap;

          const ChildPage({Key key, this.onTap}) : super(key: key);

          @override
          Widget build(BuildContext context) {
            return Container(
              child: RaisedButton(
                child: Text("Click Me"),
                onPressed: () {
                  //call to your callback  here
                  onTap();
                },
              ),
            );
          }
        } 

In case you want the opposite, you can just refresh the state of your parent widget and change the parameter that you pass to your fragments or also you can use GlobalKey, like the example below:

        class MainPage extends StatelessWidget {

          final GlobalKey<ChildPageState> _key = GlobalKey();

          _onTapButton() {
            _key.currentState.myMethod();
          }

          @override
          Widget build(BuildContext context) {
            return Container(
              child: Column(
                children: [
                  ChildPage(
                    key: _key,
                  ),
                  RaisedButton(
                    child: Text("Click me"),
                    onPressed: _onTapButton,
                  )
                ],
              )
            );
          }
        }

        class ChildPage extends StatefulWidget {
          const ChildPage({Key key}) : super(key: key);

          @override
          ChildPageState createState() {
            return new ChildPageState();
          }
        }

        class ChildPageState extends State<ChildPage> {

          myMethod(){
            print("called from parent");
          }

          @override
          Widget build(BuildContext context) {
            return Container(
              child: Text("Click Me"),
            );
          }
        }