Как изменить эффект затухания фона при открытии виджета Drawer?

Question

У меня есть Эшафот с черным фоном, у которого есть Ящик, который тоже черный.Поскольку эффект затухания, возникающий при открытии ящика, заключается в переходе в 'Colors.black54' (черный с непрозрачностью 54%), граница ящика не видна.

Я бы хотел, чтобы он стал серымс непрозрачностью 54%.

Единственный способ, которым я обнаружил, что это можно сделать, - это напрямую изменить файл исходного кода Flutter "box.dart" (строка 382), но это не фактическое решение, это скореехак.

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

Answer 1

Я поднял проблему на Github и получил этот ответ, который делает всю работу за вас (но пока не существует на стабильном канале флаттера, только для версий 1.6.0 и выше).

"Если вы используете Flutter v1.6.0 и более поздние версии, вы можете передать в свой Scaffol_WizardScrimColor. Это было добавлено недавно в # 31025. Подробнее об использовании более высокой версии Flutter в документации по каналам Flutter."

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

Answer 2

Я бы заставил backgroundColor of Scaffold анимироваться в белый / серый, когда вы выдвигаете ящик.

AnimatedController(
  builder: (...) {
    Color col = Color.lerp(
      Colors.white,
      Colors.black,
      Curves.someCurve.transform(controller.value);
    return Scaffold(
      key: _key,
      backgroundColor: col,
      drawer: ...
    );
  }