Flutter Multiple Theme Adoption

multiple_theme.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class ThemeStuff {
  static ThemeStuff? _instance;

  static ThemeStuff get instance {
    _instance ??= ThemeStuff._init();

    return _instance!;
  }

  ThemeStuff._init() {
    theme.value = darkBlueTheme;
  }

  ValueNotifier<ThemeData> theme = ValueNotifier<ThemeData>(ThemeData.dark());

  void updateValue(ThemeData themes) {
    theme.value = themes;
    print(theme.value);
  }

  ThemeData darkAmberTheme = ThemeData.dark().copyWith(
    primaryColor: Colors.amber,
    appBarTheme: const AppBarTheme(
      color: Colors.amber,
    ),
  );

  ThemeData darkBlueTheme = ThemeData.dark().copyWith(
    primaryColor: Colors.blue,
    appBarTheme: const AppBarTheme(
      color: Colors.blue,
    ),
  );

  ThemeData darkRedTheme = ThemeData.dark().copyWith(
    primaryColor: Colors.red,
    appBarTheme: const AppBarTheme(
      color: Colors.red,
    ),
  );

  ThemeData lightTealTheme = ThemeData.light().copyWith(
    primaryColor: Colors.tealAccent,
    appBarTheme: const AppBarTheme(
        color: Colors.tealAccent,
        titleTextStyle: TextStyle(color: Colors.black, fontSize: 22)),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeStuff appValueNotifier = ThemeStuff.instance;
  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: appValueNotifier.theme,
      builder: (context, value, child) {
        return MaterialApp(
          home: const Home(),
          debugShowCheckedModeBanner: false,
          theme: value,
        );
      },
    );
  }
}

class Home extends StatefulWidget {
  const Home({
    super.key,
  });

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  ThemeStuff appValueNotifier = ThemeStuff.instance;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter"),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              CupertinoButton(
                color: Colors.blue,
                child: const Text("dark blue"),
                onPressed: () {
                  appValueNotifier.updateValue(appValueNotifier.darkBlueTheme);
                },
              ),
              const SizedBox(
                height: 15,
              ),
              CupertinoButton(
                color: Colors.amber,
                child: const Text("dark amber"),
                onPressed: () {
                  appValueNotifier.updateValue(appValueNotifier.darkAmberTheme);
                },
              ),
              const SizedBox(
                height: 15,
              ),
              CupertinoButton(
                color: Colors.red,
                child: const Text("dark red"),
                onPressed: () {
                  appValueNotifier.updateValue(appValueNotifier.darkRedTheme);
                },
              ),
              const SizedBox(
                height: 15,
              ),
              CupertinoButton(
                color: Colors.teal,
                child: const Text("light teal"),
                onPressed: () {
                  appValueNotifier.updateValue(appValueNotifier.lightTealTheme);
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}