A RenderFlex overflowed by Infinity pixels on the bottom

问题

I have a very simple control where I am trying to show a DrodownButton with a couple of TextFields. When the app runs in the emulator, I get an error saying "BOTTOM OVERFLOWED BY Infinity PIXELS". The stack trace hints at the issue and points me some relevant documentation, but being very new to Flutter, I'm not sure what needs to change. I have tried all the suggestions based on looking at questions about similar errors, but have not had any luck.

I/flutter (10708): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (10708): The following assertion was thrown during performLayout():
I/flutter (10708): RenderIndexedStack object was given an infinite size during layout.
I/flutter (10708): This probably means that it is a render object that tries to be as big as possible, but it was put
I/flutter (10708): inside another render object that allows its children to pick their own size.
I/flutter (10708): The nearest ancestor providing an unbounded width constraint is:
I/flutter (10708):   RenderFlex#1d3ef relayoutBoundary=up7 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (10708):   creator: Row ← Padding ← Container ← DefaultTextStyle ← Stack ← Listener ← _GestureSemantics ←
I/flutter (10708):   RawGestureDetector ← GestureDetector ← Semantics ← DropdownButton<String> ← Column ← ⋯
I/flutter (10708):   parentData: offset=Offset(0.0, 0.0) (can use size)
I/flutter (10708):   constraints: BoxConstraints(0.0<=w<=391.4, 0.0<=h<=Infinity)
I/flutter (10708):   size: MISSING
I/flutter (10708):   direction: horizontal
I/flutter (10708):   mainAxisAlignment: spaceBetween
I/flutter (10708):   mainAxisSize: min
I/flutter (10708):   crossAxisAlignment: center
I/flutter (10708):   textDirection: ltr
I/flutter (10708):   verticalDirection: down
I/flutter (10708): The nearest ancestor providing an unbounded height constraint is:
I/flutter (10708):   RenderFlex#bb3f8 relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (10708):   creator: Column ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ←
I/flutter (10708):   AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#6a13f ink
I/flutter (10708):   renderer] ← NotificationListener<LayoutChangedNotification> ← PhysicalModel ←
I/flutter (10708):   AnimatedPhysicalModel ← Material ← ⋯
I/flutter (10708):   parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
I/flutter (10708):   constraints: BoxConstraints(0.0<=w<=391.4, 0.0<=h<=659.9)
I/flutter (10708):   size: MISSING
I/flutter (10708):   direction: vertical
I/flutter (10708):   mainAxisAlignment: start
I/flutter (10708):   mainAxisSize: max
I/flutter (10708):   crossAxisAlignment: center
I/flutter (10708):   verticalDirection: down
I/flutter (10708): The constraints that applied to the RenderIndexedStack were:
I/flutter (10708):   BoxConstraints(unconstrained)
I/flutter (10708): The exact size it was given was:
I/flutter (10708):   Size(Infinity, Infinity)
I/flutter (10708): See https://flutter.io/layout/ for more information.

The code here has has the TextFields removed for brevity as the error occurs with or without them.

import 'package:flutter/material.dart';
import 'package:todo_app/model/todo.dart';
import 'package:todo_app/util/dbhelper.dart';
import 'package:intl/intl.dart';

class TodoDetail extends StatefulWidget {
  Todo todo;
  TodoDetail(Todo todo) {
    this.todo = todo;
    debugPrint("called ctor with " + todo.title + "!!");
  }

  @override
  State<StatefulWidget> createState() => TodoDetailState(todo);
}

class TodoDetailState extends State {
  final Todo todo;
  TodoDetailState(this.todo);

  final _priorites = ["High, Medium", "Low"];
  String _priority = "Low";
  TextEditingController titleController = TextEditingController();
  TextEditingController descriptionController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    titleController.text = todo.title;
    descriptionController.text = todo.description;
    TextStyle textStyle = Theme.of(context).textTheme.title;

    return Padding(
        padding: EdgeInsets.only(top: 35, right: 10, left: 10),
        child: Scaffold(
            appBar: AppBar(
              automaticallyImplyLeading: false,
              title: Text('Add New'), //todo.title
            ),
            body: Column(children: <Widget>[
              DropdownButton<String>(
                  isExpanded: true,
                  items: _priorites.map((String value) {
                    return DropdownMenuItem<String>(
                        value: value, child: Text(value));
                  }).toList(),
                  style: textStyle,
                  value: "Low",
                  onChanged: null)
            ])));
    //);
  }
}

回答1:

Just try to wrap Container with fixed width around the DropdownButton.

@override
Widget build(BuildContext context) {
  titleController.text = todo.title;
  descriptionController.text = todo.description;
  TextStyle textStyle = Theme.of(context).textTheme.title;

  return Padding(
    padding: EdgeInsets.only(top: 35, right: 10, left: 10),
    child: Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text('Add New'), //todo.title
      ),
      body: Container(
        height: 200,
        child: Column(
          children: <Widget>[
            Container(
              // don't forget about height
              height: 200,
              child: DropdownButton<String>(
                isExpanded: true,
                items: _priorites.map((String value) {
                  return DropdownMenuItem<String>(
                      value: value, child: Text(value));
                }).toList(),
                style: textStyle,
                value: "Low",
                onChanged: null,
              ),
            )
          ],
        ),
      ),
    ),
  );
}

来源：https://stackoverflow.com/questions/54621388/a-renderflex-overflowed-by-infinity-pixels-on-the-bottom