changing theme through button input in Flutter - flutter

Question

I made a button, and when that button is pressed, I want to change the color of the theme.
I am trying to modify the color with the value received from the button, but it does not work.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
String themeColors=context.watch<DisplayList>().themeColor;
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.${themeColors}, //How do I fix this part?
),
Or is there another way to change the color?
themeColors variable already contains a string of the color to be changed.

Answer 1

You can't actually have a syntax like this one on Flutter: Colors.${themeColors}
To handle multiples themes, you need to create multiples ThemeData and switch them with a ValueNotifier.
I suggest you to use an already made community package like theme_provider which will help you to switch between themes very easily.

Answer 2

You will have to convert your widget to Stateful and use the setState method
class XYZ extends StatefulWidget {
const XYZ({Key? key}) : super(key: key);
#override
_XYZState createState() => _XYZState();
}
class _XYZState extends State<XYZ> {
var myAppBarThemeColor = Colors.red;
#override
Widget build(BuildContext context) {
print(myAppBarThemeColor);
return MaterialApp(
theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: myAppBarThemeColor)),
home: Scaffold(
appBar: AppBar(
title: Text('Hello'),
),
body: Center(
child: TextButton(
onPressed: () => setState(() => myAppBarThemeColor = Colors.green),
child: Text('Change AppBar Color'),
),
),
),
);
}
}

Answer 3

You can use findAncestorStateOfType to manage the state of the root widget.
class App extends StatefulWidget {
const App({Key? key}) : super(key: key);
static _AppState? of(BuildContext context) => context.findAncestorStateOfType<_AppState>();
#override
_AppState createState() => _AppState();
}
class _AppState extends State<App> {
late bool isDarkMode;
late ThemeModeStorage storage;
void toggleDarkMode() {
setState(() {
isDarkMode = !isDarkMode;
});
storage.writeBool(value: isDarkMode);
}
...
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeConfig(isDarkMode).themeData,
home: HomeScreen(),
);
}
}
So you can call this everywhere in your app.
App.of(context)?.toggleDarkMode();