How to create nested structure like Theme.colors.primary ? I js/ts if i want to create an app theme like this it would be:
class Theme {
public colors = {
primary: '#ff0000'
}
}
And in Dart ? Something like the following ?
class AppColors {
Color get primary => const Color(0xFFFF0000);
}
class AppThemeState extends State<AppTheme> {
final AppColors colors = AppColors();
//...
}
Is that okay or a bad practice and there are better ways to do this ? That "extends State" is just because i'm creating an InheritedWidget to access theme by context. I know about Maps in Dart but notice that i want an access by dot (.primary) not by index (['primary']).
You don't have to do that. In flutter you can do this by utilizing main.dart. And then calling the primaryColor from that will give you the desired color which you've defined in your main.
main.dart
@override
Widget build(BuildContext context) {
print("in the main builder");
return MaterialApp(
title: 'The Monk',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: 'your_desired_color'
)
)
}
Then you can use your primary color by this line anywhere in your widgets/components -> Theme.of(context).primaryColor. This will solve your problem and is the efficient way of doing this in Flutter. Thanks
User contributions licensed under CC BY-SA 3.0