Question 244710 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – A RenderFlex overflowed using a virtual keyboard

I have a simple form that looks nice and works great. I removed unnecessary information:

@override
  Widget build(BuildContext context) {
    return Form(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Field1'),
          SizedBox(height: 24.0),
          Text('Field2'),
          SizedBox(height: 24.0),
          Text('Field3'),
          SizedBox(height: 24.0),
          Text('Field4'),
          SizedBox(height: 24.0),
          Text('Field15'),
          Spacer(),
          Padding(
            padding: const EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 24.0),
            child: Container(
              width: double.maxFinite,
              height: 50,
              child: ElevatedButton(
                onPressed: () {
                  if (_personFormKey.currentState!.validate()) {
                    ...
                  }
                },
                child: const Text('Add'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

But as soon as I start filling out the fields, the virtual keyboard appears and the following error pops up:

A RenderFlex overflowed by 47 pixels on the bottom

How to fix it?

Edit1. When I wrap my Column with SingleChildScrollView, I get a white screen instead of my form and this error:

The following assertion was thrown during paint():
RenderBox was not laid out: RenderRepaintBoundary#75be1 relayoutBoundary=up2 NEEDS-PAINT
‘package:flutter/src/rendering/box.dart’:
Failed assertion: line 1965 pos 12: ‘hasSize’

Edit2. When I use ListView the old error does not occur. However, I see in the log the information:

Incorrect use of ParentDataWidget.

The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.

Edit3. I think I know what the problem is. If I comment out Spacer(), then everything works great. But then another question arises.

What should be used instead? Because I would like the ElevatedButton to be at the bottom of the screen, which is what happens now when Spacer is used.

Tags:

2

Answers


  1. 0

    Wrap you Column with SingleChildScrollView

         @override
  Widget build(BuildContext context) {
    return Form(
      child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Field1'),
            SizedBox(height: 24.0),
            Text('Field2'),
            SizedBox(height: 24.0),
            Text('Field3'),
            SizedBox(height: 24.0),
            Text('Field4'),
            SizedBox(height: 24.0),
            Text('Field15'),
            Spacer(),
            Padding(
              padding: const EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 24.0),
              child: Container(
                width: double.maxFinite,
                height: 50,
                child: ElevatedButton(
                  onPressed: () {
                    if (_personFormKey.currentState!.validate()) {
                    ...
                  }
                  },
                  child: const Text('Add'),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
    Login or Signup to reply.
  2. 0

    Here are a few solutions you can consider to resolve this issue:

    Wrap your Column with a SingleChildScrollView:

    You can wrap your Column with a SingleChildScrollView to make the content scrollable when it overflows. This will allow users to scroll down to access fields that are hidden due to the virtual keyboard.

    return SingleChildScrollView(
  child: Form(
    child: Column(
      // Your existing column content here...
    ),
  ),
);

    Use the ListView widget:

    Instead of a Column, consider using a ListView widget. ListView is scrollable by default, and it can automatically handle overflow issues.

    Copy code
return Form(
  child: ListView(
    children: [
      // Your existing list of widgets here...
    ],
  ),
);

    Edit

    If you need to make the button at the bottom position you need to use the stack and position widgets

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

  @override
  State<ExampleWidget> createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          const SingleChildScrollView(
            child: Form(
              child: Column(
                children: [
                  Text('Field1'),
                  SizedBox(height: 24.0),
                  Text('Field2'),
                  SizedBox(height: 24.0),
                  Text('Field3'),
                  SizedBox(height: 24.0),
                  Text('Field4'),
                  SizedBox(height: 24.0),
                  Text('Field15'),
                ],
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Padding(
              padding: const EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 24.0),
              child: SizedBox(
                width: double.maxFinite,
                height: 50,
                child: ElevatedButton(
                  onPressed: () {
                    // if (_personFormKey.currentState!.validate()) {
                    // ...
                    // }
                  },
                  child: const Text('Add'),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search