Question 76046 in Flutter Question posted in
The official Flutter documentation can be found here.

Why do my Radio buttons state not updating? – Flutter

I’ve tried :

  • using two Obx, one for each RadioListTile
  • use TextEditingController() as the variable and get the value from gender.text

But the RadioButtons still selecting the initial value/

Minimal code reproduction:

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(GetMaterialApp(home: Home()));

class Controller extends GetxController {
  var gender = "F".obs;

  void onChangedGender(String? value) {
    gender = (value ?? "M").obs;
    print(gender.value);
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(context) {
    final Controller c = Get.put(Controller());

    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 400,
          child: Obx(
            () => Row(
              children: [
                Expanded(
                  child: RadioListTile(
                    value: "M",
                    groupValue: c.gender.value,
                    title: const Text("Male"),
                    onChanged: c.onChangedGender,
                  ),
                ),
                Expanded(
                  child: RadioListTile(
                    value: "F",
                    groupValue: c.gender.value,
                    title: const Text("Female"),
                    onChanged: c.onChangedGender,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Try online: https://zapp.run/edit/flutter-zla606cyla70?entry=lib/main.dart&file=lib/main.dart

Tags:

3

Answers


  1. 0 
    import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(GetMaterialApp(home: Home()));

class Controller extends GetxController {
  RxInt gender = 1.obs;

  void onChangedGender(Object? v) {
    gender.value = int.parse(v.toString());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(context) {
    final Controller c = Get.put(Controller());

    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 400,
          child: Obx(
            () => Row(
              children: [
                Expanded(
                  child: RadioListTile(
                    value: 1,
                    groupValue: c.gender.value,
                    title: const Text("Male"),
                    onChanged: (v){
                      c.onChangedGender(v);
                    },
                  ),
                ),
                Expanded(
                  child: RadioListTile(
                    value: 2,
                    groupValue: c.gender.value,
                    title: const Text("Female"),
                    onChanged: (v){
                      c.onChangedGender(v);
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0 
    void onChangedGender(String? value) {
    gender.value = (value ?? "M");
  }

    replace your function with the above

    Login or Signup to reply.
  3. 0
    1. When you want the state of widget to change you should be using stateful widget and not stateless widget.
    2. To change the state of the widget in stateful widget you should use function setState.

    Your modified working code:

    import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(GetMaterialApp(home: Home()));

class Controller extends GetxController {
  var gender = "F".obs;

  void onChangedGender(String? value) {
    gender = (value ?? "M").obs;
    print(gender.value);
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(context) {
    final Controller c = Get.put(Controller());
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 400,
          child: Obx(
            () => Row(
              children: [
                Expanded(
                  child: RadioListTile(
                    value: "M",
                    groupValue: c.gender.value,
                    title: const Text("Male"),
                    onChanged: (val) {
                      setState(() { c.onChangedGender(val); }); 
                      },
                  ),
                ),
                Expanded(
                  child: RadioListTile(
                    value: "F",
                    groupValue: c.gender.value,
                    title: const Text("Female"),
                    onChanged: (val) {
                      setState(() { c.onChangedGender(val); }); 
                      },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}


class Home extends StatelessWidget  {
    @override
  Widget build(context) {
    return MyWidget();
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search