Radio Buttons in flutter.
Hello guys,
In this session we will see how to add radio buttons here,
See as follows for the process:
Take a var as below before going.
String radio_value="Instant";
The below is the format for the butto which shows one...
Row(
children: [
Flexible(
flex: 1,
child: Container(
margin: EdgeInsets.all(0.5),
decoration: BoxDecoration(
border: Border.all(width: 0.5,color: (radio_value=="Instant") ? (Colors.green): (Colors.grey)),
borderRadius: BorderRadius.circular(10),
color:(radio_value=="Instant") ? (ColorConstant.lightgreenbg): (Colors.white),
),
child: Row(
children: [
Radio(
activeColor: Colors.green,fillColor: MaterialStatePropertyAll(Colors.green),
value: "Instant", groupValue: radio_value , onChanged: (index) {
setState(() {
radio_value="Instant";
});
}),
Expanded(
child:
RichText(
text: TextSpan(
text: 'Instant \n',
style: GoogleFonts.ubuntu(
textStyle: TextStyle(overflow: TextOverflow.ellipsis),
fontWeight: FontWeight.bold,fontSize: 12,
color:(radio_value=="Instant") ? (ColorConstant.blueAE): (Colors.grey)),
/*defining default style is optional */
children: <TextSpan>[
TextSpan(
text: '19 min',
style: GoogleFonts.ubuntu(
textStyle: TextStyle(overflow: TextOverflow.ellipsis),
fontWeight: FontWeight.bold,fontSize: 10,
color:(radio_value=="Instant") ? (ColorConstant.greenA700): (Colors.grey)),
),
]),
),
)
],
),
),
),],
Flexible(
flex: 1,//Instant, General, Self_Pickup
child: Container(
margin: EdgeInsets.all(0.5),
decoration: BoxDecoration(
border: Border.all(width: 0.5,color: (radio_value=="General") ? (Colors.green): (Colors.grey)),
borderRadius: BorderRadius.circular(10),
color: (radio_value=="General") ? (ColorConstant.lightgreenbg): (Colors.white),
),
child: Row(
children: [
Radio(activeColor: Colors.green,fillColor: MaterialStatePropertyAll(Colors.green),
value: "General", groupValue: radio_value,onChanged: (index) {
setState(() {
radio_value="General";
});
}),
Container( width:55,
child: RichText(
text: TextSpan(
text: 'General \n',
style: GoogleFonts.ubuntu(
textStyle: TextStyle(overflow: TextOverflow.ellipsis),
fontWeight: FontWeight.bold,fontSize: 12,
color:(radio_value=="General") ? (ColorConstant.blueAE): (Colors.grey)),
/*defining default style is optional */
children: <TextSpan>[
TextSpan(
text: 'Tomorrow',
style: GoogleFonts.ubuntu(
textStyle: TextStyle(overflow: TextOverflow.ellipsis),
color: (radio_value=="General") ? (ColorConstant.greenA700): (Colors.grey),
fontWeight: FontWeight.bold,
fontSize: 10)),
]),
),
),
],
),
),
),
Flexible(
flex: 1,
child: Container(
margin: EdgeInsets.all(0.5),
decoration: BoxDecoration(
border: Border.all(width: 0.5,color: (radio_value=="Self_Pickup") ? (Colors.green): (Colors.grey)),
borderRadius: BorderRadius.circular(10),
color: (radio_value=="Self_Pickup") ? (ColorConstant.lightgreenbg): (Colors.white),
),
child: Row(
children: [
Radio(activeColor: Colors.green,fillColor: MaterialStatePropertyAll(Colors.green),
value: "Self_Pickup", groupValue: radio_value, onChanged: (index) {
setState(() {
radio_value="Self_Pickup";
});
}),
Container(width:55,
child:
RichText(
text: TextSpan(
text: 'Self pickup\n',
style: GoogleFonts.ubuntu(
textStyle: TextStyle(overflow: TextOverflow.ellipsis),
color: (radio_value=="Self_Pickup") ? (ColorConstant.blueAE): (Colors.grey),
fontWeight: FontWeight.bold,
fontSize: 10),
/*defining default style is optional */
children: <TextSpan>[
TextSpan(
text: 'Visit Store Free',
style: GoogleFonts.ubuntu(
textStyle: TextStyle(overflow: TextOverflow.ellipsis),
color: (radio_value=="Self_Pickup") ? (ColorConstant.greenA700): (Colors.grey),
fontWeight: FontWeight.bold,
fontSize: 10)),
]),
),
)
],
),
),
),
),
Thank you...
Tagged: