一个 App 有很多页面，而且为了保证 App 主题风格一致，这些页面的背景颜色都是一样的，比如美团 App 的主题背景色是黄色，京东是红色。如果在每个页面重复去设置背景色就太麻烦了，而且不利于后期修改。

在 Flutter 中，我们可以使用 canvasColor和scaffoldBackgroundColor统一设置应用程序中的背景颜色。

  ThemeData get appThemeData => ThemeData(
    canvasColor: Colors.white,
    scaffoldBackgroundColor: Colors.white, 
  );

它们俩作用差不多，大部分情况我们用其中一个就行了。如果非要找出区别，那 canvasColor 的设置范围要比 scaffoldBackgroundColor 大。

scaffoldBackgroundColor：这个属性用于设置 Scaffold 组件的背景颜色。Scaffold组件通常用作应用程序页面的基本结构，包括 AppBar（应用栏）、Body（主体内容）。

canvasColor：这个属性主要用于设置 Material 组件的背景颜色。而 Scaffold 是 Material 组件其中一个，更多 Material 组件还包括 Card 、ListTile 、Drawer 等等。

大概就这样，各位根据项目实际情况使用。

本文由老郭种树原创，转载请注明：https://guozh.net/flutter-uses-theme-to-uniformly-set-the-background-color-of-the-app-page/