Initialize class scope member with method in StatelessWidget - dart

Question

I have found a little issue while learning Flutter and I'm wondering which is the better way to fix it.
Here is a very simple example code of the issue:
class SubWidget extends StatelessWidget {
final void Function() mainOnPressed;
SubWidget(this.mainOnPressed);
#override
Widget build(BuildContext context) => RaisedButton(onPressed: mainOnPressed,);
void actionA() { /* Do A */ };
void actionB() { /* Do B */ };
}
class MainWidget extends StatelessWidget {
final SubWidget _subWidget;
MainWidget() : _subWidget = SubWidget(_onSubPressed);
Widget _buildChildA() => RaisedButton(onPressed: _subWidget.actionA,);
Widget _buildChildB() => RaisedButton(onPressed: _subWidget.actionB,);
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
_buildChildA(),
_buildChildB(),
_subWidget,
]
);
}
void _onSubPressed() { /* Do something */ }
}
The above code has an error, because I'm passing the _onSubPressed method as argument in the MainWidget constructor and it cannot be done because its initialization isn't complete.
I also can't move the initialization of _subWidget outside the constructor because it would give me an error because it's final and I can't remove the final because I'd get a warning for having a non-final member in an immutable class.
For the same reason, I can't defer the initialization of mainOnPressed in the SubWidget class.
I thought about moving the _subWidget member inside the build() method and pass it to the _buildChildX() methods, but while it is quite simple in this example, it would be more annoying having to do it with multiple members or methods that have the same issue.
Another solution I found is to move the _subWidget member and the two _buildChildX() inside the build() method like in the following code:
class MainWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
final SubWidget _subWidget = SubWidget(_onSubPressed);
Widget _buildChildA() => RaisedButton(onPressed: _subWidget.actionA,);
Widget _buildChildB() => RaisedButton(onPressed: _subWidget.actionB,);
return Column(
children: <Widget>[
_buildChildA(),
_buildChildB(),
_subWidget,
]
);
}
void _onSubPressed() { /* Do something */ }
}
While it works as expected, I am a little worried about the readability of the code with longer and more complex methods nested inside the build method.
Which is the best way to solve this issue?

Answer 1

The reason why you're getting the error "This expression has a type of 'void' so its value can't be used." on MainWidget() : _subWidget = SubWidget(_onSubPressed()); is because _onSubPressed() may contain an unexpected expression. This is explained on the link provided in the error message: https://dart.dev/tools/diagnostic-messages#use_of_void_result
To solve this issue, you can move the function's contents to the constructor to initialize _subWidget.
final SubWidget _subWidget;
MainWidget() : _subWidget = SubWidget((){
// Do something
});
Here's a complete sample that you can try out.
import 'package:flutter/material.dart';
void main() {
runApp(MainWidget());
}
class SubWidget extends StatelessWidget {
final void Function() mainOnPressed;
SubWidget(this.mainOnPressed);
#override
Widget build(BuildContext context) => ElevatedButton(
child: Text('SubWidget'),
onPressed: mainOnPressed,
);
void actionA() {
/* Do A */
debugPrint('Child A');
}
void actionB() {
/* Do B */
debugPrint('Child B');
}
}
class MainWidget extends StatelessWidget {
final SubWidget _subWidget;
MainWidget() : _subWidget = SubWidget((){
debugPrint('SubWidget');
});
Widget _buildChildA() => ElevatedButton(
child: Text('Child A'),
onPressed: _subWidget.actionA,
);
Widget _buildChildB() => ElevatedButton(
child: Text('Child B'),
onPressed: _subWidget.actionB,
);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(children: <Widget>[
_buildChildA(),
_buildChildB(),
_subWidget,
]),
),
),
);
}
}