Flutter: how to fix bottom overflow

问题

I have a Flutter Widget with a column layout that has two Containers, one of which has a ListView.builder. When the page renders I get a

bottom overflow by 169px

and I'm not sure how to fix it.

I've googled around for solutions and have tried various things like wrapping one or more of the Containers in the widget in an Expanded widget, but that doesn't work either. If I wrap just the Container that has the FutureBuilder inside of it in an Expanded, then the ListView doesn't render at all and I see errors like:

I/flutter ( 3516): Another exception was thrown: RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter ( 3516): Another exception was thrown: RenderBox was not laid out: RenderFlex#0caf9 relayoutBoundary=up2 NEEDS-PAINT
I/flutter ( 3516): Another exception was thrown: RenderBox was not laid out: RenderFlex#963f4 relayoutBoundary=up1 NEEDS-PAINT
I/flutter ( 3516): Another exception was thrown: NoSuchMethodError: The method '<=' was called on null.

This is what the build function of my Widget looks like:

  Widget build(BuildContext context) {
    return Container(
        child: Column(children: <Widget>[
      Container(
          height: 40,
          color: Colors.grey.withOpacity(0.5),
          child: Padding(
              padding: const EdgeInsets.fromLTRB(10.0, 2.0, 10.0, 2.0),
              child: TextField(
                  autofocus: false,
                  controller: searchFilterController,
                  keyboardType: TextInputType.text,
                  maxLines: 1,
                  decoration: InputDecoration(
                      border: InputBorder.none,
                      filled: true,
                      fillColor: Colors.white.withOpacity(1),
                      hintText: 'Search',
                      suffixIcon: Icon(
                        Icons.search,
                        color: Colors.grey,
                      )),
                  onChanged: (value) {
                    filter = value;
                  }))),

      Container(
          child: FutureBuilder<UserPantry>(
        future: UserPantryDao.getUserPantry(widget.userId),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            widget.ingredientList.clear();
            if (filter == null || filter.trim() == "") {
              widget.ingredientList.addAll(snapshot.data.ingredients);
            } else {
              for (UserIngredient ingredient in snapshot.data.ingredients) {
                if (ingredient.ingredient.name
                    .toLowerCase()
                    .contains(filter.toLowerCase())) {
                  widget.ingredientList.add(ingredient);
                }
              }
            }

            return ListView.builder(
                shrinkWrap: true,
                itemCount: widget.ingredientList.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                      title: Text(
                    widget.ingredientList[index].ingredient.name,
                    style: TextStyle(fontSize: 20.0),
                  ));
                });
          } else if (snapshot.hasError) {
            print(snapshot.error);
            return Text(
                "An error occurred while loading your pantry. Please try again.");
          }
          //By default just show an empty container.
          return Container();
        },
      ))
    ]));
  }

回答1:

Just wrap your FutureBuilder<UserPantry> in an Expanded widget and remove the Container because you don't need it at all here.

 Expanded(
        child: FutureBuilder<UserPantry>(
           future: UserPantryDao.getUserPantry(widget.userId),
   ...

This happens because you're giving unbounded constraints to the ListView. Another option, would be adding some height constraint to the ListView parent, such as setting the height in the Container to something.

回答2:

Try remove the Container outside, and wrap the list in a expanded. As @Miguel Ruivo answered, ListView must have a bounded constraints.

Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Container(
          height: 40,
          color: Colors.grey.withOpacity(0.5),
          child: Padding(
              padding: const EdgeInsets.fromLTRB(10.0, 2.0, 10.0, 2.0),
              child: TextField(
                  autofocus: false,
                  controller: searchFilterController,
                  keyboardType: TextInputType.text,
                  maxLines: 1,
                  decoration: InputDecoration(
                      border: InputBorder.none,
                      filled: true,
                      fillColor: Colors.white.withOpacity(1),
                      hintText: 'Search',
                      suffixIcon: Icon(
                        Icons.search,
                        color: Colors.grey,
                      )),
                  onChanged: (value) {
                    filter = value;
                  }))),
      Expanded(
          child: FutureBuilder<UserPantry>(
        future: UserPantryDao.getUserPantry(widget.userId),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            widget.ingredientList.clear();
            if (filter == null || filter.trim() == "") {
              widget.ingredientList.addAll(snapshot.data.ingredients);
            } else {
              for (UserIngredient ingredient in snapshot.data.ingredients) {
                if (ingredient.ingredient.name
                    .toLowerCase()
                    .contains(filter.toLowerCase())) {
                  widget.ingredientList.add(ingredient);
                }
              }
            }

            return ListView.builder(
                shrinkWrap: true,
                itemCount: widget.ingredientList.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                      title: Text(
                    widget.ingredientList[index].ingredient.name,
                    style: TextStyle(fontSize: 20.0),
                  ));
                });
          } else if (snapshot.hasError) {
            print(snapshot.error);
            return Text(
                "An error occurred while loading your pantry. Please try again.");
          }
          //By default just show an empty container.
          return Container();
        },
      ))
    ]);
  }

来源：https://stackoverflow.com/questions/56419735/flutter-how-to-fix-bottom-overflow