What's the color of Scaffold background?

Question

Minimal reproducible code:

@override
Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.all(40),
    child: Scaffold(),
  );
}

I see black background behind my Scaffold, obviously this isn't Theme.of(context).scaffoldBackgroundColor because both light and dark theme show same white color. So, what color is it?

Answer 1

There is no property to define that color inside ThemeData. You can check at: https://api.flutter.dev/flutter/material/ThemeData-class.html

As you say, the property scaffoldBackgroundColor is just the color of the Material widget that underlies the entire Scaffold.

But if you want a color or maybe a gradient behind your Scaffold, you can use container.

Solid Color

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(scaffoldBackgroundColor: Colors.blueGrey),
      home: Container(
        color: Colors.blue,
        child: const Padding(
          padding: EdgeInsets.all(40),
          child: Scaffold(),
        ),
      ),
    );
  }
}

---

Linear Gradient

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(scaffoldBackgroundColor: Colors.white70),
      home: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.blue, Colors.blue.shade600, Colors.blue.shade900],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
        ),
        child: const Padding(
          padding: EdgeInsets.all(40),
          child: Scaffold(),
        ),
      ),
    );
  }
}

Answer 2

Here when you use Padding or anyother widget as parent on the screen, then you have the background color from the theme or from the MaterialApp initial widget from main.dart file.

If you need any specific color on this single screen alone. then,

1. Use scaffold as parent and apply background color. Use padding as its direct child.
2. Wrap with Theme widget to the Padding widget

Answer 3

I found the default background color of scaffold comes from backgroundColor which comes from ThemeData.scaffoldBackgroundColor

If we don't define scaffoldBackgroundColor it comes from canvasColor

scaffoldBackgroundColor ??= canvasColor;

And the canvas color is defined on source code like

canvasColor ??= isDark ? Colors.grey[850]! : Colors.grey[50]!;

Therefore, the default color of scaffoldBackgroundColor is Colors.grey[50]

The black is coming because of Padding.