Skip to content

Web HTML renderer does not work with widgetspans #76122

Description

@TimWhiting

Steps to Reproduce

  1. Run flutter create flutter_text_error.
  2. Update the files as follows:
// main.dart
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _signUp = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _signUp ? Text('Create Account') : Text('Login'),
              _signUp
                  ? Text.rich(
                      RichTextLink(
                        text: 'Back to Log In',
                        fontSize: 12,
                        onSelected: () {
                          setState(() => _signUp = false);
                        },
                      ),
                    )
                  : Text.rich(
                      RichTextLink(
                        text: 'Create Account',
                        fontSize: 12,
                        onSelected: () {
                          setState(() => _signUp = true);
                        },
                      ),
                    ),
            ],
          ),
        ),
      ),
    );
  }
}

class RichTextLink extends WidgetSpan {
  RichTextLink({
    @required String text,
    @required double fontSize,
    @required VoidCallback onSelected,
  }) : super(child: _RichTextLinkWidget(text, fontSize, onSelected));
}

class _RichTextLinkWidget extends StatefulWidget {
  _RichTextLinkWidget(this.text, this.fontSize, this.onSelected)
      : _gestureDetector = TapGestureRecognizer()..onTap = onSelected;

  final String text;
  final double fontSize;
  final VoidCallback onSelected;
  final TapGestureRecognizer _gestureDetector;
  @override
  __RichTextLinkWidgetState createState() => __RichTextLinkWidgetState();
}

class __RichTextLinkWidgetState extends State<_RichTextLinkWidget> {
  bool _hovered = false;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      cursor: SystemMouseCursors.click,
      onHover: (_) => setState(() {
        _hovered = true;
      }),
      onExit: (_) => setState(() {
        _hovered = false;
      }),
      child: Text.rich(
        TextSpan(
          style: Theme.of(context).textTheme.bodyText1.copyWith(
                fontSize: widget.fontSize,
                color: Colors.blue,
                decoration: _hovered ? TextDecoration.underline : null,
              ),
          text: widget.text,
          recognizer: widget._gestureDetector,
        ),
      ),
    );
  }
}
  1. ... run flutter run -d chrome --web-renderer=html

Current workaround is to just use the canvaskit backend. But I'd like to take advantage of the smaller html backend on mobile.
As you can see not only does it affect the rich text, but all text seems to break unless the other text is displayed beforehand (you can get the regular text to display by just commenting out the rich text when starting the app), but as soon as you add back in the rich text, it is not displayed and hot restart stops working.

Expected results:
text

Actual results:
blank

Logs
flutter run -d chrome --web-renderer=html --verbose
[  +51 ms] executing: uname -m
[  +26 ms] Exit code 0 from: uname -m
[        ] x86_64
[   +9 ms] executing: [/home/tim/development/flutter/] git -c log.showSignature=false log -n 1 --pretty=format:%H
[   +5 ms] Exit code 0 from: git -c log.showSignature=false log -n 1 --pretty=format:%H
[        ] f49956598b2a44cedcb70bd8c4b6b7ef5dc54d43
[        ] executing: [/home/tim/development/flutter/] git tag --points-at f49956598b2a44cedcb70bd8c4b6b7ef5dc54d43
[  +11 ms] Exit code 0 from: git tag --points-at f49956598b2a44cedcb70bd8c4b6b7ef5dc54d43
[   +1 ms] executing: [/home/tim/development/flutter/] git describe --match *.*.* --long --tags f49956598b2a44cedcb70bd8c4b6b7ef5dc54d43
[  +27 ms] Exit code 0 from: git describe --match *.*.* --long --tags f49956598b2a44cedcb70bd8c4b6b7ef5dc54d43
[        ] 1.27.0-1.0.pre-103-gf49956598b
[  +45 ms] executing: [/home/tim/development/flutter/] git rev-parse --abbrev-ref --symbolic @{u}
[   +5 ms] Exit code 0 from: git rev-parse --abbrev-ref --symbolic @{u}
[        ] origin/master
[        ] executing: [/home/tim/development/flutter/] git ls-remote --get-url origin
[   +5 ms] Exit code 0 from: git ls-remote --get-url origin
[        ] https://github.com/flutter/flutter.git
[  +32 ms] executing: [/home/tim/development/flutter/] git rev-parse --abbrev-ref HEAD
[   +5 ms] Exit code 0 from: git rev-parse --abbrev-ref HEAD
[        ] master
[  +46 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterWebSdk' is not required, skipping update.
[   +1 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[  +47 ms] executing: /home/tim/Android/Sdk/platform-tools/adb devices -l
[  +12 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[  +13 ms] Changing current working directory to: /mnt/HD2/apps/flutter_text_error
[  +46 ms] executing: /home/tim/Android/Sdk/platform-tools/adb devices -l
[  +11 ms] Skipping pub get: version match.
[  +93 ms] Generating /mnt/HD2/apps/flutter_text_error/android/app/src/main/java/io/flutter/plugins/GeneratedPluginRegistrant.java
[  +63 ms] List of devices attached
[   +1 ms] List of devices attached
[  +44 ms] Launching lib/main.dart on Chrome in debug mode...
[  +84 ms] Updating assets
[  +58 ms] Waiting for connection from debug service on Chrome...
[  +46 ms] <- reset
[   +5 ms] /home/tim/development/flutter/bin/cache/dart-sdk/bin/dart --disable-dart-dev /home/tim/development/flutter/bin/cache/artifacts/engine/linux-x64/frontend_server.dart.snapshot
--sdk-root /home/tim/development/flutter/bin/cache/flutter_web_sdk/ --incremental --target=dartdevc --debugger-module-names --experimental-emit-debug-metadata
-DFLUTTER_WEB_AUTO_DETECT=false -DFLUTTER_WEB_USE_SKIA=false --output-dill /tmp/flutter_tools.FTYXSI/flutter_tool.PAQDTQ/app.dill --libraries-spec
file:///home/tim/development/flutter/bin/cache/flutter_web_sdk/libraries.json --packages /mnt/HD2/apps/flutter_text_error/.dart_tool/package_config.json -Ddart.vm.profile=false
-Ddart.vm.product=false --enable-asserts --track-widget-creation --filesystem-root /tmp/flutter_tools.FTYXSI/flutter_tools.BAFWZA --filesystem-scheme org-dartlang-app
--initialize-from-dill build/fbf83d9816390d070f8ee15a780312e5.cache.dill.track.dill --platform file:///home/tim/development/flutter/bin/cache/flutter_web_sdk/kernel/flutter_ddc_sdk.dill
--no-sound-null-safety
[  +12 ms] <- compile org-dartlang-app:/web_entrypoint.dart
[+15614 ms] Waiting for connection from debug service on Chrome... (completed in 15.7s)
[        ] Synced 29.2MB.
[        ] <- accept
[        ] Caching compiled dill
[ +177 ms] Using Google Chrome 88.0.4324.150 

[ +567 ms] [CHROME]:
[        ] [CHROME]:DevTools listening on ws://127.0.0.1:36741/devtools/browser/18f66800-74e3-4b57-8a21-25214c569b78
[ +288 ms] DwdsInjector: Received request for entrypoint at http://localhost:36531/main_module.bootstrap.js
[  +11 ms] MetadataProvider: Loading debug metadata...
[  +26 ms] MetadataProvider: Loaded debug metadata (no sound null safety)
[  +10 ms] DwdsInjector: Injected debugging metadata for entrypoint at http://localhost:36531/main_module.bootstrap.js
[+1446 ms] ChromeProxyService: Initializing expression compiler for main_module.bootstrap.js with sound null safety: false
[ +368 ms] DevHandler: Debug service listening on ws://127.0.0.1:44699/gMSmO4KN2Hw=/ws

[   +7 ms] Debug service listening on ws://127.0.0.1:44699/gMSmO4KN2Hw=/ws
[        ] Running with unsound null safety
[        ] For more information see https://dart.dev/null-safety/unsound-null-safety
[   +2 ms] 🔥  To hot restart changes while running, press "r" or "R".
[        ] For a more detailed help message, press "h". To quit, press "q".
flutter analyze
Analyzing flutter_text_error...                                         
No issues found! (ran in 1.5s)
flutter doctor -v
[✓] Flutter (Channel master, 1.27.0-2.0.pre.103, on Linux, locale en_US.UTF-8)
    • Flutter version 1.27.0-2.0.pre.103 at /home/tim/development/flutter
    • Framework revision f49956598b (10 hours ago), 2021-02-16 00:56:06 -0500
    • Engine revision 1d537824d6
    • Dart version 2.13.0 (build 2.13.0-30.0.dev)

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /home/tim/Android/Sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /usr/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+9-Ubuntu-0ubuntu1.18.04)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/linux#android-setup for more details.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 6.0.0-1ubuntu2 (tags/RELEASE_600/final)
    • cmake version 3.16.4
    • ninja version 1.8.2
    • pkg-config version 0.29.1

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Linux
    • Chrome (web)    • chrome • web-javascript • Google Chrome 88.0.4324.150

! Doctor found issues in 2 categories.

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work liste: web_htmlHTML rendering backend for Webfound in release: 1.27Found to occur in 1.27has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer version

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions