Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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
          )
        )
      ),
    ),
  ),
);
like image 624
countpablo Avatar asked Dec 31 '25 03:12

countpablo


1 Answers

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
          )
        )
      ),
    ),
  ),
);
like image 125
countpablo Avatar answered Jan 06 '26 08:01

countpablo



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!