radio buttons not working flutter ,The function 'setState' isn't defined

Admin 1
Viewed 206

I want to display 3 radio button in my App UI. but it doesnt work. heres the code I tried. error image. also you can find my full code from here. code and UI I think im doing something wrong. can anyone show how to solved this errors.

errors>> Undefined name 'gender'. errors>> The function 'setState' isn't defined.

Column(
        children: [
                      Row(
                        children: [
                          ListTile(
                            title: Text("Male"),
                            leading: Radio(
                                value: "male",
                                groupValue: gender,
                                onChanged: (value){
                                  setState(() {
                                    gender = value.toString();
                                  });
                                }),
                          ),
                          ListTile(
                            title: Text("Male"),
                            leading: Radio(
                                value: "female",
                                groupValue: gender,
                                onChanged: (value){
                                  setState(() {
                                    gender = value.toString();
                                  });
                                }),
                          ),

                          ListTile(
                            title: Text("Other"),
                            leading: Radio(
                                value: "other",
                                groupValue: gender,
                                onChanged: (value){
                                  setState(() {
                                    gender = value.toString();
                                  });
                                }),
                          )

                        ],

                      )
                    ],
                  ),
flutter
2 Answers

Try below code hope its help to you. Use StatefulWidget for setState

Refer Radio-class here

import 'package:flutter/material.dart';

void main() => runApp(
      const MyStatefulWidget(),
    );

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int val = -1;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Radio Button"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            ListTile(
              title: Text("Male"),
              leading: Radio<int>(
                value: 1,
                groupValue: val,
                onChanged: (value) {
                  setState(() {
                    val = value as int;
                    print(val);
                  });
                },
              ),
            ),
            ListTile(
              title: Text("Female"),
              leading: Radio<int>(
                value: 2,
                groupValue: val,
                onChanged: (value) {
                  setState(() {
                    val = value as int;
                    print(val);
                  });
                },
              ),
            ),
            ListTile(
              title: Text("Other"),
              leading: Radio<int>(
                value: 3,
                groupValue: val,
                onChanged: (value) {
                  setState(() {
                    val = value as int;
                    print(val);
                  });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Result Screen without select-> image

Result screen with select-> enter image description here

user_139972100

you can either use this plugin:- https://pub.dev/packages/group_radio_button

or set a int as a group value: int groupValue = -1;

set the group value of RadioListButton in ascending order.

ListTile(
                        title: Text("Male"),
                        leading: Radio(
                            value: "male",
                            groupValue: 0,
                            onChanged: (value){
                              setState(() {
                                groupValue =value;
                              });
                            }),
                      ),
                      ListTile(
                        title: Text("Male"),
                        leading: Radio(
                            value: "female",
                            groupValue: 1,
                            onChanged: (value){
                              setState(() {
                                 groupValue =value;
                              });
                            }),
                      ),

                      ListTile(
                        title: Text("Other"),
                        leading: Radio(
                            value: "other",
                            groupValue: 2,
                            onChanged: (value){
                              setState(() {
                                   groupValue =value;
                              });
                            }),
                      )

                    ],

and use RadioList button instead of Radio.

user_116031220
Related