What is the proper way of using ThemeData copyWith in flutter MaterialApp widget?

Question

I was trying to change the accentColor after copying the ThemeData.light(), then I have this sample screen with a FloatingActionButton

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 call runApp, if I set the ThemeData for the MaterialApp widget like this, The FloatingActionButton will have a color of orange.

theme: ThemeData(
  accentColor: Colors.orange
)

but if I tried to inherit the color from the Themedata.light().copyWith, the FloatingActionButton 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 the light theme and override the accentColor.

Answer 1

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()