Search code examples
flutterdartflutter-web

Colors.white.withOpacity not working on Flutter Web app

Problem description

I am not able to set white color with some opacity in Flutter on the Web.

Either

Colors.white24

or

Color(0x3DFFFFFF)

or even (suggested by @biruk-is)

Colors.white.withOpacity(0.24)

fail to show in Web app. It works as expected on Android and Windows, though...

How to reproduce?

Simply create a new Flutter App, with the standard template and modify the Scaffold as

return Scaffold(
  backgroundColor: Colors.white24,
  body: Center(
    child: Text(
      'Test text',
    ),
  ),
);

by doing this you get a colored background in Android or Windows, but on the web (both Chrome and Edge) show a white background...

enter image description here

Question:

Am i doing something wrong or did i misunderstood anything? Please kindly let me know (i am new to flutter (and web!) developement).

Solution

  • Posible solution

    If by using

    Colors.white.withOpacity(0.24)

    you do get the color white, you might still be able to get your desired color by calling

    Colors.black.withOpacity(0.74)

    If that is your case read the "What causes this issue?" section below.

    What causes this issue?

    The problem is a background color set up in the tree. If that background color is set to black, then setting Colors.black.withOpacity will always return black, or if the background color is white then setting Colors.white.withOpacity will always return white.

    In my case, running

    import 'package:flutter/material.dart';

void main() {
  runApp(Container());
}

    returns a black screen on Android, Windows and iOS, but a white screen in Chrome and Edge.

    I also found out that there is already an issue in flutter that reports this problem.