Flutter - Radio List Tile not selecting the radio button inside bottom sheet-CodePudding

I am using flutter RadioListTile for radio button selection and having issue while trying to checked. i.e, not selecting the button but value is receiving after checked.

can any one help on this?

Below is the sample code,

var _selectedLanguageRadioIndex = 0;
 List<String> languageTitle  = ["English","हिंदी","ಕನ್ನಡ"];
 List<String> languageType  = ["en","hi","ka"];
    
    _languageOptions(){
      showModalBottomSheet(
          isScrollControlled: true,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(15.0)),
          ),
          context: context,
          builder: (context) {
            return StatefulBuilder(
              builder: (BuildContext context, StateSetter myState) {
                return Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      padding: EdgeInsets.fromLTRB(15, 10, 0, 10),
                     
                    Flexible(
                        fit: FlexFit.loose,
                        child: ListView.separated(
                          shrinkWrap: true,
                          itemBuilder: (context, index) {
                            return Container(
                                child:  RadioListTile(
                                value: index,
                                groupValue: _selectedLanguageRadioIndex,
                                selected: _selectedLanguageRadioIndex == index,
                                onChanged: (val) =>  {
                                  setState(() => _selectedLanguageRadioIndex = val as int),
                                },
                              title: ListTile(
                                title: Text(languageTitle[index]
                              ),
                              controlAffinity: ListTileControlAffinity.trailing,
                            ),
                            );
    
                          },
                      itemCount: languageTitle.length,
                      separatorBuilder: (context, index) => Divider(
                        thickness: 1,
                      ),
                      )
                    )
                  ],
                );
              },
            );
          }
      );
    }

CodePudding user response：

Since you are using StatefulBuilder Widget, it creates its own State, in your code its StateSetter myState. It means the BottomSheet Widget, state is controlled and changed by myState keyword. In your BottomSheet Widget you are calling setState which tells dart to update the UI with respect to the Widgets linked by setState and hence it does not update the UI.

In your code just replace the following line : -

setState(() =>
 _selectedLanguageRadioIndex = val as int), //<-- Replace this line 

myState(() =>
_selectedLanguageRadioIndex = val as int), //<-- Replace it with this line

Complete Code : -

var _selectedLanguageRadioIndex = 0; 
List<String> languageTitle = ["English", "हिंदी", "ಕನ್ನಡ"];
List<String> languageType = ["en", "hi", "ka"];

_languageOptions() {
showModalBottomSheet(
isScrollControlled: true,
shape: const RoundedRectangleBorder(
  borderRadius: BorderRadius.vertical(top: Radius.circular(15.0)),
),
context: context,
builder: (context) {
  return StatefulBuilder(
    builder: (BuildContext context, StateSetter myState) {
      return Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
              padding: const EdgeInsets.fromLTRB(15, 10, 0, 10),
              child: ListView.separated(
                shrinkWrap: true,
                itemBuilder: (context, index) {
                  return RadioListTile(
                    value: index,
                    groupValue: _selectedLanguageRadioIndex,
                    selected: _selectedLanguageRadioIndex == index,
                    onChanged: (val) => {
                  myState(() =>
                      _selectedLanguageRadioIndex = val as int),
                    },
                    title: ListTile(
                  title: Text(languageTitle[index]),
                    ),
                  );
                },
                itemCount: languageTitle.length,
                separatorBuilder: (context, index) => const Divider(
                  thickness: 1,
                ),
              ))
        ],
      );
    },
  );
});
}