[Web]: Difference in asset rendering using canvasKit and html on Windows #76187
Description
Steps to Reproduce
- Run
flutter create bug. - Update the files as follows: add any image.png under res/image.png and add it on pubspec.yaml, paste the following code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Image.asset('res/image.png', width: 40,)
),
);
}
}- Run:
flutter run -d chrome --web-renderer canvaskit
Actual results:
The border of the image is really pixelated, it looks like a low resolution image (which is not)
Expected results:
The result I am expecting is the result that I get with: flutter run -d chrome --web-renderer html
You can spot this behaviour just with image asset. With icons everything is good.
flutter doctor -v
[√] Flutter (Channel beta, 1.26.0-17.6.pre, on Microsoft Windows [Versione 10.0.19042.804], locale it-IT)
• Flutter version 1.26.0-17.6.pre at C:\flutter
• Framework revision a29104a69b (15 hours ago), 2021-02-16 09:26:56 -0800
• Engine revision 21fa8bb99e
• Dart version 2.12.0 (build 2.12.0-259.12.beta)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at C:\Users\Damia\AppData\Local\Android\sdk
• Platform android-30, build-tools 30.0.3
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
[√] Android Studio (version 4.1.0)
• Android Studio at C:\Program Files\Android\Android Studio
• 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
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
[√] VS Code (version 1.53.2)
• VS Code at C:\Users\Damia\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.19.0
[√] Connected device (2 available)
• Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150
• Edge (web) • edge • web-javascript • Microsoft Edge 88.0.705.68
• No issues found!
This happens also on my web app, if you open it and open the drawer you will see that the icons looks like low resolution (just on desktop).