Repository navigation
Show DatePicker when keyboard is open throws an exception #18672
Description
Activity
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
Dialoginside aSingleChildScrollView(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
SingleChildScrollViewinside aDialog(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
ClipRectinside or outside theDialog, it solves the problem too and the issues above don't happen.
I'm making use of
showDatePicker()method too that is inside ofdate_picker.dartfrom thepackage:flutter/material.dart. The only way I can solve the problem [BOTTOM OVERFLOWED BY 67 PIXELS] is by making use ofSingleChildScrollViewinside the Dialog widget in the line 938 ofdate_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.dartclass?Reacted by Figen Güngör- When I use the
@rafaelcb21 The solution of using
SingleChildScrollViewonly works for dialogs components like SingleDialog, AlertDialog, ..., it doesn't work for datePickerDialog. When you wrap the Dialog component of theDateTimePickerclass 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.
Reacted by Antony Carrizo and Michael Muniz- 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?1 remaining item
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 )
Reacted by Stanley Chan, Javier, Richard Dodd and Nihad DelicI 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.
- added this to the milestone
on Feb 14, 2019 - added 2 commits that reference this issue
on Apr 27, 2019 - changed the title
[-]Show dialog with high height when keyboard is open throws an exception[/-][+]Show DatePicker when keyboard is open throws an exception[/+]on May 6, 2019 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)Hi @Dinver @ianloic
To better address the issue, would be helpful
if you could post a minimal code sample to reproduce the problemNo 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 -vand a minimal reproduction of the issue.- locked as resolved and limited conversation to collaborators
on Aug 1, 2021
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
Flutter Doctor