I am trying to pass data from a custom widget that contains a textfield to a calculator widget. The problem I am facing is that I am hoping to utilize my custom widget to create multiple inputs that can go to the calculator (i.e. height and weight). Can anyone assist with passing the data using a custom widget?
Custom Textfield Widget created
import 'package:auto_size_text/auto_size_text.dart';
enum Units { unit1, unit2 }
class InputRow extends StatefulWidget {
InputRow({this.inputParameter, this.unit1, this.unit2});
final String inputParameter;
final String unit1;
final String unit2;
@override
_InputRowState createState() => _InputRowState();
}
class _InputRowState extends State<InputRow> {
String newTaskTitle;
Units selectedUnit;
String unit;
@override
void initState() {
super.initState();
setState(() {
unit = widget.unit1;
});
}
@override
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints(maxWidth: 375, maxHeight: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: AutoSizeText(
widget.inputParameter,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 3,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(10),
),
),
child: TextField(
autofocus: true,
textAlign: TextAlign.center,
onChanged: (newText) {
newTaskTitle = newText;
},
),
),
),
Container(
decoration: BoxDecoration(
color: Colors.red,
border: Border.all(
color: Colors.red,
width: 3,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.all(5),
child: Center(
child: AutoSizeText(
unit,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
)),
),
Container(
constraints: BoxConstraints(maxHeight: 50, maxWidth: 60),
child: FlatButton(
highlightColor: Colors.transparent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.loop,
size: 25,
),
],
),
onPressed: () {
setState(() {
selectedUnit = selectedUnit == Units.unit2
? Units.unit1
: Units.unit2;
if (selectedUnit == Units.unit1) {
unit = widget.unit1;
} else {
unit = widget.unit2;
}
});
},
)),
],
),
),
],
),
);
}
}
Screen calling widgets and hopefully passing the height and weight entered in the text field to the calculator
class InputScreen extends StatefulWidget {
static const String id = 'adjustments';
@override
_InputScreenState createState() =>
_AdjustmentInputScreenState();
}
class AdjustmentInputScreenState
extends State<AdjustmentInputScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: kActiveButtonColor,
body: Column(
children: <Widget>[
AppBar(
leading: null,
actions: <Widget>[
IconButton(
icon: Icon(Icons.close),
onPressed: () {
Navigator.pop(context);
}),
],
title: Text('Dose Adjustment'),
backgroundColor: Colors.transparent,
elevation: 0.0,
),
InputRow(
unit1: 'cm',
unit2: 'inches',
inputParameter: 'height',
),
InputRow(unit1: 'lbs', unit2: 'kg', inputParameter: 'weight',),
RoundedButton(
title: 'Calculate',
onPressed: () {
//- code needed to pass the custom textfield widget data
},
),
],
),
);
}
}
CALCULATOR BRAIN
import 'dart:math';
class CalculatorTest {
CalculatorTest({this.height, this.weight, this.heightUnit, this.weightUnit});
double height;
double weight;
final String heightUnit;
final String weightUnit;
double _bmi;
String calculateBMI() {
if (weightUnit == 'lbs') {
weight = weight / 2.2;
} else {
weight = weight;
}
if (heightUnit == 'inches') {
height = height / 2.53;
} else {
height = height;
}
_bmi = weight / pow(height / 100, 2);
return _bmi.toStringAsFixed(1);
}
}
Round 3
Goal: To have the ability to select one of three buttons, the button selected will be a different color (as Button2 is below), and then I can print the title of the button (i.e. Button2) when I click the calculate button.
Currently, everything works except what is printed. I can only get information about Button1 (if selected.option is used I get "Option.one" and if selected.title is used I get "Button1") despite what button is actually selected
MyButton code
class MyButton extends ValueNotifier<Option> {
final String _title1;
final String _title2;
final String _title3;
MyButton(
{Option option = Option.one,
String title1 = 'A',
String title2 = 'B',
String title3 = 'C'})
: _title1 = title1,
_title2 = title2,
_title3 = title3,
super(option);
//You can add a get method to retrieve the title based on the option selected with a switch
String get title {
switch (value) {
case Option.one:
return _title1;
case Option.two:
return _title2;
case Option.three:
return _title3;
default:
return _title1; //or a default String, but to be honest this will never be used
}
}
Option get option => value;
set option(Option newOption) => value = newOption;
}
TriButton Code
enum Option {
one,
two,
three,
}
class TriButton extends StatefulWidget {
TriButton(
{this.title1, this.title2, this.title3, this.triWidth, this.myButton});
final String title1;
final String title2;
final String title3;
final Constraints triWidth;
final MyButton myButton;
@override
_TriButtonState createState() => _TriButtonState();
}
class _TriButtonState extends State<TriButton> {
Option selectedOption;
@override
Widget build(BuildContext context) {
return Center(
child: Container(
constraints: widget.triWidth,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: RectButton(
buttonChild: Text(
widget.title1,
style: TextStyle(color: Colors.white),
),
onPress: () {
setState(() {
selectedOption = Option.one;
});
},
bgColor: selectedOption == Option.one
? kActiveButtonColor
: kInactiveButtonColor,
),
),
Expanded(
child: RectButton(
buttonChild: Text(
widget.title2,
style: TextStyle(color: Colors.white),
),
onPress: () {
setState(() {
selectedOption = Option.two;
});
},
bgColor: selectedOption == Option.two
? kActiveButtonColor
: kInactiveButtonColor,
),
),
Expanded(
child: RectButton(
buttonChild: Text(
widget.title3,
style: TextStyle(color: Colors.white),
),
onPress: () {
setState(() {
selectedOption = Option.three;
});
},
bgColor: selectedOption == Option.three
? kActiveButtonColor
: kInactiveButtonColor,
),
),
],
),
),
);
}
}
InputScreen
class InputScreen extends StatefulWidget {
static const String id = 'adjustments';
@override
_InputScreenState createState() =>
_InputScreenState();
}
class _InputScreenState
extends State<InputScreen> {
final TextEditingController weightController = TextEditingController();
final TextEditingController heightController = TextEditingController();
final TextEditingController creatController = TextEditingController();
final MyUnit heightUnit = MyUnit();
final MyUnit weightUnit = MyUnit(imperial: 'lbs', metric: 'kg');
final MyUnit creatUnit = MyUnit(imperial: 'mg/dL', metric: 'mg/dL');
final MyButton selected = MyButton();
@override
void dispose() {
super.dispose();
weightController.dispose();
heightController.dispose();
creatController.dispose();
heightUnit.dispose();
weightUnit.dispose();
selected.dispose();
}
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xff142651),
body: Column(
children: <Widget>[
AppBar(
leading: null,
actions: <Widget>[
IconButton(
icon: Icon(Icons.close),
onPressed: () {
Navigator.pop(context);
}),
],
title: Text('Dose Adjustment'),
backgroundColor: Colors.transparent,
elevation: 0.0,
),
ValueListenableBuilder<Option>(
valueListenable: selectedAbx,
builder: (context, option, _) => TriButton(
title1: 'Button 1',
title2: 'Button 2',
title3: 'Button 3',
),
),
InputRow(
myUnit: heightUnit,
inputParameter: 'height',
textField: heightController,
colour: kOrangePantone,
),
InputRow(
myUnit: weightUnit,
inputParameter: 'weight',
textField: weightController,
colour: kRoyalPurple,
),
InputRow(
myUnit: creatUnit,
inputParameter: 'SCr',
textField: creatController,
colour: kDogwoodRose,
),
RoundedButton(
title: 'Calculate',
onPressed: () {
print(selected.option);
String inputHeight = heightController.text;
String inputWeight = weightController.text;
String inputCreat = creatController.text;
double imperialHeight = double.parse(inputHeight) * 2.54;
double metricHeight = double.parse(inputHeight);
double imperialWeight = double.parse(inputWeight) / 2.2;
double metricWeight = double.parse(inputWeight);
double creat = double.parse(inputCreat);
CalculatorTest calc;
if (heightUnit.unitType == 'cm' && weightUnit.unitType == 'kg') {
calc = CalculatorTest(
height: metricHeight,
weight: metricWeight,
creatinine: creat);
} else if (heightUnit.unitType == 'inches' &&
weightUnit.unitType == 'lbs') {
calc = CalculatorTest(
height: imperialHeight,
weight: imperialWeight,
creatinine: creat);
} else if (heightUnit.unitType == 'cm' &&
weightUnit.unitType == 'lbs') {
calc = CalculatorTest(
height: metricHeight,
weight: imperialWeight,
creatinine: creat);
} else {
heightUnit.unitType == 'inches' && weightUnit.unitType == 'kg';
calc = CalculatorTest(
height: imperialHeight,
weight: metricWeight,
creatinine: creat);
}
;
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ResultsScreen(
bmiResult: calc.calculate(),
),
),
);
},
),
],
),
);
}
}
