How to change container when radio button clicked - flutter

Question

I have this layout :
I want when click on Select Time to change this blue container to another container
this is the code of radio buttons :
class TimeRadioButtonsClass extends StatefulWidget {
#override
_TimeRadioButtonsClassState createState() => _TimeRadioButtonsClassState();
List<String> labels;
String picked;
Function function;
TimeRadioButtonsClass({this.picked , this.labels , this.function});
}
class _TimeRadioButtonsClassState extends State<TimeRadioButtonsClass> {
#override
Widget build(BuildContext context) {
return RadioButtonGroup(
orientation: GroupedButtonsOrientation.VERTICAL,
margin: const EdgeInsets.only(left: 12.0),
onSelected: (String selected) => setState((){
widget.picked = selected;
}),
labels: widget.labels,
picked: widget.picked,
activeColor: Color(0xffFFD243),
onChange: (String label, int index) {
print("label: $label index: $index");
widget.function(label,index);
},
);
}
}
and here I call this class in CheckoutClass :
TimeRadioButtonsClass(picked: picked , labels: when),
NOTE : I used setState in CheckoutClass by access it as parameter in TimeRadioButtonsClass it changes container for just one time.
I don't know the reason why setState doesn't work !
Edit : I pass function as parameter to TimeRadioButtonsClass (I edit TimeRadioButtonsClass code above) and this is the code for calling:
TimeRadioButtonsClass(picked: picked , labels: when , function: (String label , int index){
setState(() {
if(index == 1){
indexRadio = 1;
print("indexRadio 1 : "+indexRadio.toString());
}
else{
indexRadio = 0;
print("indexRadio 2 : "+indexRadio.toString());
}
});
},),
indexRadio == 1 ? Container(
height: 50.0,
color: Colors.blue,
):
Container(
height: 50.0,
color: Colors.red,
),

Answer 1

If your container is outside the class, then you can make a callback on the selected button of the radiobutton.
widget.onTap(selected);
Add this line of code for the onTap method, to make a callback to the class from where it is called.
class TimeRadioButtonsClass extends StatefulWidget {
#override
_TimeRadioButtonsClassState createState() => _TimeRadioButtonsClassState();
List<String> labels;
String picked;
Function onTap;
TimeRadioButtonsClass({this.picked, this.labels, this.onTap});
}
class _TimeRadioButtonsClassState extends State<TimeRadioButtonsClass> {
#override
Widget build(BuildContext context) {
return RadioButtonGroup(
// orientation: GroupedButtonsOrientation.VERTICAL,
margin: const EdgeInsets.only(left: 12.0),
onSelected: (String selected) {
setState(() {
widget.picked = selected;
});
widget.onTap(selected); //This will make a callback to your class and send the selected value in the onTap method of that class.
},
labels: widget.labels,
picked: widget.picked,
activeColor: Color(0xffFFD243),
onChange: (String label, int index) =>
print("label: $label index: $index"),
);
}
}
Now to get the onTap value from the class, Call your widget as below
NOTE: Here value of 1 and 2 is your radio button picked string 1 is the ASAP and 2 is the Select timer
TimeRadioButtonsClass(
picked: "picked",
onTap: (value) {
if (value == 1) {
//do change for one
containerColor = Colors.blue;
setState(() {
});
} else if (value == 2) {
//do change for two
containerColor = Colors.red;
setState(() {
});
}
},
)
Define a Color for container as Default so to change the color on the onTap method of the class
Color containerColor = Colors.red;
Now Show The container As Follows
Container(
height: 100,
width: 100,
color: containerColor,
);
EDITED 2:- (This code changes the color for container and Radio button also changes now everytime)
String picked = "ASAP"; // Add this line at the top
Replace the Code of Calling TimeRadioButtonsClass Class with this
TimeRadioButtonsClass(
picked: picked,
labels: [
"ASAP",
"Select Timer",
],
onTap: (
int index,
) {
indexRadio = index;
if (index == 0) {
picked = "ASAP";
} else {
picked = "Select Timer";
}
setState(() {});
},
),
indexRadio == 0
? Container(
height: 50.0,
color: Colors.blue,
)
: Container(
height: 50.0,
color: Colors.red,
),
And Also Replace the TimeRadioButtonClass Itself with this code
import 'package:flutter/material.dart';
import 'package:grouped_buttons/grouped_buttons.dart';
class TimeRadioButtonsClass extends StatefulWidget {
#override
_TimeRadioButtonsClassState createState() => _TimeRadioButtonsClassState();
List<String> labels;
String picked;
Function(int) onTap;
TimeRadioButtonsClass({this.picked, this.labels, this.onTap});
}
class _TimeRadioButtonsClassState extends State<TimeRadioButtonsClass> {
#override
Widget build(BuildContext context) {
return RadioButtonGroup(
orientation: GroupedButtonsOrientation.VERTICAL,
margin: const EdgeInsets.only(left: 12.0),
labels: widget.labels,
picked: widget.picked,
activeColor: Colors.red,
onChange: (String label, int index) {
print(index);
widget.onTap(index);
});
}
}
What I have done is that Removed the onSelected (maybe it may come use later), and Made the onTap function to pass the int value

Answer 2

setState() only works within a particular State class.
Whenever you change the internal state of a State object, make the change in a function that you pass to setState
Calling setState notifies the framework that the internal state of this object has changed in a way that might impact the user interface in this subtree, which causes the framework to schedule a build for this State object.
setState() docs
Here, setState() is working, but your container isn't in its scope.
When the date is selected, _TimeRadioButtonsClassState.build will be called which doesn't affect your container since your container isn't in that widget (or class, if you prefer)
If possible, try shifting the container inside the widget where you'll be calling setState or try using a different state management approach
A more complex approach would be using GlobalKey and passing it as a parameter to your StatefulWidget and calling setState or using context.findAncestorStateOfType

Answer 3

Try this :
class _TimeRadioButtonsClassState extends State<TimeRadioButtonsClass> {
String _picked;
initState() {
_picked = widget.picked;
super.initState();
}
#override
Widget build(BuildContext context) {
return RadioButtonGroup(
orientation: GroupedButtonsOrientation.VERTICAL,
margin: const EdgeInsets.only(left: 12.0),
onSelected: (String selected) => setState((){
_picked = selected;
}),
labels: widget.labels,
picked: _picked,
activeColor: Color(0xffFFD243),
onChange: (String label, int index) => print("label: $label index: $index"),
);
}
}