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.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp() class.
|
1 |
void main() => runApp(MyApp()); |
3 Create our main class named as MyApp extends StatelessWidget. In this class we would call CustomView() class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Bottom Oerflowed by Pixels Keyboard')), body: Center( child: CustomView() ) ) ); } } |
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.
|
1 2 3 4 5 |
class CustomView extends StatefulWidget { CustomViewWidget createState() => CustomViewWidget(); } |
5. Create a class named as CustomViewWidget extends State. This is our main child View class.
|
1 2 3 4 |
class CustomViewWidget extends State { } |
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.
|
1 2 3 4 5 |
final fName = TextEditingController(); final lName = TextEditingController(); final subject = TextEditingController(); final className = TextEditingController(); final phoneNumber = TextEditingController(); |
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.
|
1 2 3 4 5 6 7 8 9 |
getValues(){ print(fName.text); print(lName.text); print(subject.text); print(className.text); print(phoneNumber.text); } |
8. Creating Scaffold widget -> Center Widget -> SingleChildScrollView widget -> Column widget -> TextField widgets and Raised Button widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
Widget build(BuildContext context) { return Scaffold( body: Center( child: SingleChildScrollView( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 350, padding: EdgeInsets.all(10.0), child: TextField( controller: fName, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Your First Name Here'), ) ), Container( width: 350, padding: EdgeInsets.all(10.0), child: TextField( controller: lName, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Your Last Name Here'), ) ), Container( width: 350, padding: EdgeInsets.all(10.0), child: TextField( controller: subject, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Your Subject Here'), ) ), Container( width: 350, padding: EdgeInsets.all(10.0), child: TextField( controller: className, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Your Class Here'), ) ), Container( width: 350, padding: EdgeInsets.all(10.0), child: TextField( controller: phoneNumber, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Your Phone Number Here'), ) ), RaisedButton( onPressed: getValues, color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here To Get Text Field Entered Data'), ), ], ), ))); } |
9. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Bottom Oerflowed by Pixels Keyboard')), body: Center( child: CustomView() ) ) ); } } class CustomView extends StatefulWidget { CustomViewWidget createState() => CustomViewWidget(); } class CustomViewWidget extends State { final fName = TextEditingController(); final lName = TextEditingController(); final subject = TextEditingController(); final className = TextEditingController(); final phoneNumber = TextEditingController(); getValues(){ print(fName.text); print(lName.text); print(subject.text); print(className.text); print(phoneNumber.text); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: SingleChildScrollView( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 350, padding: EdgeInsets.all(10.0), child: TextField( controller: fName, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Your First Name Here'), ) ), Container( width: 350, padding: EdgeInsets.all(10.0), child: TextField( controller: lName, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Your Last Name Here'), ) ), Container( width: 350, padding: EdgeInsets.all(10.0), child: TextField( controller: subject, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Your Subject Here'), ) ), Container( width: 350, padding: EdgeInsets.all(10.0), child: TextField( controller: className, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Your Class Here'), ) ), Container( width: 350, padding: EdgeInsets.all(10.0), child: TextField( controller: phoneNumber, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Your Phone Number Here'), ) ), RaisedButton( onPressed: getValues, color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here To Get Text Field Entered Data'), ), ], ), ))); } } |
Screenshots:
thanks… solved my problem
Welcome bro 🙂 .
you saved my day,
thanks from brazil