showDatePicker A RenderFlex overflowed by 5.0 pixels on the bottom

[llearn]

Steps to Reproduce

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      supportedLocales: [const Locale('zh', 'CN')],
    );

Scaffold(
      appBar:AppBar(
        title: new Text(widget.title),
      ),
      body: Center(
          child: RawMaterialButton(
        onPressed: () {
          showDatePicker(
              context: context,
              initialDate: DateTime.now(),
              firstDate: DateTime.now().add(Duration(days: -10)),
              lastDate: DateTime.now().add(Duration(days: 10)));
        },
        child: Text('点击我'),
      )),
    )

Logs

I/flutter (22300): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (22300): The following message was thrown during layout:
I/flutter (22300): A RenderFlex overflowed by 5.0 pixels on the bottom.
I/flutter (22300): 
I/flutter (22300): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter (22300): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (22300): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter (22300): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter (22300): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter (22300): This is considered an error condition because it indicates that there is content that cannot be
I/flutter (22300): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter (22300): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (22300): like a ListView.
I/flutter (22300): The specific RenderFlex in question is:
I/flutter (22300):   RenderFlex#326f6 OVERFLOWING
I/flutter (22300):   creator: Column ← Padding ← DecoratedBox ← ConstrainedBox ← Container ← _DatePickerHeader ← Column
I/flutter (22300):   ← SizedBox ← LayoutBuilder ← OrientationBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← ⋯
I/flutter (22300):   parentData: offset=Offset(16.0, 0.0) (can use size)
I/flutter (22300):   constraints: BoxConstraints(w=298.0, h=100.0)
I/flutter (22300):   size: Size(298.0, 100.0)
I/flutter (22300):   direction: vertical
I/flutter (22300):   mainAxisAlignment: center
I/flutter (22300):   mainAxisSize: max
I/flutter (22300):   crossAxisAlignment: start
I/flutter (22300):   textDirection: ltr
I/flutter (22300):   verticalDirection: down
I/flutter (22300): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter (22300): ════════════════════════════════════════════════════════════════════════════════════════════════════
Reloaded 1 of 412 libraries in 906ms.

Analyzing flutter_app...
No issues found! (ran in 1.9s)

[✓] Flutter (Channel master, v0.5.8-pre.204, on Mac OS X 10.13.6 17G65, locale zh-Hans-CN)
    • Flutter version 0.5.8-pre.204 at /usr/local/flutter
    • Framework revision ed533e9033 (26 hours ago), 2018-08-01 17:03:47 -0700
    • Engine revision 91ff524e63
    • Dart version 2.0.0-dev.69.4.flutter-08f59e5de3

[✓] Android toolchain - develop for Android devices (Android SDK 28.0.1)
    • Android SDK at /data/Android/android-sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.1
    • ANDROID_HOME = /data/Android/android-sdk
    • 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-1024-b01)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.4.1, Build version 9F2000
    • ios-deploy 1.9.2
    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 26.0.1
    • Dart plugin version 173.4700
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[!] IntelliJ IDEA Ultimate Edition (version 2018.1.5)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • For information about installing plugins, see
      https://flutter.io/intellij-setup/#installing-the-plugins

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

[✓] Connected devices (1 available)
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android 9 (API 28) (emulator)

! Doctor found issues in 1 category.

[zoechi]

Somewhat related #18672, #17745

[isaLima21]

Getting the same issue with Iphone 4s and pt-PT locale set for DatePicker.

[nokia6290]

@IsaNascimento There is a temporary solution.

You can modify the flutter file "date_picker.dart" by wrapping _DatePickerDialog with "SingleChildScrollView"
Like in the example:

  Widget child = SingleChildScrollView(
      child: _DatePickerDialog(
    initialDate: initialDate,
    firstDate: firstDate,
    lastDate: lastDate,
    selectableDayPredicate: selectableDayPredicate,
    initialDatePickerMode: initialDatePickerMode,
  )
  );

Side effect: scrolling blue effect is active( haven't figured out how to turn it off ) & once you will try running 'Flutter Upgrade' the file will be overwritten.

[zoechi]

@nokia6290 you can pass https://docs.flutter.io/flutter/widgets/NeverScrollableScrollPhysics-class.html to physics in https://docs.flutter.io/flutter/widgets/SingleChildScrollView/SingleChildScrollView.html

[nokia6290]

thanks zoechi!

[CaiJingLong]

if the MediaData textScaleFactor is bigger than 1.0, then the datepicker will overflower

[lsaudon]

remove padding: const EdgeInsets.symmetric(horizontal: 8.0), in date_picker.dart line 179

but i think the best thing would be to change the margin of the dialog.

[Symous]

@nokia6290 Hi, friend, your solution still not works in my app, but I have found another way to fix this,
modify the height of dayStyle from 1.4 to 1.3 to avoid this in line 98 of data_picker.dart.

final TextStyle dayStyle = headerTextTheme.display1.copyWith(color: dayColor, height: 1.3);

[gabrc52]

Can confirm that DatePicker doesn't handle overflows. If a user has changed their DPI or uses a small phone this could happen.

[sodapay-chris]

Can workaround by updating line 37 of date_picker.dart as follows:

Line 37: change '2' to '1'

Original:
const double _kMaxDayPickerHeight = _kDayPickerRowHeight * (_kMaxDayPickerRowCount + 2);

Edited:
const double _kMaxDayPickerHeight = _kDayPickerRowHeight * (_kMaxDayPickerRowCount + 1);

[dnfield]

I've added the accessibility tag to this because I believe it's being caused when the font used to render the header is larger than expected - such as when a user has text scaling turned on.

Can anyone confirm whether this happens to them if they set text scaling to 1.0?

[dnfield]

A "simple" fix for this might just be to multiple the constant used for the height by the textscalefactor, but I suspect that could get ugly quickly :(

[jackySimon2019]

material/date_picker.dart change the line 48 to
reduice the height of the header for this Date
const double _kDatePickerHeaderPortraitHeight = 60.0;

[dnfield]

The problem is that constant will be wrong for some value of text scaling. We need the values to be aware of the text scale factor.

[ccarbajalp]

Implementing the Symous' solution I found that we can use the conditional operator by adding an extra ckeck about width size. After that the error won't appear again and the standard function will be available for higher resolutions as normal.

[d3xt3r2909]

Is it really possible that flutter team didn't fix this bug? I mean, in a lot of application we need some sort of date picker. And for 1 whole year we are discussing how to modify core files ?

[d3xt3r2909]

I have fixed problem currently by adding new theme for showDatePicker http://prntscr.com/n0x31p in builder part. But as I said, I think that this is very important to have in most of applications and should be fixed ASAP

[dnfield]

My tests locally show that just multiplying the constant by the textScaleFactor works.

I've uploaded a patch for that with a test at the linked PR.

[dnfield]

Spoke too soon - this doesn't work for large values of text scale.

@willlarche - can you or someone from the material team provide some guidance here about making this widget accessible?

[willlarche]

Stand by.

[willlarche]

Still waiting on guidance but it's coming.

[dnfield]

/cc @DarrenGoog who I believe is working on date picker layout things.

[darrenaustin]

Fixed with #31514

[github-actions]

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.