scaffoldBackgroundColor does not seem to set color properly in MaterialApp in Flutter

Question

I have a material app which uses a theme built on light theme. I am changing scaffoldBackgroundColor to a specific color which does not seem to take. The background on the page is black rather than grey.

build() method of the app which identifies this app as a MaterialApp:

Widget build(BuildContext context) {
    return new MaterialApp(
      title: '???',
      theme: appTheme,
      routes: {
        AppRoutes.login: (context) {
          return new LoginPage(
            authenticator: authenticate,
          );
        },
        AppRoutes.home: (context) {
          return new HomePage(
            appState: appState,
            accountRepository: widget.accountRepository,
            authRepository: widget.authRepository,
          );
        },
      },
    );
  }

Theme - here I am reusing the light Theme as the basis for my new theme which changing the scaffoldBackgroundColor to a custom color:

const coolGreyHi = const Color.fromARGB(40,30,20,66);

final ThemeData appTheme = _buildAppTheme();

ThemeData _buildAppTheme() {
  final ThemeData base = new ThemeData.light();
  return base.copyWith(
    scaffoldBackgroundColor: coolGreyHi,
    inputDecorationTheme: new InputDecorationTheme(
      border: new OutlineInputBorder(),
    )
  );
}

build method of the Page where the background should be grey:

Widget build(BuildContext context) {
    return new Scaffold(          
      body: new SafeArea(
        child: new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              new Padding(
                padding: const EdgeInsets.fromLTRB(40.0, 0.0, 40.0, 0.0),
                child: new Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    new Image.asset('images/image.png'),
                    new SizedBox(height: 40.0),
                    new TextField(
                      controller: _uidTextController, decoration: new InputDecoration(
                        hintText: "you@yourdomain.com",
                        labelText: "Email Address",
                      ),

                    ),
                    new SizedBox(height: 12.0),
                    new TextField(
                      controller: _pwdTextController, decoration: new InputDecoration(
                        hintText: "Password",
                        labelText: "Password",
                      ),
                    ),
                    new SizedBox(height: 12.0),
                    new ButtonBar(
                      children: <Widget>[
                        new FlatButton(
                          child: new Text("SIGN UP"),
                          onPressed: () {},
                        ),
                        new RaisedButton(
                          child: new Text("SIGN IN"),
                          elevation: 8.0,
                          onPressed: () {
                            authenticator(_uidTextController.text, _pwdTextController.text).then((bool isAuthenticated) {
                              if (isAuthenticated)
                                Navigator.of(context).pushNamedAndRemoveUntil(AppRoutes.home, (Route<dynamic> route) => false);
                            });
                          },
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ), 
    );
  }

Answer 1

I did some further checking and it seems like some colors, even those within Flutter palette like Colors.black54 or Colros.black45 do appear as black on my emulator. I have not tested them on the physical device. I am not sure if the problem is with the display or with the emulator and how it is set up but a color like Colros.grey does appear normally. To summarize, setting the scaffoldBackgroundColor on the ThemeData works as designed but some colors may not appear accurately (i.e. as black in my instance). Not sure if the problem is with the display or the emulator.

Answer 2

Please use a recent Flutter version (e.g. beta or dev) channel. You can then use the backgroundColor property on Scaffold, as documentation outlines it here: https://docs.flutter.io/flutter/material/Scaffold/backgroundColor.html