Having an issue passing button titles to another screen in dart - flutter

Question

In short I am trying to pass the title of the button from my input screen to my calculator model and once inside the calculator model, a value will be returned based on the button selected. However, currently my calculator is preforming the task WITHOUT waiting for the title of the button. Any ideas on how I can await the button title? I tried future, async, and await functionality but still couldn't get it to work properly.
Input Screen
class InputScreen extends StatefulWidget {
#override
_InputScreenState createState() =>
_InputScreenState();
}
class _InputScreenState
extends State<InputScreen> {
final MyButton selected = MyButton(title3: 'Female', title4: 'Male', title5: 'Unknown');
#override
void dispose() {
super.dispose();
selected.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Column(
children: <Widget>[
ClipPath(
clipper: MyClipper(),
child: Container(
height: 250,
width: double.infinity,
decoration: BoxDecoration(
gradient: kHeaderGradient,
image: DecorationImage(
image: AssetImage('images/virus.png'),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AppBar(
leading: null,
actions: <Widget>[
IconButton(
icon: Icon(Icons.close),
onPressed: () {
Navigator.pop(context);
}),
],
title: Text(
'Gender Multiplier',
style: kHeaderTextStyle,
),
backgroundColor: Colors.transparent,
elevation: 0.0,
),
],
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ValueListenableBuilder<Option>(
valueListenable: selected,
builder: (context, option, _) => MakeButtons(
num0: 3,
num1: 6,
makeButtonWidth: MediaQuery.of(context).size.width * 0.45,
selected: option,
onChanged: (newOption) => selected.option = newOption,
),
),
RoundedButton(
title: 'Calculate',
onPressed: () {
Calculator calc;
calc = Calculator(
buttonTitle: selected.title,
);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ResultsScreen(
genderMultiplier: calc.calculate(),
),
),
);
},
),
],
),
],
),
);
}
}
class MyClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
var path = Path();
path.lineTo(0, size.height - 80);
path.quadraticBezierTo(
size.width / 2, size.height, size.width, size.height - 80);
path.lineTo(size.width, 0);
path.close();
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
Calculator model
class Calculator {
Calculator({
this.buttonTitle,
});
String buttonTitle;
double _genderModifier
String calculate() {
double getMultiplier() {
if (buttonTitle == 'Male') {return 2;}
else if (buttonTitle == 'Female') {return 1;}
else {return 0;}
}
if (getMultiplier() == 0) {return 'Does not work';} else {
_genderModifier = 10 * getMultipler();
return _genderModifier.toStringAsFixed(1);}
}
}
Results Screen
class ResultsScreen extends StatelessWidget {
ResultsScreen({
#required this.genderMultiplier,
});
final String genderMultiplier;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('CALCULATOR'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
padding: EdgeInsets.all(15),
alignment: Alignment.bottomLeft,
child: Text(
'Your Result',
),
),
ReuseableCard(
bgColor: kGreyBackgroundColor,
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
genderMultiplier,
),
],
),
),
RoundedButton(
title: 'Re-Calc',
onPressed: () {
Navigator.pop(context);
},
)
],
),
);
}
}

Answer 1

You are using a widget called ValueListenableBuilder and it seems you do not really know what it does. And I cannot really help you with the specifics of your code there because I don't know what a MyButton is or what MakeButtons does. It looks complicated.
But as a matter of fact you don't need to know how that widget works, because I don't see any reason why you would use it in your code in the first place.
If in doubt, go with simple. Simple and working is way better than complicated and not working.
Take your calculator class, this is all it really does:
String calculate(String buttonTitle) {
if (buttonTitle == 'Male') return 20.toStringAsFixed(1);
if (buttonTitle == 'Female') return 10.toStringAsFixed(1);
return 'Does not work';
}
Try to not over-complicate things.
If you need a three-state selection, why not go with radio buttons? Simple, easy, tutorials all over the internet. That should work. Or use ToggleButtons.