Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[web]: TextSpan recognizer ignored when RichText wraps #39226

Open
idraper opened this issue Aug 26, 2019 · 2 comments

Comments

@idraper
Copy link

@idraper idraper commented Aug 26, 2019

flutter_web version: 2.5.0
browser: Chrome Version 76.0.3809.100 (Official Build) (64-bit)

When running webdev serve, I have a RichText's which are in a column, and the text wraps around (as desired). The problem I am facing is that if a child TextSpan has a recognizer, it is only triggered as long as the TextSpan is on the first line. Any text that is wrapped/overflowed, while visible and applies style correctly, does not register a tap.

I wrote an example script and ran it both using webdev serve as well as flutter run using an Android Emulator. The only modification was my headers and pubspec accordingly:

webdev version:

import 'package:flutter_web/gestures.dart';
import 'package:flutter_web/material.dart'

android version:

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart'

My full test code:

import 'package:flutter_web/gestures.dart';
import 'package:flutter_web/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue,),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.only(left: 40.0 , right: 40.0),
            child: Align(
              alignment: Alignment.topCenter,
              child: Container(
                height: MediaQuery.of(context).size.height - 168,
                child: Foo(),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class Foo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          children: [
            Flexible(
              child: RichText(
                text: TextSpan(
                  style: Theme.of(context).textTheme.display1.copyWith(fontSize: 20),
                  children: [
                    TextSpan(
                      text: '"You have one minute and your minute has begun and no time will be added at the end, even to accommodate this sentence with all of it\'s baroque dependent clauses and cascading turns of phrase." - '
                    ),
                    TextSpan(
                      text: 'Andy Bernard',
                      recognizer: TapGestureRecognizer()..onTap = () => print ('pressed1'),
                    ),
                  ],
                ),
              ),
            ),
            Padding(padding: const EdgeInsets.only(bottom: 40),),
            Flexible(
              child: RichText(
                text: TextSpan(
                  style: Theme.of(context).textTheme.display1.copyWith(fontSize: 20),
                  children: [
                    TextSpan(
                      text: 'Andy Bernard - ',
                      recognizer: TapGestureRecognizer()..onTap = () => print ('pressed2'),
                    ),
                    TextSpan(
                      text: '"You have one minute and your minute has begun and no time will be added at the end, even to accommodate this sentence with all of it\'s baroque dependent clauses and cascading turns of phrase."'
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

}

When using flutter web, pressed2 is printed but pressed1 is never printed. In contrast, the android build works as expected, printing each when they are tapped.

@yjbanov

This comment has been minimized.

Copy link
Contributor

@yjbanov yjbanov commented Aug 29, 2019

/cc @mdebbar

@yjbanov yjbanov added this to the Near-term Goals milestone Aug 29, 2019
@ymback

This comment has been minimized.

Copy link

@ymback ymback commented Sep 20, 2019

Actually #36427 still happens now.
If both style and recognizer are setted in the same TextSpan, then recognizer does not work when click

RichText(
      textAlign: TextAlign.center,
      text: TextSpan(
        children: [
          TextSpan(
            text: "You are entering wrong url, please enter correct url or go back to ",
          ),
          TextSpan(
            text: "Home Page",
            style: TextStyle(
              color: AppColors.colorRGB337ab7,
            ),
            recognizer: TapGestureRecognizer()
              ..onTap = () {
                if (fromMain == true) {
                  RouterUtils.goMain(context, removeAll: false);
                } else {
                  RouterUtils.goMain(context);
                }
              },
          ),
          TextSpan(
            text: ".",
          ),
        ],
        style: TextStyle(
          fontSize: 24.0,
          color: AppColors.colorRGBa94442,
        ),
      ),
    );

My bad workaround is to set the style in parent which the recognizer needs, and set other's style in their own TextSpan

RichText(
      textAlign: TextAlign.center,
      text: TextSpan(
        children: [
          TextSpan(
            text: "You are entering wrong url, please enter correct url or go back to ",
            style: TextStyle(
              color: AppColors.colorRGBa94442,
            ),
          ),
          TextSpan(
            text: "Home Page",
            recognizer: TapGestureRecognizer()
              ..onTap = () {
                if (fromMain == true) {
                  RouterUtils.goMain(context, removeAll: false);
                } else {
                  RouterUtils.goMain(context);
                }
              },
          ),
          TextSpan(
            text: ".",
            style: TextStyle(
              color: AppColors.colorRGBa94442,
            ),
          ),
        ],
        style: TextStyle(
          fontSize: 24.0,
          color: AppColors.colorRGB337ab7,
        ),
      ),
    );

At least it works now as expect.

flutter doctor -v

[√] Flutter (Channel master, v1.10.6-pre.19, on Microsoft Windows [Version 10.0.18362.356], locale zh-CN)
    • Flutter version 1.10.6-pre.19 at C:\Temp\Android\flutter
    • Framework revision ec07e039c2 (2 hours ago), 2019-09-19 21:37:41 -0400
    • Engine revision 70f21b0edb
    • Dart version 2.6.0 (build 2.6.0-dev.1.0 7c1821c4aa)


[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at C:\Temp\Android\Sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-Q, build-tools 28.0.3
    • ANDROID_HOME = C:\Temp\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 39.0.3
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] IntelliJ IDEA Ultimate Edition (version 2017.3)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2017.3.5
    • Flutter plugin version 29.0.1
    • Dart plugin version 173.4700

[√] Proxy Configuration
    • HTTP_PROXY is set
    • NO_PROXY is localhost,127.0.0.1
    • NO_PROXY contains 127.0.0.1
    • NO_PROXY contains localhost

[√] Connected device (2 available)
    • Chrome • chrome • web-javascript • Google Chrome 77.0.3865.90
    • Server • web    • web-javascript • Flutter Tools

• No issues found!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.