[Web] : Overlays with white barrier color flash black before going to the right color. #67354
Description
I'm trying to change the grey-out effect that runs when a dialog (or drawer) opens, from the default value which is a shade of Black to a shade of White.
I get the desired effect when the animation of the barrier "fading in" ends but while the animation runs, the barrier flashes gray/black before going white.
The effect is more visible if the barrierColor is set to Colors.white.withOpacity(1.0)
A video of the effect:
https://youtu.be/E2gdm77T8Q8
The effect can be replicated using this code:
showDialog(
context: context,
barrierColor: Colors.white.withOpacity(0.2),
builder: (context) {
return Center(
child: Container(
color: Colors.white,
child: Material(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text("Dialog"),
),
),
),
);
});
Flutter doctor:
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, 1.23.0-8.0.pre.35, on Microsoft Windows, locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.5.4)
[√] Android Studio (version 4.0)
[√] VS Code, 64-bit edition (version 1.49.3)
[√] Connected device (4 available)
This effect doesn't happen when changing the opacity of a white container from 0.0 to 0.5 for example, so is this an intended effect or is there a way to fix this?