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).
Steps to Reproduce
flutter create bug.flutter run -d chrome --web-renderer canvaskitActual 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 htmlYou can spot this behaviour just with image asset. With icons everything is good.
flutter doctor -v
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).