fix: shader mask draws incorrectly on Flutter Web(html renderer) due to incorrect canvas size #133134
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
- clone this repo: https://github.com/Kingtous/dora_demo with branch
bug/html_radial_color. flutter run -d chrome --renderer html- bug shows. (The second text is not fully rendered, see Actual results below).
I've successfully found the problem in the engine, and pr will be available soon.
Note that it's easy to reproduce this issue, just placing two text with ShaderMask, and make them have the same width but different height, vice versa.
Expected results
the two texts are rendered correctly.
Actual results
the mask is incorrect:
Code sample
Code sample
import 'dart:math';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:ui' as ui;
void main() {
runApp(const App());
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Stack(
children: [
Home(),
],
),
);
}
}
class Home extends StatefulWidget {
const Home({super.key});
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
final colors = [Colors.red, Colors.orange, Colors.blue];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: SingleChildScrollView(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
width: 400,
child: ShaderMask(
shaderCallback: (rect) {
return RadialGradient(colors: colors).createShader(rect);
},
child: Text(
"This is the first text which has 400 width, let make them same width.",
style: TextStyle(fontSize: 30, color: Colors.grey.shade500),
),
),
),
SizedBox(
height: 50,
),
SizedBox(
width: 400,
child: ShaderMask(
shaderCallback: (rect) {
return RadialGradient(colors: colors).createShader(rect);
},
child: Text(
"This is the first text which has 400 width, let make them same width but different height. place holder place holder place holder place holder place holder",
style: TextStyle(fontSize: 30,color: Colors.grey.shade500),
),
),
),
],
),
],
),
),
);
}
}
Screenshots or Video
Screenshots / Video demonstration
Logs
Logs
noFlutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.10.3, on macOS 13.5 22G74 darwin-x64, locale zh-Hans-CN)
• Flutter version 3.10.3 on channel stable at /Users/kingtous/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision f92f44110e (3 months ago), 2023-06-01 18:17:33 -0500
• Engine revision 2a3401c9bb
• Dart version 3.0.3
• DevTools version 2.23.1
• Pub download mirror https://pub.flutter-io.cn
• Flutter download mirror https://storage.flutter-io.cn
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
• Android SDK at /Users/kingtous/Library/Android/sdk
• Platform android-33, build-tools 33.0.2
• Java binary at: /usr/local/opt/openjdk@11/bin/java
• Java version OpenJDK Runtime Environment Homebrew (build 11.0.20+0)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E300c
• CocoaPods version 1.12.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[!] Android Studio
• Android Studio at /Users/kingtous/Library/Application
Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/222.4459.24.2221.9526055/Android Studio Preview.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
✗ Unable to find bundled Java version.
• Try updating or re-installing Android Studio.
[✓] VS Code (version 1.81.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.70.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-x64 • macOS 13.5 22G74 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 116.0.5845.96
[!] Network resources
✗ An HTTP error occurred while checking "https://github.com/": Connection closed before full header was received
! Doctor found issues in 2 categories.