How to fetch values from a form in flutter? - flutter

Question

As per the image I have to fetch all the values from the required field i.e. from the TextFormField, CustomRadioButton & as well as from the patient age as per my requirement. On click of submit button I have to fetch those values so that I can pass them through the provider.
As I am very new to flutter, I can fetch the value from the TextFormField but couldnot able to fetch from rest of the two.
here is my UI below.
below is the code for CustomRadioButton
Container(
width: 200,
child: CustomRadioButton(
customShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
elevation: 0,
absoluteZeroSpacing: false,
unSelectedColor: Theme.of(context).canvasColor,
buttonLables: [
'Male',
'Female',
],
buttonValues: [
"MALE",
"FEMALE",
],
buttonTextStyle: ButtonTextStyle(
textStyle: TextStyle(fontSize: 10)),
radioButtonValue: (value) {
print(value);
},
width: 80,
height: 60,
enableShape: true,
selectedBorderColor: Colors.green,
unSelectedBorderColor: Color(0xFFD0D7EB),
selectedColor: Colors.green,
),
),
for the age picker(/do not know I am correct or not because I had just hardcoded the text 12, but want + and - should work./)
Container(
width: 100.0,
height: 55.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
border: Border.all(
color: Color(0xFFD0D7EB),
)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
InkWell(
onTap: () {},
child: Container(
height: 25.0,
width: 25.0,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(7.0),
border: Border.all(
color: Color(0xFFD0D7EB),
)
),
child: Center(
child: Icon(
Icons.remove,
color: Colors.black,
size: 20.0,
),
),
),
),
Text(
'12',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 20.0,
color: Colors.black),
),
InkWell(
onTap: () {},
child: Container(
height: 25.0,
width: 25.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.0),
border: Border.all(
color: Color(0xFFD0D7EB),
)
),
child: Center(
child: Icon(
Icons.add,
color: Colors.black,
size: 20.0,
),
),
),
)
],
),
)
],
),
SizedBox(height: 80),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 40,
child: RaisedButton(
color: Color(0xFF888DA1),
child: Text('Submit', style: TextStyle(fontFamily: 'Poppins-Regular',
fontSize: 14, color: Colors.white)),
onPressed: (){
submit();
}
),
),
],
This one is the function where I will fetch those values
submit() async{
print(nameController.text);
}
Please help me how to do this!

Answer 1

So here what i do first set defaultSelected: "MALE", and then store value in one variable and when you change the value then you
get this value from radioButtonValue: this method then simply add this value to my local variable. After that for age i only added simple
increment and decrement logic and set this value to text
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
accentColor: Colors.blue,
),
home: SelectionScreen(),
);
}
}
class SelectionScreen extends StatefulWidget{
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _selectionScreen();
}
}
class _selectionScreen extends State<SelectionScreen>{
var gender = "MALE";
int age = 12;
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
children: [
Container(
width: 200,
child: CustomRadioButton(
customShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
elevation: 0,
absoluteZeroSpacing: false,
unSelectedColor: Theme.of(context).canvasColor,
buttonLables: [
'Male',
'Female',
],
buttonValues: [
"MALE",
"FEMALE",
],
buttonTextStyle: ButtonTextStyle(
textStyle: TextStyle(fontSize: 10)),
radioButtonValue: (value) {
setState(() {
gender = value.toString();
print("=--->>${gender}");
});
},
width: 80,
height: 60,
enableShape: true,
selectedBorderColor: Colors.green,
unSelectedBorderColor: Color(0xFFD0D7EB),
selectedColor: Colors.green,
defaultSelected: "MALE",
),
),
Container(
width: 100.0,
height: 55.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
border: Border.all(
color: Color(0xFFD0D7EB),
)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
InkWell(
onTap: () {
setState(() {
age--;
});
},
child: Container(
height: 25.0,
width: 25.0,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(7.0),
border: Border.all(
color: Color(0xFFD0D7EB),
)
),
child: Center(
child: Icon(
Icons.remove,
color: Colors.black,
size: 20.0,
),
),
),
),
Text(
age.toString(),
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 20.0,
color: Colors.black),
),
InkWell(
onTap: () {
setState(() {
age++;
});
},
child: Container(
height: 25.0,
width: 25.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.0),
border: Border.all(
color: Color(0xFFD0D7EB),
)
),
child: Center(
child: Icon(
Icons.add,
color: Colors.black,
size: 20.0,
),
),
),
)
],
),
),
SizedBox(height: 80),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 40,
child: RaisedButton(
color: Color(0xFF888DA1),
child: Text('Submit', style: TextStyle(fontFamily: 'Poppins-Regular',
fontSize: 14, color: Colors.white)),
onPressed: (){
print("============>> Radio Button Value: $gender");
print("============>> Age: $age");
}
),
),
],),
],
),),
);
}
}

Answer 2

The most direct way is to build a model class that will have the default values for each form element. Then, when building the form, construct an instance of the form data class, and use the members to establish the value: for each item. Wire up each of the onChanged: callbacks to validate the new value, and store it back into the form data instance. On submit, send the data along its merry way.