Flutter: RadioListTile not updating when tapped-CodePudding

I'm trying to organize my code by creating a _radioGender widget containing all the code for a repeated RadioListTile widget. But when running i cant change the selection. What am i missing?

If not in a separate widget there is no problem changing the selection. Only when i try to put the code in a new widget.

Thanks in advance for the help

import 'package:flutter/material.dart';

enum Gender { FEMALE, MALE, OTHER}

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  @override
  State<StatefulWidget> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _usernameController = TextEditingController();
  var _selectedGender = Gender.FEMALE;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Center(child: Text("User Settings")),
        ),
        body: ListView(
          key: UniqueKey(),
          children: [
            
            _radioGender('Female', Gender.FEMALE, _selectedGender),
            _radioGender('Male', Gender.MALE, _selectedGender),
            _radioGender('Other', Gender.OTHER, _selectedGender),
          ],
        ),
      ),
    );
  }

  Widget _radioGender(title, Gender _Gender, Gender _Group) {
    return Builder(builder: (context) {
      return RadioListTile(
        key: UniqueKey(),
          title: Text(title),
          value: _Gender,
          groupValue: _Group,
          onChanged: (newValue){setState(() => _Group = newValue);});
    });
  }
}

CodePudding user response：

Change enum Values enum Gender { FEMALE, MALE, OTHER} to enum Gender { Female, Male, Other}

_radioGender('Female', Gender.FEMALE, _selectedGender),
_radioGender('Male', Gender.MALE, _selectedGender),
_radioGender('Other', Gender.OTHER, _selectedGender),

CodePudding user response：

You only need to change from:

onChanged: (newValue){setState(() => _Group = newValue);});

onChanged: (newValue) {
   if (newValue != null) {
      setState(() => _selectedGender = newValue);
   }
},

Because the current value to control the Radio is _selectedGender not _Group.

This is the complete code that already worked on dartpad:

import 'package:flutter/material.dart';

enum Gender { FEMALE, MALE, OTHER }

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  @override
  State<StatefulWidget> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _usernameController = TextEditingController();
  Gender _selectedGender = Gender.FEMALE;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Center(child: Text("User Settings")),
        ),
        body: ListView(
          key: UniqueKey(),
          children: [
            _radioGender('Female', Gender.FEMALE, _selectedGender),
            _radioGender('Male', Gender.MALE, _selectedGender),
            _radioGender('Other', Gender.OTHER, _selectedGender),
          ],
        ),
      ),
    );
  }

  Widget _radioGender(title, Gender _Gender, Gender _Group) {
    return Builder(
      builder: (context) {
        return RadioListTile(
          key: UniqueKey(),
          title: Text(title),
          value: _Gender,
          groupValue: _Group,
          onChanged: (newValue) {
            if (newValue != null) {
              setState(() => _selectedGender = newValue);
            }
          },
        );
      },
    );
  }
}