Flutter - "Overflowed By Pixels" Error on Keyboard Popup

During flutter development, Maybe you've seen this type of error "Overflowed By Pixels" when opening the keyboard or on-screen content is overflowed. What is the reason behind that you getting this error when widget content is overflowed outside the screen. So ln this post I will give you a solution, How to quickly solve this type of error.

Solutions :

Using SignleChildScrollView : 

To solve this error, wrap the body content with SignleChildScrollView().When content widgets are overflowed vertically then widget at the root like below.

 Scaffold(
        appBar: AppBar(
          title: Text("Errorgram"),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [],
          ),
        ));

 

This error may have content widgets are overflowed horizontally, we can change the scroll direction of SignleChildScrollView() widget to horizontal.  

SingleChildScrollView(
     scrollDirection: Axis.horizontal,
)

 

2. Using Wrap Widget :

If the content overflowed horizontally due to Row() widget, the error message will be 'Right overflowed by pixels'. In this case, we can use Wrap() widget instead of Row(), You can see below the example.

Scaffold(
        appBar: AppBar(
          title: Text("Errorgram"),
        ),
        body: Wrap(
          children: [
            Text("Erorgram"),
            SizedBox(
              width: 20,
            ),
            Text("Erorgram"),
            SizedBox(
              width: 20,
            ),
          ],
        ));

 

Full Example:

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Errorgram"),
        ),
        body: Wrap(
          children: [
            Text("Erorgram"),
            SizedBox(
              width: 20,
            ),
            Text("Erorgram"),
            SizedBox(
              width: 20,
            ),
            Text("Erorgram"),
            SizedBox(
              width: 20,
            ),
            Text("Erorgram"),
            SizedBox(
              width: 20,
            ),
            Text("Erorgram"),
            SizedBox(
              width: 20,
            ),
            Text("Erorgram"),
            SizedBox(
              width: 20,
            ),
            Text("Erorgram"),
            SizedBox(
              width: 20,
            )
          ],
        ));
  }
}

Finally, solved the keyboard overflow errors we can solve in these ways. I hope this post will help you.

Tags: