Repository navigation
Clipped text in CupertinoTextSelectionToolbar children #133140
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
- flutter create cupertino_selection_toolbar
- Paste the provided example code
- flutter run
Expected results
Text isn't clipped in the toolbar
Actual results
Text clipped in the toolbar at the bottom. Note that the same text when wrapped in CupertinoTextSelectionToolbarButton.text only is displayed correctly.
Code sample
Code sample
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CupertinoTextSelectionToolbarButton.text(
onPressed: () {},
text: 'Lorem ipsum',
),
CupertinoTextSelectionToolbarButton.text(
onPressed: () {},
text: '这是黑体',
),
CupertinoTextSelectionToolbarButton.text(
onPressed: () {},
text: 'ក្ក្ដីថ្លៃថ្នូ'
),
SizedBox(
width: 450.0,
height: 200.0,
child: CupertinoTextSelectionToolbar(
anchorAbove: Offset.zero,
anchorBelow: Offset.zero,
children: <Widget>[
CupertinoTextSelectionToolbarButton.text(
onPressed: () {},
text: 'Lorem ipsum',
),
CupertinoTextSelectionToolbarButton.text(
onPressed: () {},
text: '这是黑体',
),
CupertinoTextSelectionToolbarButton.text(
onPressed: () {},
text: 'ក្ក្ដីថ្លៃថ្នូ'
),
],
),
)
],
),
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
No response
Flutter Doctor output
Doctor output
% flutter doctor -v
[✓] Flutter (Channel master, 3.14.0-9.0.pre.52, on macOS 13.4.1 22F770820d darwin-arm64, locale en-ES)
• Flutter version 3.14.0-9.0.pre.52 on channel master at /Users/tgucio/Library/Frameworks/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 4bbcb780a6 (8 hours ago), 2023-08-23 00:53:44 -0400
• Engine revision 7d56840865
• Dart version 3.2.0 (build 3.2.0-97.0.dev)
• DevTools version 2.26.2
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
• Android SDK at /Users/tgucio/Library/Android/sdk
• Platform android-33, build-tools 33.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E222b
• CocoaPods version 1.12.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.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 17.0.6+0-17.0.6b802.4-9586694)
[✓] VS Code (version 1.81.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.70.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.4.1 22F770820d darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 116.0.5845.96
[✓] Network resources
• All expected network resources are available.
• No issues found!
%
Activity
tgucio commentedon Aug 23, 2023
This appears to be because
CupertinoTextSelectionToolbaruses a fixed height instead of adjusting its height to content:/cc @luccasclezar @justinmc
danagbemava-nc commentedon Aug 23, 2023
Reproducible using the code sample provided above.
flutter doctor -v
luccasclezar commentedon Aug 25, 2023
@tgucio Hey, I just changed the height from 43 to 45 😅 I think it would be needed to calculate the size of each of the children and set the bar height to the height of the tallest child, but I don't have the time to do that now.
tgucio commentedon Aug 25, 2023
@luccasclezar ah you're right, the toolbar had a fixed height before too :). Yeah, I guess the only way to accomodate all scripts will be to position and size the whole toolbar to the height of the tallest of its children.
tgucio commentedon Aug 26, 2023
I'll take a stab at addressing this in #133386.
xster commentedon Sep 19, 2023
this is seemingly reproducible live on the Kijiji app
xster commentedon Sep 19, 2023
@justinmc @MitchellGoodwin we should make sure we have tests for these, to avoid clipping from changing system font size etc.
github-actions commentedon Oct 6, 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 -vand a minimal reproduction of the issue.