I want to add a functionality that the user can change the theme of the app by selecting one of the popUp menu Items in appBar

Question

I'm fairly new to the application development using Flutter. I have been trying to solve a problem where I want to implement a functionality in my flutter app, that the user can change the theme of the whole app with the help of a colours in a popup menu located in the appBar. The proposed popUp menu with all the colours

Map<BackgroundColors, Color> backGround = {
  BackgroundColors.yellow: const Color.fromRGBO(255, 227, 146, 1),
  BackgroundColors.purple: const Color.fromARGB(255, 226, 192, 233),
  BackgroundColors.green: const Color.fromARGB(255, 172, 227, 174),
  BackgroundColors.blue: const Color.fromARGB(255, 158, 197, 229),
  BackgroundColors.pink: const Color.fromARGB(255, 224, 170, 188),
};

final ValueNotifier<BackgroundColors> backgroundColors =
    ValueNotifier(BackgroundColors.yellow);
ValueNotifier<Color> seedColor =`your text`
    ValueNotifier(backGround[backgroundColors.value]!);

This is the part of the main.dart file and enum BackgroundColors is in another global.dart file

class _MyAppState extends State<MyApp> {
  void setSeedColor() {
    seedColor.value = backGround[backgroundColors.value]!;
  }

  final kColorScheme = ColorScheme.fromSeed(
    seedColor: seedColor.value,
  );

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<Color>(
      valueListenable: seedColor,
      builder: (context, Color color, child) {
        return MaterialApp(
          themeMode: ThemeMode.system,
          theme: ThemeData().copyWith(
            useMaterial3: true,
            colorScheme: kColorScheme,
            appBarTheme: const AppBarTheme().copyWith(
              backgroundColor: kColorScheme.inversePrimary,
              foregroundColor: kColorScheme.inverseSurface,
            ),
            bottomSheetTheme: const BottomSheetThemeData().copyWith(
              backgroundColor: kColorScheme.onTertiary,
              showDragHandle: true,
            ),
          ),
          debugShowCheckedModeBanner: false,
          home: Expenses(
            backgroundColors: backgroundColors.value,
            onColorchange: setSeedColor,
          ),
        );
      },
    );
  }
}

This is the _MyAppState class in the main.dart file which I configured for the ThemeMode.light I added ValueListener class for both the BackgroundColors and seedColor as the popUp menu changes the value of BackgroundColors and then called a setState() function setSeedColor to update the seedColor for the colorScheme