AppBarTheme not applied with copyWith in Flutter?-CodePudding

I've got this code snippet below trying to apply a title theme to my appBar and I am not quite sure I am understanding the copyWith function for the theme. My understanding would be that all properties of my theme are copied over, except those that I change. I am not changing appBarTheme when I use the copyWith, so why is it not applying to the app?

I've uncommented the line that does't work, and commented out the one that does.

class MyApp extends StatelessWidget {
  final ThemeData theme = ThemeData(
    primarySwatch: Colors.purple,
    fontFamily: 'Quicksand',
    // This doesn't work
    appBarTheme: AppBarTheme(
        titleTextStyle: TextStyle(fontFamily: 'OpenSans', fontSize: 40)),
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Personal Expenses',
      theme: theme.copyWith(
        colorScheme: theme.colorScheme.copyWith(secondary: Colors.amber),
        // This does work
        // appBarTheme: AppBarTheme(
        //     titleTextStyle: TextStyle(fontFamily: 'OpenSans', fontSize: 40)),
      ),
      home: MyHomePage(),
    );
  }
}

CodePudding user response：

Your code looks fine, I tested and it's working fine

 theme: theme.copyWith(
        appBarTheme: AppBarTheme(color: Colors.redAccent,titleTextStyle: TextStyle(fontFamily: "Amiri", fontSize: 40))

change the App bar theme but for

theme.copyWith(
    colorScheme: theme.colorScheme.copyWith(secondary: Colors.amber),

it change secondary color not App bar theme

CodePudding user response：

I am not changing appBarTheme when I use the copyWith, so why is it not applying to the app?

What do you mean? If you want to simply apply your theme then all you have to do is this.

Essentially,

MaterialApp(
  ...
  theme: theme
  ...
);

If you want to change the color of the AppBar, then you would want to do this.

Essentially,

MaterialApp(
  ...
  theme: theme.copyWith(
    colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.amber),
  ),
  ...
);

This would allow you to change your AppBar color while leaving your AppBar's titleTextStyle as it is.

Please note that your code theme.colorScheme.copyWith(secondary: Colors.amber) will only set the secondary color, which will not be visible depending on how you setup your AppBar. I am not sure if you did this intentionally.

Finally, if you want to change the appBarTheme as well, then you would want to do this.

Essentially,

MaterialApp(
  ...
  theme: theme.copyWith(
    colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.amber),
    appBarTheme: const AppBarTheme(
      titleTextStyle: TextStyle(fontFamily: 'OpenSans', fontSize: 10),
    ),
  ),
  ...
);

Note that I only changed the font size from 40 to 10.

All these should work, and it should show very big differences in the UI. In other words, your code seems fine. I am not very sure why you think that it is "not applying to the app". Please clarify why you think so.