Material showTimePicker (input mode) actions overflow when using longer confirm and cancel text #162796
Description
Steps to reproduce
- Use the
showTimePickerfunction with longercancelTextand/orconfirmText - Switch to
TimePickerEntryMode.inputmode - Actions don't fit on a single line, get stacked vertically, and overflow
For localisation reasons we use different texts for the confirm and cancel button. Since most languages are longer than english, this is causing the actions to no longer fit on a single line.
Doesn't become an issue as quickly on devices using a 12h time format since it provides more width to the dialog, though with enough length it still does eventually.
The size of the dialog seems to be decided by _kTimePickerInputSize in time_picker.dart line 2237
Expected results
Time picker dialog adjusts size and/or becomes scrollable to prevent the overflow of actions
Actual results
Time picker dialog remains the same size and the actions overflow when they become to wide to fit horizontally.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Builder(
builder: (context) {
return FilledButton(
onPressed: () => showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
cancelText: 'Long cancel',
confirmText: 'Long confirm',
initialEntryMode: TimePickerEntryMode.input,
),
child: Text('Show time picker'),
);
},
),
),
),
);
}
}
Screenshots or Video
Screenshots / Video demonstration
Logs
Logs
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#cd626 relayoutBoundary=up1 OVERFLOWING:
needs compositing
creator: Column ← _TimePickerModel ← _TimePicker ← _FormScope ← WillPopScope ←
Form-[LabeledGlobalKey<FormState>#de586] ← Expanded ← Column ← ConstrainedBox ← Container ←
AnimatedContainer ← _SingleChildViewport ← ⋯
parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight (can use size)
constraints: BoxConstraints(0.0<=w<=248.0, h=120.0)
size: Size(248.0, 120.0)
direction: vertical
mainAxisAlignment: start
mainAxisSize: min
crossAxisAlignment: center
verticalDirection: down
spacing: 0.0
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: A RenderFlex overflowed by 20 pixels on the bottom.Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.27.3, on macOS 15.3 24D60 darwin-arm64, locale en-NL)
• Flutter version 3.27.3 on channel stable at /Users/MyUser/Development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision c519ee916e (2 weeks ago), 2025-01-21 10:32:23 -0800
• Engine revision e672b006cb
• Dart version 3.6.1
• DevTools version 2.40.2
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
• Android SDK at /Users/MyUser/Library/Android/sdk
• Platform android-35, build-tools 35.0.0
• ANDROID_HOME = /Users/MyUser/Library/Android/sdk
• ANDROID_SDK_ROOT = /Users/MyUser/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16C5032a
• CocoaPods version 1.16.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2024.1)
• 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.11+0-17.0.11b1207.24-11852314)
[✓] VS Code (version 1.96.4)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.104.0
[✓] Connected device (5 available)
• sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 14 (API 34)
(emulator)
• iPhone 16 Pro Max (mobile) • 16510E30-C714-4E22-B587-64BFEA7B4182 • ios •
com.apple.CoreSimulator.SimRuntime.iOS-18-2 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 15.3 24D60
darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 15.3 24D60
darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome
133.0.6943.53
! Error: Browsing on the local area network for iPhone. Ensure the device is unlocked and attached with a cable
or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources
• All expected network resources are available.
• No issues found!