3

I have some trouble creating a smooth linear gradient in flutter web without getting a banding effect. My simplified code looks like this.

void main() {
  Paint.enableDithering = true;
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(fontFamily: 'Interstate'),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Color.fromRGBO(20, 20, 20, 1), Color.fromRGBO(37, 37, 37, 1)],
          ),
        ),
      ),
    );
  }
}

And this is the output in Google Chrome.

Rendering in Google Chrome of a linear gradient with banding effect

Most noticeable is this effect on my MacBook Retina display.

As you can see i already tried to activate dithering, but there is no visible difference whit this setting turned on. I also tested this with various displays. I use Flutter version 2.5.2 and also tried version 2.8.0 and the issue was still there.

Does anybody experienced the same issue and has a solution for this?

I'm also a bit curious what the max color depth of flutter web/skia is.

Thanks for your help!

CTRLMerz
  • 31
  • 2

1 Answers1

-2

I just noticed the same on macos, and found this post, and remembered Paint.enableDithering=true; :)

roipeker
  • 1,183
  • 9
  • 9