In Flutter, how do you set all the scaffold background color at once?

Question

Currently, I set background color of each screen using this:

  @override
  Widget build(BuildContext context) => Scaffold(
    backgroundColor: Colors.white,
    body: ...
  );

Every time I create new screen, I always forgot to add this background color setter. This is a minor inconvenience, but I really appreciate if there's a method to set this background color once for all screens, unless overridden by backgroundColor property of specific Scaffold. I have tried to set the color on MaterialApp's color property, but it doesn't look like it has any effect.

Alexander Melnikov · Accepted Answer · 2020-12-11T10:25:51.707

6

You should pass custom ThemeData with background color parameter overwritten to you MaterialApp, so this will do the trick:

return MaterialApp(
        // your other app initialization code
        theme: ThemeData(scaffoldBackgroundColor: Colors.white),
    );

You can read more about ThemData and flutter app theming in the official documentation https://flutter.dev/docs/cookbook/design/themes

edited Dec 11 '20 at 10:25

answered Dec 11 '20 at 10:19

Alexander Melnikov

231
1
4

Umm, backgroundColor, or scaffoldBackgroundColor? Or doesn't matter which one? – Chen Li Yong Dec 11 '20 at 10:23
yep, my bad, it should be scaffoldBackgroundColor. The backgroundColor one is responsible for stuff like the remaining part of a progress bar (so only it is used only in some flutter widgets) – Alexander Melnikov Dec 11 '20 at 10:26
@ChenLiYong why dont you simply read [Scaffold.backgroundColor](https://api.flutter.dev/flutter/material/Scaffold/backgroundColor.html) official docs? – pskink Dec 11 '20 at 10:27
@pskink because the one that's working for me is `scaffoldBackgroundColor`, and not `Scaffold.backgroundColor`. – Chen Li Yong Dec 11 '20 at 10:27
@ChenLiYong and this is described in the [docs](https://api.flutter.dev/flutter/material/Scaffold/backgroundColor.html): *"backgroundColor property Color backgroundColor final The color of the Material widget that underlies the entire Scaffold. The theme's ThemeData.scaffoldBackgroundColor by default."* – pskink Dec 11 '20 at 10:28
@pskink and that is why I asked above, backgroundColor or scaffoldBackgroundColor, because I have just read that docs. Either way, I will accept the straightforward answer from Alexander. – Chen Li Yong Dec 11 '20 at 10:31
@AlexanderMelnikov yep, no worries! Thank you for your help and confirmation! – Chen Li Yong Dec 11 '20 at 10:33

In Flutter, how do you set *all* the scaffold background color at once?

1 Answers1

In Flutter, how do you set all the scaffold background color at once?