I have written a custom Themesystem and I created a menu to change themes. I have a Custom ThemeListTile for my ThemeSettingsPage and it contains a Radiobutton. When I press the Radiobutton, it changes themes. When I press the Container that contains the Gesturedetector, i get the output that the gestureDetector has been triggered (see log("Gesturedetector has triggered")), but the Theme does not change.

Why does the function trigger but my theme only changes when I press the radio button?

My ThemeSettings Screen Class:

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

  @override
  State<ThemeSettingsScreen> createState() => _ThemeSettingsScreenState();
}

class _ThemeSettingsScreenState extends State<ThemeSettingsScreen> {
  CustomThemeMode? themeValue;

  @override
  void initState() {
    super.initState();
  }

  void updateRadioValue(CustomThemeMode customThemeMode){
    
  }


  @override
  Widget build(BuildContext context) {
    return CustomScaffold(
      appBar: const CustomAppBar(title: Text("Themes")),
      body: ListView(children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              width: 150,
              height: 150,
              child: ThemeSettingsListTile(
                onChanged: (void value) {setState(() {
                  
                  themeValue = CustomThemeMode.defaultLight;
                  themeManager.setTheme(themeValue!);
                });  },
                themeName: 'Default light',
                groupValue: themeValue,
                value: CustomThemeMode.defaultLight,
                child: Stack(
                  clipBehavior: Clip.antiAlias,
                  children: const [
                  Image(
                    image: CustomUi.backgroundPatternDot,
                    repeat: ImageRepeat.repeat,
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Image(
                      image: CustomUi.backgroundWelleFront,
                    ),
                  ),
                ]),
              ),
            ),
            SizedBox(
              width: 150,
              height: 150,
              child: ThemeSettingsListTile(
                onChanged: (void value) {setState(() {
                  themeValue = CustomThemeMode.defaultDark;
                  themeManager.setTheme(themeValue!);
                });  },
                themeName: 'Default dark',
                groupValue: themeValue,
                value: CustomThemeMode.defaultDark,
                child: Stack(children: const [
                  Image(
                    image: CustomUi.backgroundPatternDotDark,
                    repeat: ImageRepeat.repeat,
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Image(
                      image: CustomUi.backgroundWelleFront,
                    ),
                  ),
                ]),
              ),
            ),
          ],
        )
      ]),
    );
  }
}

My ThemeTile Class:

class ThemeSettingsListTile extends StatelessWidget {
  final Widget child;
  final double? width;
  final double? height;
  final String themeName;
  final CustomThemeMode? value;
  final CustomThemeMode? groupValue;
  final Function(void) onChanged;

  const ThemeSettingsListTile(
      {Key? key,
      required this.child,
      this.width,
      this.height,
      this.value,
      this.groupValue,
      required this.onChanged,
      required this.themeName})
      : super(key: key);

  @override
  Widget build(BuildContext context) {

    bool isActive = (value == groupValue);

    return Padding(
      padding: const EdgeInsets.all(10),
      child: GestureDetector(
        onTap: (() {
          onChanged;
          log("Gesturedetector has triggered");
        }),
        child: Material(
          color: Colors.transparent,
          elevation: 10,
          child: Container(
            width: width,
            height: height,
            decoration: BoxDecoration(
                color: CustomColor.uibrightBeige,
                borderRadius: BorderRadius.circular(10),
                border: Border.all(color: isActive ? Theme.of(context).scaffoldBackgroundColor : CustomColor.uiBrightBrown)),
            child: Stack(children: [
              child,
              Row(
                children: [Radio(value: value, groupValue: groupValue, onChanged: onChanged), Text(themeName)],
              )
            ]),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

You need parens after onChanged within onTap:

onChanged();