how to update selected radio button in flutter using getx statemanagment

Question

I am using Flutter with GetX plugin and I have two radio buttons inside statelessWidget but the radio button doesn't changed to selected when user click on it my question is how I can update screen to show selected radio the groupValue attribute changed using GetX pluing. here is my code

Radio(
  value: reportController.period[0],
  groupValue: reportController.selectedPeriod,
  onChanged: (val) {
                     reportController.selectedPeriod = val;
                              
                    },
     )

and this is my controller

import 'package:get/get.dart';

import 'package:ycom/models/report.dart';

class ReportController extends GetxController {
  var report = Report().obs;
  List<String> period = ["evening", "morning"];

  void set selectedPeriod(String selectedPeriod) {
    report.update((report) {
      report.selectedPeriod = selectedPeriod;
    });
  }

  String get selectedPeriod => report.value.selectedPeriod;
}

score 2 · Accepted Answer · answered Jan 26 '21 at 05:21

I solved it by wrapping Radio widget inside Obx() function as following

Obx(() => Radio(
                 value: reportController.period[0],
                 groupValue: reportController.selectedPeriod,
                 onChanged: (val) {
                                   reportController.selectedPeriod = val;


                                },
               ))

score 0 · Answer 2 · edited Jun 06 '21 at 09:23

Here is what I did to achieve this:

My Controller:

      class ProfilePageController extends GetxController {
      String selectedGender;
      final List<String> gender = ["Male", "Female"];

      String select;
      void onClickRadioButton(value) {
      print(value);
      select = value;
      update();
      }
     }

My View Code:

          Row addRadioButton(int btnIndex, String title) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        GetBuilder<ProfilePageController>(
          builder: (_) => Radio(
              activeColor: Colors.blue,
              value: profilePageController.gender[btnIndex],
              groupValue: profilePageController.select,
              onChanged: (value) =>
                  profilePageController.onClickRadioButton(value)),
        ),
        Text(title)
      ],
    );
  }

To use, call addRadioButton:

          Row(
            children: [
              addRadioButton(0, "Male"),
              addRadioButton(1, "Female"),
            ],
          ),

score -5 · Answer 3 · answered Jan 25 '21 at 08:31

-5

Try {setState(() {reportController.selectedPeriod = val;});} instead {reportController.selectedPeriod = val;},

answered Jan 25 '21 at 08:31

alex Tykhonov

1
2

setState doesn't work in statelessWidget I am using getX plugin for statemanagment – Mokhtar Ghaleb Jan 25 '21 at 08:35
its hard by this documentation https://api.flutter.dev/flutter/material/Radio-class.html you need use setState to update view of Radio. You can change way to set or get data because you cant update view in Statelessmanager read this https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html – alex Tykhonov Jan 25 '21 at 08:48
GetX plugin can do this because it manage the state and you can use it instead of stateful widget and update widgets I just don't know what is the code or method can deal with string values – Mokhtar Ghaleb Jan 25 '21 at 08:52
use sharedpreference https://flutter.dev/docs/cookbook/persistence/key-value – alex Tykhonov Jan 25 '21 at 09:04
the solution should use getx not a random bunch of technologies – Loki Apr 29 '22 at 10:04

how to update selected radio button in flutter using getx statemanagment

3 Answers3