底部被 Infinity 像素溢出的 RenderFlex

Question

I have a very simple control where I am trying to show a DropdownButton 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 to some relevant documentation, but being very new to Flutter, I'm not sure what needs to be changed.

I have tried many of the suggestions based on the questions about similar errors, but have not had any luck.

Stack Trace:

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.

Code

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)
            ])));
    //);
  }
}

Answer 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,
              ),
            )
          ],
        ),
      ),
    ),
  );
}

Answer 2

I made this mistake while working with "heigth:MediaQuery.of(context).size.heigth" --> A renderflex overflow and I handle it with Expanded

        Expanded(
        child: Container(
            decoration: BoxDecoration(color: Colors.deepOrangeAccent),
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Text("this is handle")))

Answer 3

#A RenderFlex overflowed by Infinity pixels on the bottom.#

OnTap Event Handling in Flutter#

Routing form one Widget to Other#

This problem come in picture because of the bottom widget to which you don't set limit like height or something and it goes out of the screen. Because of that you are getting an error like A RenderFlex overflowed by Infinity pixels on the bottom.

To Solve the problem you can Wrap with SingleChildScrollView() widget if adding height is not working properly

SingleChildScrollView( 
  child:
    //Text('Do not have Account ?'),
    GestureDetector(

     child: Text('Do not have Account ?'),
     onTap: (){
       **Navigator.push(context, MaterialPageRoute(builder: (_)=> Register()));**
     },
   ),

),