drawing of text selection menu looks wrong on iOS

On iOS, when you tap on a text field, you get a segmented menu with commands for basic text options like copy, paste, and select all. This menu is rendered rendered as white on black with rounded corners and white lines to separate the segments. There is also a small downward chevron pointing at the text. The vertical white lines cut through this chevron, which is otherwise fully connected to the menu.

On Flutter, the vertical white lines stop at the chevron and the chevron is also disconnected from the menu. The horizontal gap is not quite as large as the vertical lines, which causes it to look rather "fake" (honestly, had the gaps all been the same size, I might not have noticed?...), the white lines aren't thick enough to be white (and so are being rendered as grey), and they don't cut through the chevron.

(It is also worth noting it is rather difficult to get this menu on iOS into a position where it cuts a line into the chevron location at all: Apple seems to be going out of their way to make that not happen ;P.)

The font weight also seems to be a bit different? This could be related to the discussion on #22572.

The color if you select an item (by tapping and holding for a second) is definitely a much darker grey.

(I think this component is a TextSelectionToolbar? FWIW: I'm not claiming this issue is at all priority for me, but I noticed it and I figured I could document it so that if someone ever had a chance to look at it it would be clear what was going on; and the gaps with the chevron do make the menu feel really fake.)

[✓] Flutter (Channel beta, v0.11.10, on Mac OS X 10.14 18A391, locale en-US)
    • Flutter version 0.11.10 at /Users/saurik/bin/flutter-0.9.4~b
    • Framework revision c27c4a265e (17 hours ago), 2018-11-26 17:07:24 -0500
    • Engine revision eebc6a5895
    • Dart version 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)

[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    • Android SDK at /Users/saurik/Library/Android/sdk
    • Android NDK at /Users/saurik/Library/Android/sdk/ndk-bundle
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 10.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.0, Build version 10A255
    • ios-deploy 2.0.0
    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 29.1.1
    • Dart plugin version 181.5656
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)

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

[✓] Connected device (1 available)
    • Jay’s iPhone • [redacted] • ios • iOS 12.0

• No issues found!

#11274 looks related

To go further on what Apple seems to be doing with the position of the menu based on the behavior I'm seeing: they seem to figure out what buttons they can fit to figure out the width of the menu they want to render, and then if they have the room to do so they move the menu left/right to avoid cutting a white line through the chevron (and so the only way you can get it to actually do that is to end up in a state where the buttons it wants to render happen to be about the same width as the screen, so it will not have any leeway to move the toolbar to avoid the chevron cut).

Oh, and Flutter doesn't even seem to be rendering the chevron to point at the selected text... so you end up in situations where there what looks to be a toolbar floating over to the side pointing at something entirely unrelated to what you were trying to edit ;P. Instead, the chevron is always just pointing down from the middle of the toolbar. Even when there is room for everything, Flutter has the chevron pointing further to the left than it should be (but I think that is already documented as another issue? I can't find it now, though; it might be that I'm confusing it with another issue).

@saurik

Hi @saurik
I can't reproduce this in the current dev and stable channel.

Closing this as probably fixed. Please comment below and I will reopen it.

Complete sample code

import 'package:flutter/material.dart';

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

class TextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Text Wrap Demo',
        theme: ThemeData(
          primarySwatch: Colors.deepOrange,
        ),
        home: Scaffold(
          body: Center(
            child: TextField(),
          ),
        ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel dev, 1.21.0-1.0.pre, on Mac OS X 10.15.5 19F101, locale
    en-AO)
    • Flutter version 1.21.0-1.0.pre at /Users/pedro/dev/SDKs/flutter_dev
    • Framework revision f25bd9c55c (9 days ago), 2020-07-14 20:26:01 -0400
    • Engine revision 99c2b3a245
    • Dart version 2.9.0 (build 2.9.0-21.0.dev 20bf2fcf56)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/pedro/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Users/pedro/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6514223/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

[✗] Chrome - develop for the web (Cannot find Chrome executable at
    /Applications/Google Chrome.app/Contents/MacOS/google-chrome-unsafe)
    ! /Applications/Google Chrome.app/Contents/MacOS/google-chrome-unsafe is not
      executable.

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] Android Studio (version 4.0)
    • Android Studio at /Users/pedro/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6514223/Android
      Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (3 available)
    • AOSP on IA Emulator (mobile) • emulator-5554 • android-x86    • Android 9
      (API 28) (emulator)
    • macOS (desktop)              • macos         • darwin-x64     • Mac OS X
      10.15.5 19F101
    • Web Server (web)             • web-server    • web-javascript • Flutter
      Tools

! Doctor found issues in 1 category.

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.

Navigation Menu

Repository navigation

drawing of text selection menu looks wrong on iOS #24784

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

drawing of text selection menu looks wrong on iOS #24784

Description

Activity

zoechi commented on Nov 27, 2018

saurik commented on Nov 27, 2018

pedromassangocode commented on Jul 24, 2020

github-actions commented on Aug 14, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions