Home > Enterprise >  How to get the chosen data from a RadioButton in Flutter
How to get the chosen data from a RadioButton in Flutter

Time:12-06

On a page I have RadioButton to choose the color of a task. I've done this by making a class that extends StatefulWidget. The variable where the color is stored is colorRadioButton. I call this class on the page where I need it, and that's where I want to get the result to add it, but I don't know how.

The RadioButton class:

class RadioButtonWidget extends StatefulWidget {
  const RadioButtonWidget({Key? key}) : super(key: key);
 
  @override
  State<RadioButtonWidget> createState() => _RadioButtonWidgetState();
}
 
class _RadioButtonWidgetState extends State<RadioButtonWidget> {
 String colorRadioButton = "rosa";

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          const SizedBox(height: 30,),
          const Text('Elija el color de la tarea'),
          const SizedBox(height: 10,),
          ListTile(
            title: Text("Rosa"),
            tileColor: Color(0xFFFF66C4),
            leading: Radio(
              activeColor: Color(0xFFFF66C4),
              focusColor: Color(0xFFFF66C4),
              value: "rosa",
              groupValue: colorRadioButton, 
              onChanged: (value) {
                setState(() {
                  colorRadioButton = value.toString();
                });
              },
            )
          ),
          
          //More ListTile

I call it that:

            const RadioButtonWidget(),
            const SizedBox(height: 16.0),
            Align(
              alignment: Alignment.bottomLeft,
              child: TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: const Text('Cancelar'),
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: TextButton(
                onPressed: () async {
                  print("Entro en CustomDialogTareas");
                  List<String>? lista;
                  //creamos la tarjeta con los datos
                 Tarjeta tarjeta=Tarjeta("", nombreController.text, "", color, fechaController.text);

And I need to add it in the last line where I put color.

I have tried doing a getter of colorRadioButton. Also calling the _RadioButtonWidgetState.colorRadioButton method, although it didn't work because it's another instance. I don't know what else to try, everything gives me an error.

CodePudding user response:

You need to define function and variable in your main class like this:

var radioButtonResult = '';

void radioOnChange(String value){
   setState(() {
      radioButtonResult = value;
   });
}

then pass this function to your RadioButtonWidget like this:

RadioButtonWidget(radioOnChange: radioOnChange),

the change your RadioButtonWidget class to this to accept the function you pass:

class RadioButtonWidget extends StatefulWidget {
  final Function(String) radioOnChange;//< --- add this
  const RadioButtonWidget({Key? key, required this.radioOnChange}) : super(key: key);
 
  @override
  State<RadioButtonWidget> createState() => _RadioButtonWidgetState();
}
 
class _RadioButtonWidgetState extends State<RadioButtonWidget> {
 String colorRadioButton = "rosa";

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          const SizedBox(height: 30,),
          const Text('Elija el color de la tarea'),
          const SizedBox(height: 10,),
          ListTile(
            title: Text("Rosa"),
            tileColor: Color(0xFFFF66C4),
            leading: Radio(
              activeColor: Color(0xFFFF66C4),
              focusColor: Color(0xFFFF66C4),
              value: "rosa",
              groupValue: colorRadioButton, 
              onChanged: widget.radioOnChange,//< --- change this
            )
          ),

CodePudding user response:

You can create a callback method on RadioButtonWidget to get data on parent class.

class RadioButtonWidget extends StatefulWidget {
  final Function(String?) onRadioButtonChanged ;
  const RadioButtonWidget({Key? key, required this.onRadioButtonChanged}) : super(key: key);

  @override
  State<RadioButtonWidget> createState() => _RadioButtonWidgetState();
}

And call it on onChanged

groupValue: colorRadioButton, 
onChanged: (value) {
  setState(() {
    colorRadioButton = value.toString();
  });
  widget.onRadioButtonChanged(value);
  
},

Now you can get value

 RadioButtonWidget( // dont use const
  onRadioButtonChanged: (value) {
    print(value);
  },
),
  • Related