Skip to content

[web] Add Paint dithering. #170362

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
auto-submit merged 2 commits into from
Jun 13, 2025
Merged

[web] Add Paint dithering. #170362

auto-submit merged 2 commits into from
Jun 13, 2025

Conversation

@ksokolovskyi
Copy link
Contributor

@ksokolovskyi ksokolovskyi commented Jun 10, 2025 •
edited
Loading

Fixes #168798
Closes #134250

Description

  • Adds Paint dithering for gradient shaders in canvaskit
  • Adds Paint dithering for gradient shaders in skwasm

CanvasKit

Before After
canvaskit_bug canvaskit_fix

SkWASM

Before After
skwasm_bug skwasm_fix
Sample Source Code 
import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400,
      height: 400,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: const [Color(0xff324958), Color(0xff26323a)],
          begin: Alignment.bottomLeft,
          end: Alignment.topRight,
        ),
      ),
    );
  }
}

Pre-launch Checklist

If you need help, consider asking for advice on the #hackers-new channel on Discord.

@github-actions github-actions bot added engine flutter/engine related. See also e: labels. platform-web Web applications specifically labels Jun 10, 2025
@ksokolovskyi ksokolovskyi requested review from mdebbar and yjbanov June 10, 2025 16:27
@ksokolovskyi
Copy link
Contributor Author

ksokolovskyi commented Jun 10, 2025

Hi @yjbanov @mdebbar!

I am unsure how to properly test whether dithering is enabled in SkPaint as isDither() is not available in CanvasKit (https://canvaskit-wasm.netlify.app/interfaces/paint), while it is available in Skia (https://api.skia.org/classSkPaint.html#a758da2765053ca1c3a9d2b0444ffc13c).

What could you suggest?

@flutter-dashboard
Copy link

flutter-dashboard bot commented Jun 10, 2025

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #170362 at sha 5303393

@flutter-dashboard flutter-dashboard bot added the will affect goldens Changes to golden files label Jun 10, 2025
@ksokolovskyi
Copy link
Contributor Author

ksokolovskyi commented Jun 11, 2025

All golden file changes are caused by the dithering applied to the Paint with gradients.

eyebrowsoffire
eyebrowsoffire approved these changes Jun 11, 2025
View reviewed changes
Copy link
Contributor

@eyebrowsoffire eyebrowsoffire left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@ksokolovskyi
Copy link
Contributor Author

ksokolovskyi commented Jun 12, 2025

@eyebrowsoffire thanks a lot for the review! There are 39 golden changes pending review, but I don't have the permissions to accept them. Could you please take a look at them when you have time?

@eyebrowsoffire
Copy link
Contributor

eyebrowsoffire commented Jun 12, 2025

@eyebrowsoffire thanks a lot for the review! There are 39 golden changes pending review, but I don't have the permissions to accept them. Could you please take a look at them when you have time?

Golden diffs look correct to me, I approved them. Thanks for the fix!

@ksokolovskyi ksokolovskyi added the autosubmit Merge PR when tree becomes green via auto submit App label Jun 13, 2025
@auto-submit auto-submit bot added this pull request to the merge queue Jun 13, 2025
Merged via the queue into flutter:master with commit a7c0621 Jun 13, 2025
181 checks passed
@flutter-dashboard flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Jun 13, 2025
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Jun 13, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 13, 2025
@engine-flutter-autoroll
a7c062124 [web] Add Paint dithering. (flutter/flutter#170362)
d669870
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Jun 13, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 13, 2025
@engine-flutter-autoroll
a7c062124 [web] Add Paint dithering. (flutter/flutter#170362)
995d455
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 13, 2025
@engine-flutter-autoroll
a7c062124 [web] Add Paint dithering. (flutter/flutter#170362)
e46ee12
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Jun 13, 2025
Merged
@Piinks Piinks mentioned this pull request Jun 13, 2025
Open
auto-submit bot pushed a commit to flutter/packages that referenced this pull request Jun 16, 2025
@engine-flutter-autoroll
Roll Flutter from f79452e3f4ea to 8303a96a0a99 (21 revisions) (#9433)
5d2c0b2 
flutter/flutter@f79452e...8303a96

2025-06-13 [email protected] infa: linux_android_emulator_tests to bringup (bad kvm config) (flutter/flutter#170607)
2025-06-13 [email protected] Roll Skia from 70455b7c74dd to 438ea4e05e15 (1 revision) (flutter/flutter#170570)
2025-06-13 [email protected] [web] Add Paint dithering. (flutter/flutter#170362)
2025-06-13 [email protected] Reland (#167738)  but with some flags updated to use enum  (flutter/flutter#170505)
2025-06-13 [email protected] Roll Dart SDK from ac589dba5282 to 1a6f6d7c6f2c (4 revisions) (flutter/flutter#170566)
2025-06-13 [email protected] Roll Skia from 22018eab8c1f to 70455b7c74dd (1 revision) (flutter/flutter#170564)
2025-06-13 [email protected] Roll Fuchsia Linux SDK from Dueykg3VpLT5D_jSG... to lVfYTWxB0rTTuW_k3... (flutter/flutter#170557)
2025-06-13 [email protected] [Windows] Use ANGLE blit extension on GLES 2.0 (flutter/flutter#170298)
2025-06-12 [email protected] chore: move experimental setup steps to composite action (flutter/flutter#170496)
2025-06-12 [email protected] [Impeller] fix mask filter application to Vertices. (flutter/flutter#170548)
2025-06-12 [email protected] Roll Skia from b41e7017658e to 22018eab8c1f (2 revisions) (flutter/flutter#170551)
2025-06-12 [email protected] Add CupertinoSheetRoute widget of the week video (flutter/flutter#170026)
2025-06-12 [email protected] Fix stray `--packages` argument from `workspace` refactor; add a test. (flutter/flutter#170449)
2025-06-12 [email protected] Roll pub packages (flutter/flutter#170522)
2025-06-12 [email protected] Navigator should call didpop when popping page based route (flutter/flutter#170376)
2025-06-12 [email protected] Relax RadioGroup semantics to allow non-radio children (flutter/flutter#170273)
2025-06-12 [email protected] [ Widget Preview ] Refactor the `flutter widget-preview` command (flutter/flutter#170467)
2025-06-12 [email protected] Pause UIScene migration (flutter/flutter#170490)
2025-06-12 [email protected] Roll Dart SDK from 9f741ef8a689 to ac589dba5282 (3 revisions) (flutter/flutter#170519)
2025-06-12 [email protected] Roll Packages from 0b322a2 to 6d3aaf4 (2 revisions) (flutter/flutter#170528)
2025-06-12 [email protected] Fix the path to `packages_autoroller`. (flutter/flutter#170538)

If this roll has caused a breakage, revert this CL and stop the roller
using the controls here:
https://autoroll.skia.org/r/flutter-packages
Please CC [email protected],[email protected] on the revert to ensure that a human
is aware of the problem.

To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose

To report a problem with the AutoRoller itself, please file a bug:
https://issues.skia.org/issues/new?component=1389291&template=1850622

Documentation for the AutoRoller is here:
https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md
Ortes pushed a commit to Ortes/packages that referenced this pull request Jun 25, 2025
@engine-flutter-autoroll @Ortes
Roll Flutter from f79452e3f4ea to 8303a96a0a99 (21 revisions) (flutte…
1f8f89d 
…r#9433)

flutter/flutter@f79452e...8303a96

2025-06-13 [email protected] infa: linux_android_emulator_tests to bringup (bad kvm config) (flutter/flutter#170607)
2025-06-13 [email protected] Roll Skia from 70455b7c74dd to 438ea4e05e15 (1 revision) (flutter/flutter#170570)
2025-06-13 [email protected] [web] Add Paint dithering. (flutter/flutter#170362)
2025-06-13 [email protected] Reland (#167738)  but with some flags updated to use enum  (flutter/flutter#170505)
2025-06-13 [email protected] Roll Dart SDK from ac589dba5282 to 1a6f6d7c6f2c (4 revisions) (flutter/flutter#170566)
2025-06-13 [email protected] Roll Skia from 22018eab8c1f to 70455b7c74dd (1 revision) (flutter/flutter#170564)
2025-06-13 [email protected] Roll Fuchsia Linux SDK from Dueykg3VpLT5D_jSG... to lVfYTWxB0rTTuW_k3... (flutter/flutter#170557)
2025-06-13 [email protected] [Windows] Use ANGLE blit extension on GLES 2.0 (flutter/flutter#170298)
2025-06-12 [email protected] chore: move experimental setup steps to composite action (flutter/flutter#170496)
2025-06-12 [email protected] [Impeller] fix mask filter application to Vertices. (flutter/flutter#170548)
2025-06-12 [email protected] Roll Skia from b41e7017658e to 22018eab8c1f (2 revisions) (flutter/flutter#170551)
2025-06-12 [email protected] Add CupertinoSheetRoute widget of the week video (flutter/flutter#170026)
2025-06-12 [email protected] Fix stray `--packages` argument from `workspace` refactor; add a test. (flutter/flutter#170449)
2025-06-12 [email protected] Roll pub packages (flutter/flutter#170522)
2025-06-12 [email protected] Navigator should call didpop when popping page based route (flutter/flutter#170376)
2025-06-12 [email protected] Relax RadioGroup semantics to allow non-radio children (flutter/flutter#170273)
2025-06-12 [email protected] [ Widget Preview ] Refactor the `flutter widget-preview` command (flutter/flutter#170467)
2025-06-12 [email protected] Pause UIScene migration (flutter/flutter#170490)
2025-06-12 [email protected] Roll Dart SDK from 9f741ef8a689 to ac589dba5282 (3 revisions) (flutter/flutter#170519)
2025-06-12 [email protected] Roll Packages from 0b322a2 to 6d3aaf4 (2 revisions) (flutter/flutter#170528)
2025-06-12 [email protected] Fix the path to `packages_autoroller`. (flutter/flutter#170538)

If this roll has caused a breakage, revert this CL and stop the roller
using the controls here:
https://autoroll.skia.org/r/flutter-packages
Please CC [email protected],[email protected] on the revert to ensure that a human
is aware of the problem.

To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose

To report a problem with the AutoRoller itself, please file a bug:
https://issues.skia.org/issues/new?component=1389291&template=1850622

Documentation for the AutoRoller is here:
https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md
mboetger pushed a commit to mboetger/flutter that referenced this pull request Jul 21, 2025
@ksokolovskyi @mboetger
[web] Add Paint dithering. (flutter#170362)
4d21f29 
Fixes flutter#168798
Closes flutter#134250

### Description
- Adds `Paint` dithering for gradient shaders in `canvaskit`
- Adds `Paint` dithering for gradient shaders in `skwasm`

### CanvasKit
| Before | After |
| - | - |
| <img width="739" alt="canvaskit_bug"
src="https://github.com/user-attachments/assets/cf15e6ff-e0ab-4bce-9db1-653271f5adc8"
/> | <img width="739" alt="canvaskit_fix"
src="https://github.com/user-attachments/assets/3aba09a5-f27a-4c17-a596-44b53961373e"
/> |

### SkWASM
| Before | After |
| - | - |
| <img width="739" alt="skwasm_bug"
src="https://github.com/user-attachments/assets/fe882450-f656-4a1b-9811-fdded5e4a737"
/> | <img width="739" alt="skwasm_fix"
src="https://github.com/user-attachments/assets/86bf2cf9-d743-453b-9d7a-600e293bf8f1"
/> |

<details>
<summary>Sample Source Code</summary>

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @OverRide
  Widget build(BuildContext context) {
    return Container(
      width: 400,
      height: 400,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: const [Color(0xff324958), Color(0xff26323a)],
          begin: Alignment.bottomLeft,
          end: Alignment.topRight,
        ),
      ),
    );
  }
}

```

</details>

## Pre-launch Checklist

- [X] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [X] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [X] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [X] I signed the [CLA].
- [X] I listed at least one issue that this PR fixes in the description
above.
- [X] I updated/added relevant documentation (doc comments with `///`).
- [X] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [X] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [X] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
vashworth pushed a commit to vashworth/packages that referenced this pull request Jul 30, 2025
@engine-flutter-autoroll @vashworth
Roll Flutter from f79452e3f4ea to 8303a96a0a99 (21 revisions) (flutte…
19333e0 
…r#9433)

flutter/flutter@f79452e...8303a96

2025-06-13 [email protected] infa: linux_android_emulator_tests to bringup (bad kvm config) (flutter/flutter#170607)
2025-06-13 [email protected] Roll Skia from 70455b7c74dd to 438ea4e05e15 (1 revision) (flutter/flutter#170570)
2025-06-13 [email protected] [web] Add Paint dithering. (flutter/flutter#170362)
2025-06-13 [email protected] Reland (#167738)  but with some flags updated to use enum  (flutter/flutter#170505)
2025-06-13 [email protected] Roll Dart SDK from ac589dba5282 to 1a6f6d7c6f2c (4 revisions) (flutter/flutter#170566)
2025-06-13 [email protected] Roll Skia from 22018eab8c1f to 70455b7c74dd (1 revision) (flutter/flutter#170564)
2025-06-13 [email protected] Roll Fuchsia Linux SDK from Dueykg3VpLT5D_jSG... to lVfYTWxB0rTTuW_k3... (flutter/flutter#170557)
2025-06-13 [email protected] [Windows] Use ANGLE blit extension on GLES 2.0 (flutter/flutter#170298)
2025-06-12 [email protected] chore: move experimental setup steps to composite action (flutter/flutter#170496)
2025-06-12 [email protected] [Impeller] fix mask filter application to Vertices. (flutter/flutter#170548)
2025-06-12 [email protected] Roll Skia from b41e7017658e to 22018eab8c1f (2 revisions) (flutter/flutter#170551)
2025-06-12 [email protected] Add CupertinoSheetRoute widget of the week video (flutter/flutter#170026)
2025-06-12 [email protected] Fix stray `--packages` argument from `workspace` refactor; add a test. (flutter/flutter#170449)
2025-06-12 [email protected] Roll pub packages (flutter/flutter#170522)
2025-06-12 [email protected] Navigator should call didpop when popping page based route (flutter/flutter#170376)
2025-06-12 [email protected] Relax RadioGroup semantics to allow non-radio children (flutter/flutter#170273)
2025-06-12 [email protected] [ Widget Preview ] Refactor the `flutter widget-preview` command (flutter/flutter#170467)
2025-06-12 [email protected] Pause UIScene migration (flutter/flutter#170490)
2025-06-12 [email protected] Roll Dart SDK from 9f741ef8a689 to ac589dba5282 (3 revisions) (flutter/flutter#170519)
2025-06-12 [email protected] Roll Packages from 0b322a2 to 6d3aaf4 (2 revisions) (flutter/flutter#170528)
2025-06-12 [email protected] Fix the path to `packages_autoroller`. (flutter/flutter#170538)

If this roll has caused a breakage, revert this CL and stop the roller
using the controls here:
https://autoroll.skia.org/r/flutter-packages
Please CC [email protected],[email protected] on the revert to ensure that a human
is aware of the problem.

To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose

To report a problem with the AutoRoller itself, please file a bug:
https://issues.skia.org/issues/new?component=1389291&template=1850622

Documentation for the AutoRoller is here:
https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025
@engine-flutter-autoroll
a7c062124 [web] Add Paint dithering. (flutter/flutter#170362)
0fff31e
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025
@engine-flutter-autoroll
a7c062124 [web] Add Paint dithering. (flutter/flutter#170362)
8af36ce
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025
@engine-flutter-autoroll
a7c062124 [web] Add Paint dithering. (flutter/flutter#170362)
8640dc6
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025
@engine-flutter-autoroll
a7c062124 [web] Add Paint dithering. (flutter/flutter#170362)
d1b23ee
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 16, 2025
@engine-flutter-autoroll
a7c062124 [web] Add Paint dithering. (flutter/flutter#170362)
78a2a5d
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@eyebrowsoffire eyebrowsoffire eyebrowsoffire approved these changes

@yjbanov yjbanov Awaiting requested review from yjbanov

@mdebbar mdebbar Awaiting requested review from mdebbar

Assignees

No one assigned

Labels

engine flutter/engine related. See also e: labels. platform-web Web applications specifically will affect goldens Changes to golden files

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Web LinearGradient not smooth [web] Gradients are not dithered by default in any renderer (?)

2 participants

@ksokolovskyi @eyebrowsoffire