How to Fix the Error “Bottom Overflow By XX.XX PIXELS”?

In this article, we will figure out how to solve “Bottom Overflow By XX.XX PIXELS error”, very commonly faced by Flutter Devs. It is simply the bottom overflow issue in a flutter. This issue mainly arises when the user opens the keyboard on both android and IOS devices. If we put multiple widgets or TextField widgets in a single screen and when the user selects the bottom side TextField widget then it will display us an error Bottom overflowed by pixels. This error is caused due to appearing keyboard on the screen. When the keyboard is shown on the 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’s widgets so when the keyboard shows it will push them in Scroll View and the error disappear. Here we will show the example of it:

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({Key? key}) : super(key: key);

  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final formkey = GlobalKey<FormState>();
  TextEditingController emailcontroller = TextEditingController();
  TextEditingController passwordcontroller = TextEditingController();
  TextEditingController firstname = TextEditingController();
  bool togglevisibilty = false;
  @override
  void dispose() {
    emailcontroller.dispose();
    passwordcontroller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: const Text('Login Page'),
        centerTitle: true,
      ),
      body: Form(
        key: formkey,
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          const SizedBox(
            height: 20,
          ),
          const CircleAvatar(
            radius: 60,
            backgroundImage: NetworkImage(
                'https://scontent.fktm8-1.fna.fbcdn.net/v/t39.30808-6/275623083_4821438907975269_5205010758757629932_n.jpg?_nc_cat=110&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=btOY5t5WkE8AX9fNQWS&_nc_ht=scontent.fktm8-1.fna&oh=00_AT_MWF1G3xHUx19TO37cJyOoTMO3rQPqfkw9py8zkMFIDQ&oe=6235BAE9'),
          ),
          const SizedBox(
            height: 20,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              keyboardType: TextInputType.emailAddress,
              enabled: true,
          
              controller: emailcontroller,
              decoration: InputDecoration(
                  focusColor: Colors.green,
                  filled: true,
                  fillColor: Colors.white,
                  focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(100),
                      borderSide: const BorderSide(color: Colors.green)),
                  enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(100),
                      borderSide: const BorderSide(color: Colors.green)),
                  hintText: " Enter the User Name",
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(30))),
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              keyboardType: TextInputType.emailAddress,
              enabled: true,
              validator: (value) {
                if (value!.isEmpty ||
                    !RegExp(r'^[\w-\.][email protected]([\w-]+\.)+[\w]{2,4}')
                        .hasMatch(value)) {
                  return 'Enter correct email';
                } else {
                  return null;
                }
              },
              controller: emailcontroller,
              decoration: InputDecoration(
                  focusColor: Colors.green,
                  filled: true,
                  fillColor: Colors.white,
                  focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(100),
                      borderSide: const BorderSide(color: Colors.green)),
                  enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(100),
                      borderSide: const BorderSide(color: Colors.green)),
                  hintText: " Enter the Email",
                  prefixIcon: const Icon(Icons.email),
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(30))),
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              obscureText: togglevisibilty,
              keyboardType: TextInputType.visiblePassword,
              validator: (password) => password != null && password.length < 5
                  ? 'Enter the min 5 password'
                  : null,
              controller: passwordcontroller,
              decoration: InputDecoration(
                focusColor: Colors.green,
                labelText: "Enter the Password",
                hintText: " Enter the password",
                prefixIcon: const Icon(Icons.lock),
                suffixIcon: IconButton(
                  onPressed: () {
                    setState(() {
                      togglevisibilty = !togglevisibilty;
                    });
                  },
                  icon: togglevisibilty
                      ? const Icon(Icons.visibility_off)
                      : const Icon(Icons.visibility),
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(30),
                ),
              ),
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          buildbutton(),
        ]),
      ),
    );
  }

  buildbutton() {
    return GestureDetector(
      onTap: () {
        if (formkey.currentState!.validate()) {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
              content: Text('Login Successful'),
            ),
          );
        }
      },
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          alignment: Alignment.center,
          height: 50,
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(25),
          ),
          child: const Text(
            "Login",
            style: TextStyle(color: Colors.white, fontSize: 30),
          ),
        ),
      ),
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

overflow issue when keyboard open

So to fix these issues we will Wrap all the child widgets with the help of SingleChildScrollView(). for these The code will be:

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({Key? key}) : super(key: key);

  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final formkey = GlobalKey<FormState>();
  TextEditingController emailcontroller = TextEditingController();
  TextEditingController passwordcontroller = TextEditingController();
  TextEditingController firstname = TextEditingController();
  bool togglevisibilty = false;
  @override
  void dispose() {
    emailcontroller.dispose();
    passwordcontroller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: const Text('Login Page'),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: Form(
          key: formkey,
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
            const SizedBox(
              height: 20,
            ),
            const CircleAvatar(
              radius: 60,
              backgroundImage: NetworkImage(
                  'https://scontent.fktm8-1.fna.fbcdn.net/v/t39.30808-6/275623083_4821438907975269_5205010758757629932_n.jpg?_nc_cat=110&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=btOY5t5WkE8AX9fNQWS&_nc_ht=scontent.fktm8-1.fna&oh=00_AT_MWF1G3xHUx19TO37cJyOoTMO3rQPqfkw9py8zkMFIDQ&oe=6235BAE9'),
            ),
            const SizedBox(
              height: 20,
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextFormField(
                keyboardType: TextInputType.emailAddress,
                enabled: true,
                controller: emailcontroller,
                decoration: InputDecoration(
                    focusColor: Colors.green,
                    filled: true,
                    fillColor: Colors.white,
                    focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(100),
                        borderSide: const BorderSide(color: Colors.green)),
                    enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(100),
                        borderSide: const BorderSide(color: Colors.green)),
                    hintText: " Enter the User Name",
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(30))),
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextFormField(
                keyboardType: TextInputType.emailAddress,
                enabled: true,
                validator: (value) {
                  if (value!.isEmpty ||
                      !RegExp(r'^[\w-\.][email protected]([\w-]+\.)+[\w]{2,4}')
                          .hasMatch(value)) {
                    return 'Enter correct email';
                  } else {
                    return null;
                  }
                },
                controller: emailcontroller,
                decoration: InputDecoration(
                    focusColor: Colors.green,
                    filled: true,
                    fillColor: Colors.white,
                    focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(100),
                        borderSide: const BorderSide(color: Colors.green)),
                    enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(100),
                        borderSide: const BorderSide(color: Colors.green)),
                    hintText: " Enter the Email",
                    prefixIcon: const Icon(Icons.email),
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(30))),
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextFormField(
                obscureText: togglevisibilty,
                keyboardType: TextInputType.visiblePassword,
                validator: (password) => password != null && password.length < 5
                    ? 'Enter the min 5 password'
                    : null,
                controller: passwordcontroller,
                decoration: InputDecoration(
                  focusColor: Colors.green,
                  labelText: "Enter the Password",
                  hintText: " Enter the password",
                  prefixIcon: const Icon(Icons.lock),
                  suffixIcon: IconButton(
                    onPressed: () {
                      setState(() {
                        togglevisibilty = !togglevisibilty;
                      });
                    },
                    icon: togglevisibilty
                        ? const Icon(Icons.visibility_off)
                        : const Icon(Icons.visibility),
                  ),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(30),
                  ),
                ),
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            buildbutton(),
          ]),
        ),
      ),
    );
  }

  buildbutton() {
    return GestureDetector(
      onTap: () {
        if (formkey.currentState!.validate()) {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
              content: Text('Login Successful'),
            ),
          );
        }
      },
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          alignment: Alignment.center,
          height: 50,
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(25),
          ),
          child: const Text(
            "Login",
            style: TextStyle(color: Colors.white, fontSize: 30),
          ),
        ),
      ),
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

overflow issue fix after keyboard opened.

Another issue for the bottom overflow is that whenever we tried to place a larger Sized of Widget (Icon, image). It will also throw an error at the bottom. This issue is mainly caused for the beginner when they try to create some flutter App. This message looks on top of the yellow and black stripes on the part of the flutter screen. This means that the content you have passed to the widget is not sufficient to fix in the place you are trying to fit it. Let’s look at the example for these.

This happened because we tried to fit this icon of a larger size than a Container can accommodate.

One of the ways to fix this instantly is by changing the size of the Icon.

From

    Icon(Icons.add, size:800.0),

to

    Icon(Icons.add, size:300.0),

But, this is not the ultimate way to fix this issue. Instead, we will try to use an Expanded widget which will fix this issue. Like below,

class BottomOverflowScreen extends StatelessWidget {
  const BottomOverflowScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("OverFlow issue Fix "),
          centerTitle: true,
        ),
        body: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: const [
              Expanded(child: Icon(Icons.add, size: 800.0)),
            ]));
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

Thank you for reading the guide on How to Fix the Error “Bottom Overflow By XX.XX PIXELS” In Flutter.

Also Read: Fold Method In Dart And Flutter

Tags: