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.

user_9569085 · Answer

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

user_10953668 · Answer

look, I don't think that u can inherit the accent color using the ThemeData.copyWith(),but if u are sure to use ThemeData.copyWith() to change your floatingActionButton Color then u can do this in the following way,

theme:ThemeData.dark().copyWith(
    textTheme:ThemeData.dark().textTheme.copyWith(
        title :TextStyle( --your color and text configuratons here like color,font etc)
        button: TextStyle(--do--),
        ...and so on....
    )
)

configurations u want in your default text title will go inside the TextStyle of above title property and same for button

Now u can achieve this inside your FAB by using this,

color: Theme.of(context).textTheme.button.color,

by doing this u can get the color u set for the buttons inside the ThemeData.

If u force on getting the default accent color then u have to use

theme:ThemeData(
    primaryColor: -----
    accentColor : -----
)

this will allow u to use Default accent Color for FAB

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

2 Answers