How can I pass the callback to another StatefulWidget? - dart

Question

For example, I have two StatefulWidget to monitor the same callback method. How should I do this? In case I have more than three StatefulWidget to monitor its events?
class WidgetOne extends StatefulWidget {
#override
_WidgetOneState createState() => new _WidgetOneState();
}
class _WidgetOneState extends State<WidgetOne> {
// this is the callback, the widget two want listen the callback too
bool _onNotification(ScrollNotification notification){
}
#override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new NotificationListener(child: new ListView(shrinkWrap: true,),
onNotification: _onNotification),
new WidgetTwo()
],
);
}
}
class WidgetTwo extends StatefulWidget {
#override
_WidgetTwoState createState() => new _WidgetTwoState();
}
class _WidgetTwoState extends State<WidgetTwo> {
// in this,How Can I get the callback in WidgetOne?
#override
Widget build(BuildContext context) {
return new Container();
}
}

Answer 1

You can't and shouldn't. Widgets should never depends on the architecture of other widgets.
You have two possibilities :
Merge WidgetTwo and WidgetOne. As separating them doesn't makes sense (at least with what you provided).
Modify WidgetTwo to take a child. And add that ListView as child of WidgetTwo. So that it can wrap the list into it's own NotificationListener.

Answer 2

Your solution could be possible by using setState() and pass your state function in constructor of WidgetTwo. I did an example below, main idea of this example is I have MyHomePage as my main Widget and MyFloatButton (which I want to customise as another StatefulWidget), so when pressing the FAB i need to call increment counter function in MyHomePage. Lets take a look below how I do that.
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
//Consider this function as your's _onNotification and important to note I am using setState() within :)
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(
widget.title,
style: TextStyle(color: Colors.white),
),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button $_counter times:',
style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
],
),
),
floatingActionButton: new MyFloatButton(_incrementCounter),//here I am calling MyFloatButton Constructor passing _incrementCounter as a function
);
}
}
class MyFloatButton extends StatefulWidget {
final Function onPressedFunction;
// Here I am receiving the function in constructor as params
MyFloatButton(this.onPressedFunction);
#override
_MyFloatButtonState createState() => new _MyFloatButtonState();
}
class _MyFloatButtonState extends State<MyFloatButton> {
#override
Widget build(BuildContext context) {
return new Container(
padding: EdgeInsets.all(5.0),
decoration: new BoxDecoration(color: Colors.orangeAccent, borderRadius: new BorderRadius.circular(50.0)),
child: new IconButton(
icon: new Icon(Icons.add),
color: Colors.white,
onPressed: widget.onPressedFunction,// here i set the onPressed property with widget.onPressedFunction. Remember that you should use "widget." in order to access onPressedFunction here!
),
);
}
}
Now Consider MyHomePage as your WidgetOne, MyFloatButton as your WidgetTwo and _incrementCounter function as your _onNotification. Hope you will achieve what you want :)
(I did example generically so anyone can understand according to scenario they are facing)

Answer 3

You can use the built-in widget property for stateful widgets.
https://api.flutter.dev/flutter/widgets/State/widget.html
So in WidgetOne it will be
new WidgetTwo(callback: callback)
in WidgetTwo
class WidgetTwo extends StatefulWidget {
final Function callback;
WidgetTwo({this.callback});
#override
_WidgetTwoState createState() => new _WidgetTwoState();
}
and in _WidgetTwoState you can access it as
widget.callback