{"id":19306,"date":"2020-11-05T11:51:30","date_gmt":"2020-11-05T11:51:30","guid":{"rendered":"http:\/\/www.devopsschool.com\/blog\/?p=19306"},"modified":"2020-11-10T11:06:38","modified_gmt":"2020-11-10T11:06:38","slug":"bottom-overflowed-error-caused-by-the-keyboard","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/bottom-overflowed-error-caused-by-the-keyboard\/","title":{"rendered":"[SOLVED] Error: \u201cBottom Overflowed\u201d error caused by the keyboard."},"content":{"rendered":"\n

When Keyboard Appears, then you receive an error: \u201cBottom overflowed by 67 pixels<\/strong>\u201d. In technical terms, the size of the viewport was reduced and it caused an overflow in our layout. See the image below :- <\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

A quick solution<\/strong> would be to block the widgets inside the Scaffold to resize themselves when the keyboard opens but this way, some widgets can be obscured by the keyboard. We can do this using the resizeToAvoidBottomInset<\/span><\/strong><\/code> property on the Scaffold widget<\/strong>.<\/p>\n\n\n\n

Another solution<\/strong> is to wrap the Column widget<\/strong> into a scrollable widget<\/strong>. A built-in widget provided by Flutter<\/strong> which works well is the SingleChildScrollView<\/span><\/code><\/strong> . This is the best solution to avoid the \u201cBottom overflowed<\/em>\u201d<\/strong> error when the keyboard opens.<\/p>\n\n\n\n

<\/p>\n\n\n\n

If it’s not Working then Follow the Below Steps :- <\/p>\n\n\n\n

Method 1:<\/strong> Remove android:windowSoftInputMode=\"adjustResize\"<\/span><\/strong><\/code> from AndroidManifest.xml<\/strong> file (Otherwise it will override flutter code) and add resizeToAvoidBottomPadding: false<\/span><\/strong><\/code> in Scaffold like below:<\/p>\n\n\n

Scaffold(\n      resizeToAvoidBottomPadding: false<\/span>,\n      appBar<\/span>: AppBar()\n)<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Method 2 (Not Recommended) :<\/strong> Just Add android:windowSoftInputMode=\"stateVisible\"<\/span><\/strong><\/code> in android AndroidManifest.xml<\/strong> in activity it will only work for Android <\/strong>an Not for IOS<\/strong> like.<\/p>\n\n\n
<activity<\/span>\n       ...<\/span>\n        android:windowSoftInputMode<\/span>=\"stateVisible\"<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Note:<\/span><\/strong> Don’t set it to android:windowSoftInputMode=\"adjustResize\"<\/code><\/strong><\/p>\n\n\n\n
Thanks for reading.<\/p>\n\n\n\n
Keep Coding. <\/p>\n","protected":false},"excerpt":{"rendered":"
When Keyboard Appears, then you receive an error: \u201cBottom overflowed by 67 pixels\u201d. In technical terms, the size of the viewport was reduced and it caused an overflow in our… <\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[6331],"tags":[6481,6482,6485,6203,6483,6484],"class_list":["post-19306","post","type-post","status-publish","format-standard","hentry","category-flutter","tag-bottom-overflowed","tag-bottom-overflowed-by-67-pixels","tag-column-widget","tag-flutter","tag-scaffold-widget","tag-scrollable-widget"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=19306"}],"version-history":[{"count":8,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19306\/revisions"}],"predecessor-version":[{"id":19359,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19306\/revisions\/19359"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=19306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=19306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=19306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}