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
merged 2 commits into from
Jun 13, 2025
Merged

[web] Add Paint dithering. #170362

merged 2 commits into from
Jun 13, 2025
+113 −12

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 repository. See also e: labels. platform-web Web applications specifically labels Jun 10, 2025
@ksokolovskyi ksokolovskyi requested review from yjbanov and mdebbar June 10, 2025 16:27
@ksokolovskyi
Copy link
Contributor Author

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

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

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

@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 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
Open
@Piinks Piinks mentioned this pull request Jun 13, 2025
Open
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 repository. 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