onChanged value not picking up by setState Flutter

Question

I am creating a sign up page with multiple account types option. The app is simple so its without any state I'm only going with simple old setState but I am passing my changed value to setState in my stateful widget but its the first time happening to me flutter isn't picking up the value in setState. I've scratched my head for too many hours but still the same issue. My flutter version is 2.5. The GFRadio Button setState is the one creating issue. Also if I use simple dart radio button or RadioListTile they also are creating the same issue

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:getwidget/colors/gf_color.dart';
import 'package:getwidget/components/radio/gf_radio.dart';
import 'package:getwidget/size/gf_size.dart';

class SignUpPage extends StatefulWidget {
  const SignUpPage({Key? key}) : super(key: key);

  @override
  State createState() => _SignUpPageState();
}

class _SignUpPageState extends State {
  bool _obscureText = true;
  int groupValue = 0;
  void _togglePasswordStatus() {
    setState(() {
      _obscureText = !_obscureText;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        child: SingleChildScrollView(
          child: Column(
            children: [
              Stack(
                children: [
                  Image.asset(
                    "assets/loginpage.png",
                    fit: BoxFit.cover,
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      top: 250,
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Padding(
                          padding: EdgeInsets.only(left: 40),
                          child: Text("New
Account",
                              style: TextStyle(
                                  fontSize: 34, fontWeight: FontWeight.bold)),
                        ),
                        Stack(
                          children: [
                            Padding(
                                padding: EdgeInsets.only(
                                  right: 40,
                                ),
                                child: Image.asset("assets/camera.png")),
                            Padding(
                                padding: EdgeInsets.only(right: 40, top: 70),
                                child: Text("Add Image")),
                          ],
                        )
                      ],
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      top: 350,
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Padding(
                          padding: EdgeInsets.only(left: 40),
                          child: GFRadio(
                            size: GFSize.SMALL,
                            value: 2,
                            groupValue: groupValue,
                            onChanged: (value) {
                              setState(() {
                                groupValue = value;
                              });
                            },
                            inactiveIcon: null,
                            activeBorderColor: GFColors.SUCCESS,
                            radioColor: GFColors.SUCCESS,
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.only(
                            right: 40,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      top: 400,
                    ),
                    child: Padding(
                      padding: EdgeInsets.only(left: 20, right: 20),
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: "Username",
                          prefixIcon: Icon(
                            Icons.person,
                            color: Color(0xFFCF776B),
                          ),
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFCF776B)),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFCF776B)),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      top: 470,
                    ),
                    child: Padding(
                      padding: EdgeInsets.only(left: 20, right: 20),
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: "Mobile Number",
                          prefixIcon: Icon(
                            Icons.phone,
                            color: Color(0xFFCF776B),
                          ),
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFCF776B)),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFCF776B)),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      top: 540,
                    ),
                    child: Padding(
                      padding: EdgeInsets.only(left: 20, right: 20),
                      child: TextField(
                        obscureText: _obscureText,
                        decoration: InputDecoration(
                          hintText: "Password",
                          prefixIcon: Icon(
                            Icons.lock,
                            color: Color(0xFFCF776B),
                          ),
                          suffixIcon: IconButton(
                              icon: Icon(
                                _obscureText
                                    ? Icons.visibility
                                    : Icons.visibility_off,
                              ),
                              onPressed: _togglePasswordStatus,
                              color: Color(0xFFCF776B)),
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFCF776B)),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFFCF776B)),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      top: 620,
                    ),
                    child: Center(
                      child: GestureDetector(
                        onTap: () {
                          // Navigator.push(
                          //     context,
                          //     MaterialPageRoute(
                          //         builder: (context) => SignUpPage()));
                        },
                        child: Container(
                          width: 180,
                          height: 60,
                          decoration: BoxDecoration(
                              color: Color(0xFFCF776B),
                              border: Border.all(
                                color: Color(0xFFCF776B),
                              ),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(40))),
                          child: Center(
                            child: Text("Sign Up",
                                style: TextStyle(
                                    fontSize: 20,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white)),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      top: 700,
                    ),
                    child: Center(
                      child: Text(
                        "Change Password",
                        style: TextStyle(
                            decoration: TextDecoration.underline,
                            color: Color(0xFFCF776B),
                            fontWeight: FontWeight.bold,
                            fontSize: 20),
                      ),
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

user_15868701 · Answer

I think you have misunderstood the GFRadio widget here:

GFRadio(
                            size: GFSize.SMALL,
                            value: 2,
                            groupValue: groupValue,
                            onChanged: (value) {
                              setState(() {
                                groupValue = value;
                              });
                            },
                            inactiveIcon: null,
                            activeBorderColor: GFColors.SUCCESS,
                            radioColor: GFColors.SUCCESS,
                          ),

The groupValue is the created to determine which radio buttons are there in this group, every radio buttons in this group wil have the same groupValue. And the value is made to differ a radio button from the others in the same group. Let's say you have 3 radio buttons for users to choose their gender(male, female, gay ;) ), the code may look like this:

int _value = 0;
Row(
                  children: [
                    GFRadio(
                      value: 0,
                      groupValue: 1,
                      onChanged: (value) {
                        setState(() {
                          _value = value;
                        });
                      },
                    ),
                    GFRadio(
                      value: 1,
                      groupValue: 1,
                      onChanged: (value) {
                        setState(() {
                          _value = value;
                        });
                      },
                    ),
                    GFRadio(
                      value: 2,
                      groupValue: 1,
                      onChanged: (value) {
                        setState(() {
                          _value = value;
                        });
                      },
                    ),
                  ],
                ),

So as you can see, the thing that need to change in the setState method is the _value, not the groupValue. Your code should be changed to:

//int groupValue = 0;
//replace the above line with the below line:
int _value = 0;

And in setState method in GFRadio:

    setState(() {
 //groupValue = value; replace this line with below line
_value = value;
                                  });

I am terrible at explaining so if you don't understand, just comment !

onChanged value not picking up by setState Flutter

1 Answers