Skip to content

update the GestureRecognizer in RichText fails. #110342

Closed
#116849
Closed
update the GestureRecognizer in RichText fails.#110342
#116849
Labels
P2Important issues not at the top of the work listf: gesturesflutter/packages/flutter/gestures repository.found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work on

Description

@LucasXu0
LucasXu0
opened on Aug 26, 2022

Steps to Reproduce

  1. Execute flutter run on the code sample
  2. Tap on the Hello World rich-text widget, and the console will show Hello World
  3. Tap on the floating action button. It will update the value of thegestureRecognizer in existed Hello World rich-text widget.

Expected results:

  1. Before changing the value of thegestureRecognizer in existed Hello World rich-text widget, the console will show Hello World.
  2. After changing the value, the console will show Hello Flutter.

Actual results:

  1. The console always shows Hello World whether or not the value of thegestureRecognizer is changed.

Code sample:

class _MyHomePageState extends State<MyHomePage> {
  late TapGestureRecognizer _tapGestureRecognizer;

  @override
  void initState() {
    super.initState();

    _tapGestureRecognizer = TapGestureRecognizer()
      ..onTap = () {
        print('Hello World');
      };
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: RichText(
          text: TextSpan(
            text: 'Hello World',
            style: const TextStyle(color: Colors.black),
            recognizer: _tapGestureRecognizer,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _updateRichText();
        },
      ),
    );
  }

  void _updateRichText() {
    setState(() {
      print('set state');
      _tapGestureRecognizer.dispose();
      _tapGestureRecognizer = TapGestureRecognizer()
        ..onTap = () {
          print('Hello Flutter');
        };
    });
  }
}

Activity

  1. LucasXu0 commented on Aug 26, 2022

    @LucasXu0
    LucasXu0
    on Aug 26, 2022
    ContributorAuthor

    After reading the flutter source code, I found a little clue.

    text_span.dart

    RenderComparison compareTo(InlineSpan other) {
// ...
    RenderComparison result = recognizer == textSpan.recognizer
        ? RenderComparison.identical
        : RenderComparison.metadata;
// ..

    paragraph.dart

    set text(InlineSpan value) {
    assert(value != null);
    switch (_textPainter.text!.compareTo(value)) {
      case RenderComparison.identical:
      case RenderComparison.metadata:
        return;
      case RenderComparison.paint:
        _textPainter.text = value;
        _cachedAttributedLabel = null;
        _cachedCombinedSemanticsInfos = null;
        _extractPlaceholderSpans(value);
        markNeedsPaint();
        markNeedsSemanticsUpdate();
        break;
      case RenderComparison.layout:
        _textPainter.text = value;
        _overflowShader = null;
        _cachedAttributedLabel = null;
        _cachedCombinedSemanticsInfos = null;
        _extractPlaceholderSpans(value);
        markNeedsLayout();
        break;
    }
  }

    In my personal opinion, I think it is necessary to refresh the value of the text of this _textPainter even in the case of metadata.

    I can make a PR to modify if needed.

  2. huycozy
    added
    in triagePresently being triaged by the triage team
    on Aug 29, 2022

  3. huycozy commented on Aug 29, 2022

    @huycozy
    huycozy
    on Aug 29, 2022
    Member

    Hi @LucasXu0, thanks for filing the issue. This issue is reproducible on the latest stable and master channels.

    Logs 
    Hello World
set state
Hello World
Hello World
    Sample code 
    import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late TapGestureRecognizer _tapGestureRecognizer;

  @override
  void initState() {
    super.initState();

    _tapGestureRecognizer = TapGestureRecognizer()
      ..onTap = () {
        print('Hello World');
      };
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: RichText(
          text: TextSpan(
            text: 'Hello World',
            style: const TextStyle(color: Colors.black),
            recognizer: _tapGestureRecognizer,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _updateRichText();
        },
      ),
    );
  }

  void _updateRichText() {
    setState(() {
      print('set state');
      _tapGestureRecognizer.dispose();
      _tapGestureRecognizer = TapGestureRecognizer()
        ..onTap = () {
          print('Hello Flutter');
        };
    });
  }
}
    flutter doctor -v 
    [✓] Flutter (Channel stable, 3.0.5, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 3.0.5 at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (9 hours ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • 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.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2020.3.3)
    • IntelliJ at /Applications/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 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/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.69.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.44.0

[✓] Connected device (3 available)
    • SM T225 (mobile) • R9JT3004VRJ • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos       • darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)     • chrome      • web-javascript • Google Chrome 103.0.5060.114

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

    [✓] Flutter (Channel master, 3.1.0-0.0.pre.2552, on macOS 12.5 21G72 darwin-x64, locale en-EE)
    • Flutter version 3.1.0-0.0.pre.2552 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f66a097919 (2 hours ago), 2022-08-28 20:20:36 -0400
    • Engine revision 4e36ebc1f3
    • Dart version 2.19.0 (build 2.19.0-146.0.dev)
    • DevTools version 2.16.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13E113
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • 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.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2020.3.3)
    • IntelliJ at /Applications/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 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/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.70.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.46.0

[✓] Connected device (3 available)
    • iPhone 13 (mobile) • 2526BC1A-435D-4B08-B99C-44B928F2517B • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-4 (simulator)
    • macOS (desktop)    • macos                                • darwin-x64     • macOS 12.5 21G72 darwin-x64
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 104.0.5112.101

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

    When try changing the TextSpan's properties, such as text value as below example, the GestureRecognizer works as expected.

    Sample code (update TextSpan's properties) 
    import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late TapGestureRecognizer _tapGestureRecognizer;
  late TextStyle textStyle;
  late String text;

  @override
  void initState() {
    super.initState();

    _tapGestureRecognizer = TapGestureRecognizer()
      ..onTap = () {
        print('Hello World');
      };

    textStyle = TextStyle(color: Colors.black);
    text = 'Hello World';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: RichText(
          text: TextSpan(
            text: text,
            style: textStyle,
            recognizer: _tapGestureRecognizer,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _updateRichText();
        },
      ),
    );
  }

  void _updateRichText() {
    setState(() {
      print('set state');
      // textStyle = TextStyle(color: Colors.red);
      text = 'Hello Flutter';
      _tapGestureRecognizer.dispose();
      _tapGestureRecognizer = TapGestureRecognizer()
        ..onTap = () {
          print('Hello Flutter');
        };
    });
  }
}
    Logs (update TextSpan's properties) 
    Hello World
set state
Hello Flutter
Hello Flutter

    Could you try and notice the same thing?

  4. huycozy
    added
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Aug 29, 2022

  5. LucasXu0 commented on Aug 30, 2022

    @LucasXu0
    LucasXu0
    on Aug 30, 2022
    ContributorAuthor

    Hi, @huycozy. Thanks for the reply.

    I know that modifying the text or style will trigger the gesture recognizer update. But in my case, only the gesture recognizer is modified, and no other properties are changed.

    As mentioned above, If we modify the text or text style. The compare to function will return RenderComparison.layout as result.

    text_span.dart

    RenderComparison compareTo(InlineSpan other) {
    if (identical(this, other)) return RenderComparison.identical;
    if (other.runtimeType != runtimeType) return RenderComparison.layout;
    final TextSpan textSpan = other as TextSpan;
    if (textSpan.text != text ||
        children?.length != textSpan.children?.length ||
        (style == null) != (textSpan.style == null))
      return RenderComparison.layout;
    RenderComparison result = recognizer == textSpan.recognizer
        ? RenderComparison.identical
        : RenderComparison.metadata;
    if (style != null) {
      final RenderComparison candidate = style!.compareTo(textSpan.style!);
      if (candidate.index > result.index) result = candidate;
      if (result == RenderComparison.layout) return result;
    }
    if (children != null) {
      for (int index = 0; index < children!.length; index += 1) {
        final RenderComparison candidate =
            children![index].compareTo(textSpan.children![index]);
        if (candidate.index > result.index) result = candidate;
        if (result == RenderComparison.layout) return result;
      }
    }
    return result;
  }

    So I suggest that for the case where only the gesture recognizer is modified, there is no need to re-layout, but to modify _textPainter.value

  6. github-actions
    removed
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Aug 30, 2022

  7. huycozy commented on Aug 30, 2022

    @huycozy
    huycozy
    on Aug 30, 2022
    Member

    @LucasXu0: I see. Keep this open for further insights from the team. Thank you!
    The completed sample code can be found at #110342 (comment).

  8. huycozy
    added
    frameworkflutter/packages/flutter repository. See also f: labels.
    f: gesturesflutter/packages/flutter/gestures repository.
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    found in release: 3.0Found to occur in 3.0
    found in release: 3.1Found to occur in 3.1
    and removed
    in triagePresently being triaged by the triage team
    on Aug 30, 2022
  9. goderbauer
    added
    P2Important issues not at the top of the work list
    on Aug 30, 2022
  10. LucasXu0
    added a commit that references this issue on Dec 11, 2022

    fix: flutter#110342 unable to update rich text widget gesture recognizer

    81115f3

  11. 1 remaining item

  12. LucasXu0 commented on Dec 13, 2022

    @LucasXu0
    LucasXu0
    on Dec 13, 2022
    ContributorAuthor

    Hi, @huycozy. Since this question has been unresponsive for a time, I created a PR and tried to fix it. Do you know of anyone who can help to review?

  13. huycozy commented on Dec 14, 2022

    @huycozy
    huycozy
    on Dec 14, 2022
    Member

    @LucasXu0 Thanks for submitting the PR. I saw the PR being reviewed and waiting to be merged.

  14. tgucio
    closed this as completedin #116849on Dec 16, 2022
  15. tgucio
    added a commit that references this issue on Dec 16, 2022

    fix: #110342 unable to update rich text widget gesture recognizer (#1…

    80e1008
  16. gspencergoog
    added a commit that references this issue on Jan 19, 2023

    fix: flutter#110342 unable to update rich text widget gesture recogni…

    85d8e3b

  17. github-actions commented on Mar 4, 2023

    @github-actions
    github-actionsbot
    on Mar 4, 2023

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  18. github-actions
    locked as resolved and limited conversation to collaborators on Mar 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listf: gesturesflutter/packages/flutter/gestures repository.found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work on

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions