Flutter 单选按钮未显示已选中

Question

I have three radio buttons so that the user can select their gender. However, only the male radio button is getting highlighted. Even though my console prints other radio buttons when selected, they don't get highlighted on screen. I don't know what to do about it so any help will be really appreciated!

    import 'package:flutter/material.dart';
import 'package:vibing/User_Login.dart';
import 'package:vibing/register_user.dart';
import 'package:vibing/register_user.dart';

class UserDetails extends StatefulWidget {
  @override
  _UserDetailsState createState() => _UserDetailsState();
}

enum Gender{
  Male, Female, Others
}

class _UserDetailsState extends State<UserDetails> {


  @override
  Widget build(BuildContext context) {
    final formkey = GlobalKey<FormState>();

     String user_name;
     String user_age;
     int group_value = -1;
     Gender _gender = Gender.Male;


    final _userName = Container(
      padding: EdgeInsets.only(left: 10, right: 10),
      child: TextFormField(
        autofocus: false,
        keyboardType: TextInputType.text,
        validator: (value) {
          if(value.isEmpty)
          {
            return 'Field cannot be empty';
          }
          return null;
        },
        onSaved: (value)=> user_name = value,
        decoration: InputDecoration(
          hintText: 'Enter Name',
          border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10)
          ),
        ),
      ),
    );




    final _userAge = Container(
      padding: EdgeInsets.only(left: 10, right: 10),
      child: TextFormField(
        keyboardType: TextInputType.number,
        autofocus: false,
        validator: (value) {
          if(value.isEmpty)
          {
            return 'Field cannot be empty';
          }
          return null;
        },
        onSaved: (value)=> user_age = value,
        decoration: InputDecoration(
          hintText: 'Enter Age',
          border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10)
          ),
        ),
      ),
    );




    final _male = Radio(
      value: Gender.Male,
      activeColor: Colors.black,
      groupValue: _gender,
      onChanged: (Gender value){
        setState(() {
          print(value);
          _gender = value;
        });
      },
    );


    final _female = Radio(
      activeColor: Colors.black,
    value: Gender.Female,
    groupValue: _gender,
    onChanged: (Gender value){
      setState(() {
        print(value);
        _gender = value;
      });
    },
    );

    final _others = Radio(
      activeColor: Colors.black,
        value: Gender.Others,
        groupValue: _gender,
        onChanged: (Gender value){
          setState(() {
            print(value);
            _gender = value;
          });
        },
      );


    return Scaffold(
      backgroundColor: Colors.yellow,
      body: Container(
        key: formkey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Register",
            style: TextStyle(fontSize: 64.0, fontWeight: FontWeight.bold),),
            SizedBox(height: 50,),
            _userName,
            SizedBox(height: 20,),
            _userAge,
            SizedBox(height: 30,),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center ,
              children: <Widget>[
                Text("      Gender: ", style: TextStyle(fontSize: 20.0),),
                _male,
                Text("Male"),
                _female,
                Text("Female"),
                _others,
                Text("Others"),
              ],
            ),

            Row(
              crossAxisAlignment: CrossAxisAlignment.center ,
              children: <Widget>[
                FloatingActionButton.extended(
                    heroTag: "next_button",
                    backgroundColor: Colors.yellow,
                    foregroundColor: Colors.black,
                    onPressed: ()=> Navigator.push(context, MaterialPageRoute(builder: (context)=>UserReg())),
                    label: Text("Next", style: TextStyle(fontWeight: FontWeight.bold),)
                ),
                SizedBox(width: 230,),
                FloatingActionButton.extended(
                    heroTag: "prev_button",
                    backgroundColor: Colors.yellow,
                    foregroundColor: Colors.black,
                    onPressed: ()=> Navigator.push(context, MaterialPageRoute(builder: (context)=>UserLogin())),
                    label: Text("Prev", style: TextStyle(fontWeight: FontWeight.bold),)
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

It doesn't work because you declare state inside the build function. Move it out:

class _UserDetailsState extends State<UserDetails> {
    String user_name;
    String user_age;
    int group_value = -1;
    Gender _gender = Gender.Male;

By the way, you can generate widgets for each enum value:

children: <Widget>[
    for(var gender in Gender.values)
         Radio(
      value: gender,
      activeColor: Colors.black,
      groupValue: _gender,
      onChanged: (Gender value){
        setState(() {
          print(value);
          _gender = value;
        });
      },
    );
]

Make sure your minimum SDK version is 2.6.0 or above in the pubspec.yaml