[Solved] ’Overflowed By Pixels’ Error on Keyboard Popup in Flutter

In this example, we are going to show you the way to solve 'bottom overflowed by pixels' error on the Keyboard popup or on screen content is overflowed. This usually happens when widget content is overflowed outside the screen. See the example below to solve this error.

Solve 'overflowed by pixels' error on Keyboard popup:

Scaffold(
  body: SingleChildScrollView(
    child:Container()
  )
)

To solve this problem, wrap the body content with SignleChildScrollView() widget at the root. 

Body Conent without SingleChildScrollView()	Body Content with SongleChildScrollView()

This is the case when content widgets are overflowed vertically. If content overflowed horizontally, you can change the scroll direction of SignleChildScrollView() widget to horizontal. But this is the best practice if there is no need for a horizontal scroll. 

SingleChildScrollView(
     scrollDirection: Axis.horizontal // or Axis.vertical,
)

If the content overflowed horizontally due to Row() widget, the error message will be 'Right overflowed by pixels'. In this case, use Wrap() widget instead of Row(). Wrap() widget auto breaks row to a new line row on overflow. 

Wrap( 
  children: [
      Card(), //box 1
      Card(), //box 2
      Card()  //box 3
      //if the last card 'box 3' is overflowed,
      // row will break and card 'box 3' will be placed on new row.
  ]
)

Full Code Example:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.redAccent,
      ),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Overflowed by Pixels"),
             backgroundColor: Colors.indigoAccent,
          ),
          body: SingleChildScrollView(
            child:Container(
             padding: EdgeInsets.all(20),
             child: Column(children: [

                 TextField(
                   decoration: InputDecoration( 
                     labelText: "Enter your Name"
                   ),
                 ),

                 TextField(
                   decoration: InputDecoration( 
                     labelText: "Enter your Address"
                   ),
                 ),

                 TextField(
                   decoration: InputDecoration( 
                     labelText: "Enter your Phone Number"
                   ),
                 ),

                 TextField(
                   decoration: InputDecoration( 
                     labelText: "Enter your Country Name"
                   ),
                 ),

                 TextField(
                   decoration: InputDecoration( 
                     labelText: "Enter your Company Name"
                   ),
                 ),

                 TextField(
                   decoration: InputDecoration( 
                     labelText: "Enter your Company Address"
                   ),
                 ),

                 TextField(
                   decoration: InputDecoration( 
                     labelText: "Enter Company Type"
                   ),
                 ),

                 TextField(
                   decoration: InputDecoration( 
                     labelText: "Enter Remarks"
                   ),
                 ),
             ],),
           )
          )
       );
  }
}

In this way, you can solve 'overflowed by pixels' error on the Flutter app.