Show DatePicker when keyboard is open throws an exception

The error message on the bottom of the dialog BOTTOM OVERFLOWED BY 67 PIXELS only appears for a few moments, and when the keyboard closes, it disappears.

Logs

I/flutter ( 5633): The following message was thrown during layout:
I/flutter ( 5633): A RenderFlex overflowed by 67 pixels on the bottom.
I/flutter ( 5633):
I/flutter ( 5633): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 5633): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 5633): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter ( 5633): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter ( 5633): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter ( 5633): This is considered an error condition because it indicates that there is content that cannot be
I/flutter ( 5633): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter ( 5633): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter ( 5633): like a ListView.
I/flutter ( 5633): The specific RenderFlex in question is:
I/flutter ( 5633):   RenderFlex#a2b29 relayoutBoundary=up7 OVERFLOWING
I/flutter ( 5633):   creator: Column ← SizedBox ← LayoutBuilder ← OrientationBuilder ← DefaultTextStyle ←
I/flutter ( 5633):   AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#71507 ink renderer] ←
I/flutter ( 5633):   NotificationListener<LayoutChangedNotification> ← CustomPaint ← _ShapeBorderPaint ← PhysicalShape
I/flutter ( 5633):   ← _MaterialInterior ← ⋯
I/flutter ( 5633):   parentData: <none> (can use size)
I/flutter ( 5633):   constraints: BoxConstraints(w=330.0, 0.0<=h<=420.9)
I/flutter ( 5633):   size: Size(330.0, 420.9)
I/flutter ( 5633):   direction: vertical
I/flutter ( 5633):   mainAxisAlignment: start
I/flutter ( 5633):   mainAxisSize: min
I/flutter ( 5633):   crossAxisAlignment: stretch
I/flutter ( 5633):   verticalDirection: down
I/flutter ( 5633): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter ( 5633): ════════════════════════════════════════════════════════════════════════════════════════════════════

Flutter Doctor

[✓] Flutter (Channel master, v0.5.5-pre.46, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] Android Studio (version 3.1)
[✓] VS Code (version 1.24.1)
[✓] Connected devices (2 available)

• No issues found!

@Hixie

@Hixie

When the keyboard appears your app, including the dialog, is being resized to make room for it. This would also happen if you changed the device's orientation from portrait to landscape.

Wrapping the dialog's widget - the one you're building with showDialog's builder parameter - in a SingleChildScrollView or a ListView or a ClipRect (per the error message) will make it resizable.

When I use the Dialog inside a SingleChildScrollView (like the example code below) it solves the problem but creates 2 issues more.
1- The dialog can't be dismissed,
2- The dialog is not being centered in the vertical axis.

showDialog(
  context: context,
  builder: (BuildContext context) => new SingleChildScrollView(
    child: new Dialog(
      child: new Container(
        height: 600.0,
      ),
    ),
  ),
);

When I use the SingleChildScrollView inside a Dialog (like the example code below) it solves the problem and the issues mentioned above don't appear.

showDialog(
  context: context,
  builder: (BuildContext context) => new Dialog(
    child: new SingleChildScrollView(
      child: new Container(
        height: 600.0,
      ),
    ),
  ),
);

If I am using ClipRect inside or outside the Dialog, it solves the problem too and the issues above don't happen.

I'm making use of showDatePicker() method too that is inside of date_picker.dart from the package:flutter/material.dart. The only way I can solve the problem [BOTTOM OVERFLOWED BY 67 PIXELS] is by making use of SingleChildScrollView inside the Dialog widget in the line 938 of date_picker.dart.

Line 938:      final Dialog dialog = Dialog( 
Line 939:        child: SingleChildScrollView(
Line 940:          // ...

But when I rotate the screen, it looks like this:

Is there a way to solve it without modifying the code inside date_picker.dart class?

@nesscx

These issues have been open for more than a month, is there an alternative? Because this error did not happen in previous versions of Flutter.

@nesscx This solution of SingleChildScrollView does not show the CANCEL and OK buttons, so it does not work

@Hixie

@rafaelcb21

@rafaelcb21 The solution of using SingleChildScrollView only works for dialogs components like SingleDialog, AlertDialog, ..., it doesn't work for datePickerDialog. When you wrap the Dialog component of the DateTimePicker class with the scroll view, then it shows incomplete (without the cancel and ok buttons) because the DateTimePicker dialog doesn't turn to "horizontal mode", I don't know why...

This is the expected behavior (horizontal mode)

But instead, it is being render in "vertical mode"...

Hitting this problem on an app that is due to go to student phones, which are by definition fairly cheap and small (480x800).

Yes, well. Out of desperation I edited date_picker.dart. Removed the 'two extra rows' they speak of and bingo!

// Two extra rows: one for the day-of-week header and one for the month header.
const double _kMaxDayPickerHeight = _kDayPickerRowHeight * (_kMaxDayPickerRowCount);// + 2);

Not a good solution however.

The spacing around each of the days is smaller when landscape, so I'm not sure why that couldn't squeeze when the screen is smaller. But I'm sure thats a possible PR as well.

…

On Fri, Aug 3, 2018 at 7:17 AM Andrious Solutions ***@***.***> wrote: Yes, well. Out of desperation I edited date_picker.dart. Removed the 'two extra rows' they speak of and bingo! // Two extra rows: one for the day-of-week header and one for the month header. const double _kMaxDayPickerHeight = _kDayPickerRowHeight * (_kMaxDayPickerRowCount);// + 2); Not a good solution however. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#18672 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADZ2DQ3L-mNPAQHZ6t7F49teDNPupaEks5uM1BXgaJpZM4Ux-Qc> .

-- --- Richard Vowles, Full stack - from Kubernetes, through Node & Java, Web and Mobile development in Flutter - software developer for hire! ph: +64275467747, web: www.google.com/+RichardVowles

My solution for this situation:

return GestureDetector(
  onTap: () => Navigator.of(context).pop(),
  child: Container(
    alignment: Alignment.center,
    child: SingleChildScrollView(
      child: dialog,
    ),
  ),
);

Facing the same issue (eg. iPhone X simulator) > showDatePicker with open keyboard throws exception
Any updates here?

I came up with the following workaround for this problem:

// hide keyboard before showing date picker
FocusScope.of(context).requestFocus(new FocusNode());
// add a delay just to be sure that keyboard is no longer visible
await Future.delayed(Duration(milliseconds: 300));
// show a date picker
var date = await showDatePicker(...)

In my case I have to show dialog with TextFormField, so I need keyboard )

I came up with the following workaround for this problem:
// hide keyboard before showing date picker
FocusScope.of(context).requestFocus(new FocusNode());
// add a delay just to be sure that keyboard is no longer visible
await Future.delayed(Duration(milliseconds: 300));
// show a date picker
var date = await showDatePicker(...)
In my case I have to show dialog with TextFormField, so I need keyboard )

This is the only viable option I've seen for this specific test case. Thank you.

When another text input is open in the form, and the keyboard is open…

Removing render overflow error when keyboard open

Problem is relevant.

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.12.13+hotfix.7, on Microsoft Windows [Version 10.0.17763.914], locale ru-RU)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Android Studio (version 3.5)
[√] VS Code (version 1.42.0)
[√] Connected device (1 available)

@Dinver

Hi @Dinver @ianloic
To better address the issue, would be helpful
if you could post a minimal code sample to reproduce the problem

No exception when opening datepicker while keyboard is open

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Center(
        child: Container(
          child: TextField(),
        ),
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            showDatePicker(
              context: context,
              initialDate: DateTime.now(),
              firstDate: DateTime(2018),
              lastDate: DateTime(2030),
              builder: (BuildContext context, Widget child) {
                return Theme(
                  data: ThemeData.dark(),
                  child: child,
                );
              },
            );
          }),
    );
  }
}

Thank you

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. Please don't hesitate to comment on the bug if you have any more information for us; we will reopen it right away!
Thanks for your contribution.

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

Show DatePicker when keyboard is open throws an exception #18672

Logs

Flutter Doctor

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Show DatePicker when keyboard is open throws an exception #18672

Description

Logs

Flutter Doctor

Activity

zoechi commented on Jun 21, 2018

HansMuller commented on Jun 21, 2018

nesscx commented on Jun 21, 2018

rafaelcb21 commented on Jul 25, 2018

nesscx commented on Jul 26, 2018

rvowles commented on Jul 28, 2018

Andrious commented on Aug 2, 2018

rvowles commented on Aug 2, 2018

turkovsky commented on Aug 29, 2018

pdefuns commented on Sep 20, 2018

1 remaining item

turkovsky commented on Oct 3, 2018

stanchanpsu commented on Feb 14, 2019

Dinver commented on Feb 11, 2020

TahaTesser commented on Apr 22, 2020

no-response commented on May 29, 2020

github-actions commented on Aug 1, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions