Home > OS >  What's the color of Scaffold background?
What's the color of Scaffold background?

Time:01-01

Minimal reproducible code:

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

enter image description here

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?

CodePudding user response:

There is no property to define that color inside ThemeData. You can check at: enter image description here


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(),
        ),
      ),
    );
  }
}

enter image description here

CodePudding user response:

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
  • Related