Skip to content

InlineText's GestureDetector is always full-width #131435

@justinmc

Description

@justinmc

Is there an existing issue for this?

Steps to reproduce

  1. Create a TextSpan with a recognizer property, or use the app below.
  2. Run the app on a platform with a mouse.
  3. Hover over the space to the right of the TextSpan.

Expected results

Only "example.com" is tappable, as in a typical link on the web, for example. Here I've highlighted the area I expect to be tappable in blue (with an image editor, not with Flutter).

Screenshot from 2023-07-27 12-59-33-small

Actual results

The entire width, highlighted in blue, is tappable.

Screenshot from 2023-07-27 12-59-33

Related:
#27293
#13211
#125927

Code sample

Example 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,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RichText(
              text: TextSpan(
                style: const TextStyle(
                  color: Colors.black,
                ),
                text: '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. ',
                children: [
                  TextSpan(
                    text: 'example.com',
                    style: const TextStyle(
                      color: Colors.blue,
                    ),
                    recognizer: TapGestureRecognizer()..onTap = () {},
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Logs

No response

Flutter Doctor output

Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel master, 3.13.0-10.0.pre.49, on Debian GNU/Linux rodete 6.3.7-1rodete2-amd64, locale en_US.UTF-8)
    ! Upstream repository [email protected]:justinmc/flutter.git is not a standard remote.
      Set environment variable "FLUTTER_GIT_URL" to [email protected]:justinmc/flutter.git to dismiss this error.
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2021.3)
[✓] Android Studio (version 2022.2)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 1 category.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: text inputEntering text in a text field or keyboard related problemsteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions