Flutter RenderIndexedStack object was given an infinite size during layout

Question

I am battling this DropDownItem box error, everything seems to work, but pops up the yellow out of bounds while it loads. Tried several things and can not get it resolved. I have this code for my Widget.

@override
Widget build(BuildContext context) {
    var _children = <Widget>[
      !_createNew ? _referrerPractice() : _referrerCreate(),
    ];
    return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new Column(
          mainAxisSize: MainAxisSize.max,
          children: _children,
        ));
  }

I then use this as one of the functions.

Widget _referrerPractice() {
assert(!_createNew);
return new Form(
  key: _formKey2,
  child: new Expanded(
    child: new ListView(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      children: <Widget>[
        new InputDecorator(
          decoration: const InputDecoration(
            labelText: 'Referrer Practice',
            hintText: 'Choose Referrer Practice or choose new',
          ),
          isEmpty: _referPractice == null,
          child: new DropdownButton<String>(
            value: _referPractice,
            isDense: true,
            onChanged: (String newValue) {
              setState(() {
                _referPractice = newValue;
              });
            },
            items: practicelist.map((Map value) {
              return new DropdownMenuItem<String>(
                value: value['id'].toString(),
                child: new Text(value['name']),
              );
            }).toList(),
          ),
        ),
        new RaisedButton(
            child: new Text('Start'), onPressed: _startReferrer),
      ],
    ),
  ),
);

}

It seems to work on another page and I do not use a function to populate the widget, just a regular var of widgets, but seems it should be the same as the structure is the same.

Any ideas what I am missing? This is one DropDownButton, but it happens on the resulting page that has a DropDownButton as well for the other function.

EDIT********** This is the working code

final List<String> _allTypeAppt = <String>['Elective OP', 'Hospital Transfer', 'Phone Consult'];

new Form(
      key: _formKey,
      autovalidate: _autovalidate,
      onWillPop: _warnUserAboutInvalidData,
      child: new Expanded(
          child: new ListView(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            children: <Widget>[
              new TextFormField(
                decoration: const InputDecoration(
                  icon: const Icon(Icons.person),
                  hintText: 'First Name?',
                  labelText: 'First Name *',
                ),
                controller: _fnameController,

                onSaved: (String value) { referral.fname = value; },
                validator: _validateName,
              ),

              new TextFormField(
                decoration: const InputDecoration(
                  icon: const Icon(Icons.person),
                  hintText: 'Last Name?',
                  labelText: 'Last Name *',
                ),
                controller: _lnameController,
                onSaved: (String value) { referral.lname = value; },
                validator: _validateName,
              ),

              new _DateTimePicker(
                labelText: 'DOB',
                selectedDate: _fromDate,
                selectDate: (DateTime date) {
                  setState(() {
                    _fromDate = date;
                  });
                },
              ),

              new TextFormField(
                decoration: const InputDecoration(
                    icon: const Icon(Icons.phone),
                    hintText: 'How to contact?',
                    labelText: 'Phone Number *',
                ),
                controller: _phoneController,
                keyboardType: TextInputType.phone,
                onSaved: (String value) { referral.contact = value; },
                validator: _validatePhoneNumber,
                // TextInputFormatters are applied in sequence.
                /*inputFormatters: <TextInputFormatter> [
                  WhitelistingTextInputFormatter.digitsOnly,
                  // Fit the validating format.
                  _phoneNumberFormatter,
                ],*/
              ),

              new TextFormField(
                decoration: const InputDecoration(
                  icon: const Icon(Icons.phone),
                  hintText: 'Alt contact?',
                  labelText: 'Alt Phone Number *',
                ),
                controller: _altPhoneController,
                keyboardType: TextInputType.phone,
                onSaved: (String value) { referral.altcontact = value; },
                validator: _validatePhoneNumber,
                // TextInputFormatters are applied in sequence.
                /*inputFormatters: <TextInputFormatter> [
                  WhitelistingTextInputFormatter.digitsOnly,
                  // Fit the validating format.
                  _phoneNumberFormatter,
                ],*/
              ),

              new TextFormField(
                decoration: const InputDecoration(
                  icon: const Icon(Icons.email),
                  hintText: 'Patien Email?',
                  labelText: 'Patient Email *',
                ),
                controller: _emailController,
                onSaved: (String value) { referral.altcontact = value; },
                //validator: _validatePhoneNumber,
                // TextInputFormatters are applied in sequence.
                /*inputFormatters: <TextInputFormatter> [
                  WhitelistingTextInputFormatter.digitsOnly,
                  // Fit the validating format.
                  _phoneNumberFormatter,
                ],*/
              ),

              new TextFormField(
                decoration: const InputDecoration(
                  hintText: 'Tell us about patient',
                  helperText: 'It does not have to be detailed yet',
                  labelText: 'Referral Details',
                ),
                controller: _detailsController,
                maxLines: 5,
              ),

              new InputDecorator(
                decoration: const InputDecoration(
                  labelText: 'Type of Appointment',
                  hintText: 'Choose an Appointment Type',
                ),
                isEmpty: _typeAppt == null,
                child: new DropdownButton<String>(
                  value: _typeAppt,
                  isDense: true,
                  onChanged: (String newValue) {
                    setState(() {
                      _typeAppt = newValue;
                    });
                  },
                  items: _allTypeAppt.map((String value) {
                    return new DropdownMenuItem<String>(
                      value: value,
                      child: new Text(value),
                    );
                  }).toList(),
                ),
              ),

              new RaisedButton(
                child: new Text('Submit Referral'),
                onPressed: _submitData,
              ),

            ],

          )
      )
  ),

Answer 1

I was able to reproduce your issue, I am not sure why are you building the layout this way. Your are feeding your DropDownButton as the child property for InputDecorator, which is fine. However, it is throwing this error because DropDownMenuItem is overflowing your InputDecorator. In other words, you are not only containing the DopDownButton within your InputDecorator, but also your items are trying to be contained in the same space as well. So, Flutter is confused on how to position the list of items inside the space provided by the InputDecorator.

I am really confused what kind of layout you are trying to build, why do you need a Form and an InputDecorator for?

Maybe provide a little context to your design choices so that we can help better.

I have created a simpler layout with Row and TextField widgets, it might be of help.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _mySelection;
  String _text = "Choose";
   List<Map> _myJson = [
    {"id": "ID 1310012", "name": "Newcommer"}, {"id": "ID 0000TEMP", "name": "Temp"}];

  Widget _children() {
    TextEditingController _controller = new TextEditingController(text: _text);
    return  new Expanded(child: new ListView(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            children: <Widget>[
              new Container (
        child: new Row(
                  children: <Widget>[
                    new Expanded(
                      child: new TextField(
                        controller: _controller,
                      ),
                    ),
                    new DropdownButton(
                      isDense: true,
                      value: _mySelection,
                      items: _myJson.map((Map map) {
                        return new DropdownMenuItem<String>(
                          value: map["id"],
                          child: new Text(
                            map["name"],
                          ),
                        );
                      }).toList(),
                      onChanged: (String newValue) {
                        setState(() {
                          _mySelection = newValue;
                          _text = newValue;
                        });
                      })
              ],),),
              new RaisedButton(
                  child: new Text('Start'), onPressed: null),

            ]
        ));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("Test")),
      body:  new Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
           _children(),
        ],
      ),
    );
  }
}