Solve Flutter Bottom overflowed by Pixels Keyboard Error Example Android iOS

Flutter Widgets can resize itself while appearing keyboard or keypad in both android & iOS devices. If we put multiple widgets or TextField widgets in single screen and when user selects bottom side TextField widget than it will display us a error Bottom overflowed by pixels. This error is cause due to appearing keyboard on screen. When keyboard show on screen it will forcefully move up all the widgets causing this error. To solve this error we have to wrap all the child widgets in SingleChildScrollView() widget. The Scroll view widget will enable scrolling in children widgets so when keyboard shows it will push them in Scroll View and the error disappear. So in this tutorial we would Solve Flutter Bottom overflowed by Pixels Keyboard Error Example Android iOS Tutorial.

How this error looks like:

Contents in this project Solve Flutter Bottom overflowed by Pixels Keyboard Error Example Android iOS Tutorial:

1. Import material.dart package in your app’s main.dart file.

2. Create void main runApp() method and here we would call our main MyApp() class.

3 Create our main class named as MyApp extends StatelessWidget. In this class we would call CustomView() class.

4. Create a class named as CustomView extends StatefulWidget. In this class we would make createState() method and enable mutable state management in CustomViewWidget class.

5. Create a class named as CustomViewWidget extends State. This is our main child View class.

6. Create 5 final variables named as fName, lName, subject, className, phoneNumber . We would define them as TextEditingController() object. Using the TextEditingController() we can get entered value of specific TextField widget.

7. Creating a function named as getValues(). We would call this function on button click event. In this function we would print all the Text Input widget entered values in Console window using Print method.

8. Creating Scaffold widget -> Center Widget -> SingleChildScrollView widget -> Column widget -> TextField widgets and Raised Button widget.

9. Complete source code for main.dart file:

Screenshots:

Solve Flutter Bottom overflowed by Pixels Keyboard Error Example Android iOS Solve Flutter Bottom overflowed by Pixels Keyboard Error Example Android iOS

2 Comments

  1. thanks… solved my problem

Leave a Reply

Your email address will not be published. Required fields are marked *