Home > Software engineering >  How to show active mark on RadioListTile?
How to show active mark on RadioListTile?

Time:12-04

How to show active mark on RadioListTile? I used selected and activeColor but it does not work.

RadioListTile(
  selected: true,
  activeColor: Theme.of(context).primaryColor, //
  title: Text(AppLocalizations.key(context, 'setDark')),
  value: ThemeMode.dark,
  groupValue: _themeMode,
  onChanged: (value) {},
),

enter image description here

CodePudding user response:

Documentation

"groupValue → T?

The currently selected value for this group of radio buttons.

This radio button is considered selected if its value matches the groupValue. "

The one selected is the one whose group value matches the value.

Therefore your radio buttons should have as groupValue Theme.Dark or Theme.Light and update it on onChanged.

CodePudding user response:

You need to create two RadioListTile for this and will contain the same groupValue. Based on groupValue it will decide active RadioListTile.

When value match with groupValue it will show active mark status.

class _HomesState extends State<Homes> {
  ThemeMode _themeMode = ThemeMode.dark;
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: LayoutBuilder(
      builder: (context, constraints) {
        return Center(
          child: Column(
            children: [
              RadioListTile<ThemeMode>(
                selected: true,
                activeColor: Theme.of(context).primaryColor,
                title: Text(
                  'setDark',
                ),
                value: ThemeMode.dark,
                groupValue: _themeMode,
                onChanged: (value) {
                  setState(() {
                    _themeMode = value!;
                  });
                },
              ),
              RadioListTile<ThemeMode>(
                selected: true,
                activeColor: Theme.of(context).primaryColor,
                title: Text(
                  'setLight',
                ),
                value: ThemeMode.light,
                groupValue: _themeMode,
                onChanged: (value) {
                  setState(() {
                    _themeMode = value!;
                  });
                },
              ),
            ],
          ),
        );
      },
    ));
  }
}
  • Related