Skip to content

RenderParagraph's getOffsetForCaret/getPositionForOffset for TextSpans with different styles working on iOS but not on web #71176

@lff5

Description

@lff5

There is no issue if multiple TextSpans are used with same style - caret offset works perfectly. On iOS adding styles to TextSpans wont affect anything. On flutter web as soon as one of the TextSpans contain different style, getOffsetForCaret and getPositionForOffset give mostly 0.

Steps to Reproduce

  1. Run the following code on web and iOS.
  2. Click on the rendered text and see printed position and offset in the console (for web see Inspect's console)
  3. Comment out the line with 'offending line' comment to see correct offsets working on web but without the style.
    Expected results: Different position and offset for every rendered character (works on iOS)
    Actual results: Position and offset are 0 on web. I know in my example getOffsetForCaret depends on getPositionForOffset but i tested it separately too, both are broken on web.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

final loremIpsum =
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Container(
            width: 350,
            color: Color.fromARGB(100, 0, 0, 0),
            child: SelectText(),
          ),
        ),
      ),
    );
  }
}

class SelectText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final double sidebar = 20;
    final InlineSpan zeText =
        TextSpan(text: loremIpsum, style: TextStyle(fontSize: 15), children: [
      TextSpan(
          text: loremIpsum,
          style: TextStyle(
              fontWeight: FontWeight
                  .bold) // offending line, comment it out and web will work too
          )
    ]);
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
      final textPainter = RenderParagraph(
        zeText,
        textDirection: TextDirection.ltr,
      );
      final width = constraints.maxWidth - sidebar;
      textPainter.layout(constraints);
      final height = textPainter.computeMaxIntrinsicHeight(width);

      return Container(
          width: width,
          height: height,
          color: Colors.yellow,
          child: GestureDetector(
            onTapDown: (details) {
              var pos = textPainter.getPositionForOffset(details.localPosition);
              var offset = textPainter.getOffsetForCaret(
                  pos, Rect.fromLTWH(1.0, 1.0, 1.0, 1.0));
              print("Selection pos: $pos");
              print("Selection pos: $offset");
            },
            child: Text.rich(
              zeText,
              textDirection: TextDirection.ltr,
            ),
          ));
    });
  }
}
Details Unable to find any JVMs matching version "1.8". No Java runtime present, try --request to install. [✓] Flutter (Channel dev, 1.24.0-7.0.pre, on Mac OS X 10.14.6 18G6032 darwin-x64, locale en-EE) • Flutter version 1.24.0-7.0.pre at /usr/local/Cellar/flutter/dev • Framework revision a0860f6 (4 weeks ago), 2020-10-29 20:07:34 -0700 • Engine revision 073263e • Dart version 2.11.0 (build 2.11.0-260.0.dev)

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at /Users/leevipoldaru/Library/Android/sdk
• Platform android-29, build-tools 29.0.2
• Java binary at: /usr/bin/java
✗ Could not determine java version

[!] Xcode - develop for iOS and macOS (Xcode 11.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 11.3, Build version 11C29
! CocoaPods 1.7.0 out of date (1.8.0 is recommended).
CocoaPods is used to retrieve the iOS and macOS platform side's plugin
code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To upgrade see
https://guides.cocoapods.org/using/getting-started.html#installation for
instructions.

[✗] Chrome - develop for the web (Cannot find Chrome executable at
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[!] 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/macos#android-setup
for detailed instructions).

[✓] VS Code (version 1.51.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.16.0

[✓] Connected device (2 available)
• iPhone 11 (mobile) • E8EC974A-86E0-4087-A675-DDB6A7B9BE40 • ios
• com.apple.CoreSimulator.SimRuntime.iOS-13-3 (simulator)
• Web Server (web) • web-server • web-javascript
• Flutter Tools

! Doctor found issues in 4 categories.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1High-priority issues at the top of the work lista: typographyText rendering, possibly libtxte: web_htmlHTML rendering backend for Webf: gesturesflutter/packages/flutter/gestures repository.f: material designflutter/packages/flutter/material repository.found in release: 1.24Found to occur in 1.24frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specifically

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions