[WEB] Text does not receive gesture events #104980

yaroslav-kahaniak · 2022-05-30T16:42:56Z

Hello everyone,
I have created a custom button using the Text widget wrapped into the Container widget wrapped into the GestureDetector widget. Recently, I have noticed that GestureDetector does not receive tap events when a user taps on the top part of the text. I have tried to play around with the different text styles assuming the text style is broken, and tried to use TextButton instead of Container + GestureDetector but got the same result: when the user taps on the top part of the Text onTap (when using GestureDetector) and onPressed (when using TextButton) is not triggered.
I have no ideas regarding what could be wrong here, especially taking into account that my button widget is very simple.

Steps to Reproduce
1 Create a new Flutter project
2 Clean the initial scree and place the TextButton on it:

      TextButton(
        child: const Text('Option 1'),
        style: ButtonStyle(
          enableFeedback: true,
          textStyle: MaterialStateProperty.all(const TextStyle(
            fontWeight: FontWeight.w700,
            fontSize: 34,
            height: 0.82,
          )),
          foregroundColor: MaterialStateProperty.all(Colors.white),
          backgroundColor: MaterialStateProperty.all(Colors.orange),
          padding: MaterialStateProperty.all(const EdgeInsets.all(20)),
        ),
        onPressed: () {
          print('tap');
        },
      ),

3 Run the web app using canvaskit as web renderer on Chrome or Safari:
flutter run --web-renderer canvaskit

Expected results:
Button text if fully clickable

Actual results:
Only "i" char is clickable
https://user-images.githubusercontent.com/79097999/171032678-abb8425d-bac8-4f53-aa93-747d84716c58.mov

flutter doctor

[✓] Flutter (Channel stable, 2.10.4, on Mac OS X 10.15.7 19H15 darwin-x64, locale en-UA)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.66.2)
[✓] Connected device (1 available)
    ! Error: iPhone (2) is not connected. Xcode will continue when iPhone (2) is connected. (code -13)
[✓] HTTP Host Availability

flutter --version

Flutter 2.10.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c860cba910 (9 weeks ago) • 2022-03-25 00:23:12 -0500
Engine • revision 57d3bac3dd
Tools • Dart 2.16.2 • DevTools 2.9.2

The text was updated successfully, but these errors were encountered:

huycozy · 2022-05-31T07:19:31Z

Hi @yaroslav-kahaniak,
This issue is not reproducible on latest stable and master channels.

Demo

Screen.Recording.2022-05-31.at.14.07.28.mov

Sample code

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Hello',
      debugShowCheckedModeBanner: false,
      home: MainScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hello world'),
      ),
      body: Center(
        child: TextButton(
					child: const Text('Option 1'),
					style: ButtonStyle(
						enableFeedback: true,
						textStyle: MaterialStateProperty.all(const TextStyle(
							fontWeight: FontWeight.w700,
							fontSize: 34,
							height: 0.82,
						)),
						foregroundColor: MaterialStateProperty.all(Colors.white),
						backgroundColor: MaterialStateProperty.all(Colors.orange),
						padding: MaterialStateProperty.all(const EdgeInsets.all(20)),
					),
					onPressed: () {
						print('tap');
					}, 
      ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 3.0.1, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 3.0.1 at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fb57da5f94 (8 hours ago), 2022-05-19 15:50:29 -0700
    • Engine revision caaafc5604
    • Dart version 2.17.1
    • 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-32, 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)

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7042882/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 1.8.0_242-release-1644-b3-6915495)

[✓] Android Studio
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-1/203.7185775/Android Studio
      Preview.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.8+10-b944.6842174)

[✓] 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

[✓] VS Code (version 1.67.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.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.2.1 21D62 darwin-x64
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 101.0.4951.64

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

• No issues found!

[✓] Flutter (Channel master, 3.1.0-0.0.pre.1013, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 3.1.0-0.0.pre.1013 at /Users/huynq/Documents/GitHub/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 1bf6e0871c (81 minutes ago), 2022-05-30 22:03:11 -0400
    • Engine revision a4d7b6b042
    • Dart version 2.18.0 (build 2.18.0-152.0.dev)
    • DevTools version 2.13.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-32, 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)

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7042882/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 1.8.0_242-release-1644-b3-6915495)

[!] Android Studio
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-1/203.7185775/Android Studio
      Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] 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.67.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.0

[✓] Connected device (4 available)
    • Pixel 3a (mobile)            • 964AY0WL20                           • android-arm64  • Android 12 (API 32)
    • iPad Pro (9.7-inch) (mobile) • 18AFB65F-7639-4B97-86BD-2A60F1B99BBC • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-4
      (simulator)
    • macOS (desktop)              • macos                                • darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)                 • chrome                               • web-javascript • Google Chrome 101.0.4951.64

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

! Doctor found issues in 1 category.

As I see, your flutter SDK is outdated, the latest stable is 3.0.1 and master is 3.1.0-0.0.pre.1013. So, please upgrade SDK to the latest then try again and confirm if this issue is fixed.

yaroslav-kahaniak · 2022-06-09T13:39:37Z

Hey @huycozy ,
I spent additional time on the bug investigation and turned out it was caused by a mistake on my end
Thank you for the help, we can close this Issue

huycozy · 2022-06-10T02:54:05Z

Okay, I'm closing the issue as your above comment.

github-actions · 2022-06-24T03:30:43Z

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.

huycozy added the in triage Presently being triaged by the triage team label May 31, 2022

huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 31, 2022

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 9, 2022

huycozy closed this as completed Jun 10, 2022

huycozy added r: solved Issue is closed as solved and removed in triage Presently being triaged by the triage team labels Jun 10, 2022

github-actions bot locked as resolved and limited conversation to collaborators Jun 24, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WEB] Text does not receive gesture events #104980

[WEB] Text does not receive gesture events #104980

yaroslav-kahaniak commented May 30, 2022 •

edited

huycozy commented May 31, 2022

yaroslav-kahaniak commented Jun 9, 2022 •

edited

huycozy commented Jun 10, 2022

github-actions bot commented Jun 24, 2022

[WEB] Text does not receive gesture events #104980

[WEB] Text does not receive gesture events #104980

Comments

yaroslav-kahaniak commented May 30, 2022 • edited

huycozy commented May 31, 2022

yaroslav-kahaniak commented Jun 9, 2022 • edited

huycozy commented Jun 10, 2022

github-actions bot commented Jun 24, 2022

yaroslav-kahaniak commented May 30, 2022 •

edited

yaroslav-kahaniak commented Jun 9, 2022 •

edited