iosflutterborderskiaflutter-custompainter

Flutter - Text foreground is not showing up on iOS


I'm trying to create a text with a border. I've written this code

LayoutBuilder(
      builder: (_, constraints) => Container(
        width: constraints.maxHeight,
        decoration: BoxDecoration(
          border: Border.all(width: 1),
          color: Colors.yellow,
        ),
        child: Center(
          child: Stack(
            alignment: Alignment.center,
            children: [
              Text(
                'HI',
                style: TextStyle(
                  fontSize: scaleAdapter(50),
                  fontWeight: FontWeight.bold,
                  foreground: Paint()
                    ..style = PaintingStyle.stroke
                    ..color = Colors.red
                    ..strokeWidth = 5,
                ),
              ),
              Text(
                'HI',
                style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                  fontSize: scaleAdapter(50),
                ),
              ),
            ],
          ),
        ),
      ),
    );

But I only see the black text. The red one is completely covered by the black one in the stack (see picture).

iOS is not working Android works

Platform is iOS (left image). Android (right image) is working fine.
I suspect it is something involving Impeller (since Android AFAIK is still using SKIA), but I'm definitely not sure...

My flutter doctor -v output:

[✓] Flutter (Channel stable, 3.10.5, on macOS 13.3.1 22E772610a darwin-arm64, locale it-IT)
    • Flutter version 3.10.5 on channel stable at /Applications/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 796c8ef792 (3 weeks ago), 2023-06-13 15:51:02 -0700
    • Engine revision 45f6e00911
    • Dart version 3.0.5
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/alessandrodefendenti/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Users/alessandrodefendenti/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/222.4459.24.2221.10121639/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • 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.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Users/alessandrodefendenti/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/222.4459.24.2221.10121639/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 17.0.6+0-17.0.6b802.4-9586694)

[✓] Android Studio (version 2022.2)
    • Android Studio at /Users/alessandrodefendenti/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/222.4459.24.2221.9971841/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 17.0.6+0-17.0.6b802.4-9586694)

[✓] IntelliJ IDEA Community Edition (version 2023.1.3)
    • IntelliJ at /Users/alessandrodefendenti/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/231.9161.38/IntelliJ IDEA CE.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

[✓] IntelliJ IDEA Community Edition (version 2023.1.2)
    • IntelliJ at /Users/alessandrodefendenti/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/231.9011.34/IntelliJ IDEA CE.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.79.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.68.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.3.1 22E772610a darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 114.0.5735.198

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Solution

  • I discovered that actually this is a known Impeller issue. It's being tracked here:

    https://github.com/flutter/flutter/issues/126010

    In order to make it work we can temporarily disable Impeller on iOS (using old but gold Skia)

    https://docs.flutter.dev/perf/impeller#ios

    Closing

    EDIT October 06th, 2023
    This has been fixed and now Impeller works nicely