What is the proper way of using ThemeData copyWith in flutter MaterialApp widget?
this is a common problem in Flutter, but you can solve it for now by doing the following:
theme: ThemeData.light().copyWith(
floatingActionButtonTheme:
ThemeData.light().floatingActionButtonTheme.copyWith(
backgroundColor: Colors.orange,
),
),
if you used any other button you should do the same and overwrite it's Theme,
you can read more about the problem here Updating the Material Buttons and their Themes
and buttonColor not honored when using ThemeData.light().copyWith()
zer09
Updated on December 20, 2022Comments
-
zer09 over 1 year
I was trying to change the
accentColor
after copying theThemeData.light()
, then I have this sample screen with aFloatingActionButton
class Sample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( floatingActionButton: FloatingActionButton( onPressed: () {}, child: Icon(Icons.add), ), )}}
Then in the main widget in
main.dart
to callrunApp
, if I set theThemeData
for theMaterialApp
widget like this, TheFloatingActionButton
will have a color of orange.theme: ThemeData( accentColor: Colors.orange )
but if I tried to inherit the color from the
Themedata.light().copyWith
, theFloatingActionButton
will still have the color blue from the light theme.theme: ThemeData.light().copyWith( accentColor: Colors.orange )
I was expecting the
FloatingActionButton
should have the orange color, because It inherit thelight
theme and override theaccentColor
.