How to modify fade effect of background when Drawer widget is opened?

Question

I have a Scaffold with a black background and that has a Drawer that is also black. Since the fade effect that happens when the Drawer is opened is to fade to 'Colors.black54' (Black with opacity 54%) the Drawer's border isn't visible.

I'd like it to fade to Grey with opacity 54%.

The only way I found that this can be done is to modify Flutter's source code file "drawer.dart" directly (line 382) but this isn't an actual solution, it's more of a hack.

return new Scaffold(
  backgroundColor: Colors.black,
  drawer: new Drawer(
    child: new Container(
      color: Colors.black,
      child: new Center(
        child: new Text(
          'Test',
          style: new TextStyle(
            color: Colors.white
          )
        )
      ),
    ),
  ),
);

Solution

I raised an issue on Github and got this answer which does all the work for you (but doesn't exist yet on the stable channel of flutter, is only on versions 1.6.0 and above).

"If you're using Flutter v1.6.0 and above, you can pass the drawerScrimColor to your Scaffold. This was added recently in #31025. See more about using a higher Flutter version in the docs about Flutter's channels."

https://github.com/flutter/flutter/issues/34171#issuecomment-500590613

return new Scaffold(
  backgroundColor: Colors.black,
  drawerScrimColor: Colors.grey.withOpacity(0.54),
  drawer: new Drawer(
    child: new Container(
      color: Colors.black,
      child: new Center(
        child: new Text(
          'Test',
          style: new TextStyle(
            color: Colors.white
          )
        )
      ),
    ),
  ),
);

Comments

[countpablo]

Hey that's a great alternative and is probably the best way to do it currently on Flutter's stable channel however on Flutter 1.6.0 and above they added a parameter to Scaffold which does all the work for you :)