I am trying to wrap my Column widget in a SingleChildScrollView but not able to

Question

I am trying to wrap my column widget in a single child scroll view since I am getting overflow. But when I am trying to wrap it, I am receiving errors such as

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

RenderBox was not laid out: RenderFlex#dc736 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1930 pos 12: 'hasSize'

What can I do to prevent overflow of pixels in my app? Here is my code:

return Scaffold(
          appBar: AppBar(
            title: Text('Edit your pet`s details'),
            backgroundColor: Color.fromRGBO(101, 69, 112, 1.0),
          ),
            body: Container(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    children: <Widget> [
                      Row(
                        children: <Widget>[
                          Expanded(
                              child: TextFieldWidget(
                                controller: _petNameController,
                                helperText: "Pet's Name",
                              )),
                        ],
                      ),
                      Padding(
                        padding: const EdgeInsets.only(left: 50.0, right: 50.0),
                        child: Divider(
                          color: Colors.grey,
                          thickness: 0.5,
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          SizedBox(height: 60.0,),
                          Text(
                            "$_petName is a $_petGender. Update gender",
                            style: TextStyle(
                              fontSize: 20.0,
                              fontWeight: FontWeight.w400,
                            ),
                          )
                        ],
                      ),
                      Expanded(
                        child: GridView.count(
                          crossAxisCount: 2,
                          primary: false,
                          scrollDirection: Axis.vertical,
                          children: List.generate(petGenders.length, (index) {
                            return GestureDetector(
                                child: Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Card(
                                    shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(12.0)),
                                    color:
                                    selectedIndex == index ? primaryColor : null,
                                    child: Column(
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      children: <Widget>[
                                        petGenders[petKeys[index]],
                                        SizedBox(
                                          height: 15.0,
                                        ),
                                        Text(
                                          petKeys[index],
                                          style: TextStyle(
                                              color: selectedIndex == index
                                                  ? Colors.white
                                                  : null,
                                              fontSize: 18.0,
                                              fontWeight: FontWeight.w600),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                                onTap: () {
                                  setState(() {
                                    widget.pet.gender = petKeys[index];
                                    selectedIndex = index;
                                  });
                                });
                          }),
                        ),
                      ),

Answer 1

The error comes from the fact that your Column contains an Extended widget, which forces to use the maximum vertical space. The SingleScrollChildView has no limit to vertical space it can use.

The result is that you have a widget that try to take an infinite vertical space.

How can you fix that? Either, remove the Extended widget, or the SingleScrollChildView widget. Or, you can also wrap your Extended widget with another widget with a defined size or constraints like a Container with the properties height and width .