How to create 3 different color themes? Light, dark and custom

Question

I want to have the option of changing between light(white), dark(black), custom(my original look - blue). Is this possible? If so, how?

Answer 1

You can provide the ThemeData on MaterialApp(theme: this will reflect the widget tree.

void main() {
  runApp(name());
}

enum AppTheme {
  LightTheme(),
  DarkTheme,
  CustomTheme;
}

extension AppThemeData on AppTheme {
  get data {
    switch (this) {
      case AppTheme.DarkTheme:
        return ThemeData.dark();
      case AppTheme.CustomTheme:
        return ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSwatch().copyWith(
            secondary: Colors.deepPurple,
          ),
        );

      case AppTheme.LightTheme:
      default:
        return ThemeData.light();
    }
  }
}

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

  @override
  State<name> createState() => _nameState();
}
// You may use some sort of state-management solution like riverpod/bloc on project level
class _nameState extends State<name> {
  AppTheme theme = AppTheme.LightTheme;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: theme.data,
      home: Scaffold(
        appBar: AppBar(
          title: Text("test"),
        ),
        body: Column(
          children: [
            Text("test"),
            for (final value in AppTheme.values)
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    theme = value;
                  });
                },
                child: Text(value.name),
              )
          ],
        ),
      ),
    );
  }
}