[Impeller] Text Outline not rendered accurately. #138670
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
Text outlines as demonstrated in the official TextStyle class documentation are rendered inaccurately with Impeller.
Until Flutter 3.16, Impeller did not draw those outlines at all, so this is still a step forward. 😃
However, the quality of the rendering makes it ill-suited for most apps.
Expected results
The outline should be drawn clearly centered around the glyphs.
Actual results
The outline is offset a little compared to the actual shape of several glyphs.
If you compare the images more closely, you'll notice that it's actually not so much the outline that changes, but the actual glyphs drawn in the front. The animated GIF file below makes that easy to see.
(A side note: the "Debug" text on the top right is rendered much thinner with Impeller. Which could also indicate an issue with Impeller's text rendering.)
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text Outline Demo',
home: Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text("Text Outline Demo"),
),
body: Center(
child: Stack(
children: <Widget>[
// Stroked text as border.
Text(
'Greetings, planet!',
style: TextStyle(
fontSize: 40,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 1
..color = Colors.black,
),
),
// Solid text as fill.
Text(
'Greetings, planet!',
style: TextStyle(fontSize: 40, color: Colors.grey[300]),
),
],
),
),
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
| Rendered with Skia | Rendered with Impeller |
|---|---|
 |
 |
Note the difference (drawn with 8pt outline to emphasize):
Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.16.0, on macOS 14.1.1 23B81 darwin-arm64, locale en-US)
• Flutter version 3.16.0 on channel stable at /Users/redge/Shared/SDKs/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision db7ef5bf9f (3 days ago), 2023-11-15 11:25:44 -0800
• Engine revision 74d16627b9
• Dart version 3.2.0
• DevTools version 2.28.2
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at /Users/redge/Library/Android/sdk
• Platform android-33, build-tools 33.0.1
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15A507
• CocoaPods version 1.14.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.3)
• Android Studio at /Applications/Android Studio.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
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.3.1)
• IntelliJ at /Applications/IntelliJ IDEA.app
• 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
[✓] VS Code (version 1.84.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.76.0
[✓] Connected device (5 available)
• iPhone Mini Daniel (mobile) • 00004110-001C412C2112401E • ios • iOS 17.1.1 21B91
• iPhone SE (3rd generation) (mobile) • 259772D0-ABED-4542-9F2B-5C91883F1694 • ios • com.apple.CoreSimulator.SimRuntime.iOS-17-0 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 14.1.1 23B81 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 119.0.6045.159
[✓] Network resources
• All expected network resources are available.
• No issues found!