Flutter - How to build a list view with expandable panels containing forms?

Question

I'm trying to build forms inside expandable panels in a list view.

I think I'm close to get it, but I've been having trouble with a error about the viewport height. The error says like this:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ The following assertion was thrown during performResize(): Vertical viewport was given unbounded height. Viewports expand in the scrolling direction to fill their container.In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand. This situation typically happens when a scrollable widget is nested inside another scrollable widget. If this widget is always nested in a scrollable widget there is no need to use a viewport because there will always be enough vertical space for the children. In this case, consider using a Column instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size the height of the viewport to the sum of the heights of its children.

From several online resources I came up with the idea of creating each form as widgets and creating a list of expandable panels to be contained by the list view. The list view is the body of the application.

My code so far looks like this:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      home: Interview(),
    );
  }
}

class Interview extends StatefulWidget {
  @override
  InterviewState createState() => new InterviewState();
}

class ExpansionPanelRow {
  bool isExpanded;
  final String header;
  final Widget body;
  final Icon icon;
  ExpansionPanelRow(this.isExpanded, this.header, this.body, this.icon);
}

class InterviewState extends State<Interview> {
  final GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
  List<String> _colors = <String>['', 'red', 'green', 'blue', 'orange'];
  String _color = '';

  Widget interviewDataForm() {
    return new SafeArea(
          top: false,
          bottom: false,
          child: Form(
            key: _formKey,
            autovalidate: true,
            child: new ListView(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              children: <Widget>[
                new TextFormField(
                  decoration: const InputDecoration(
                    icon: const Icon(Icons.person),
                    hintText: 'Enter your first and last name',
                    labelText: 'Name',
                  ),
                ),
                new TextFormField(
                  decoration: const InputDecoration(
                    icon: const Icon(Icons.calendar_today),
                    hintText: 'Enter your date of birth',
                    labelText: 'Dob',
                  ),
                  keyboardType: TextInputType.datetime,
                ),
                new TextFormField(
                  decoration: const InputDecoration(
                    icon: const Icon(Icons.phone),
                    hintText: 'Enter a phone number',
                    labelText: 'Phone',
                  ),
                  keyboardType: TextInputType.phone,
                  inputFormatters: [
                    WhitelistingTextInputFormatter.digitsOnly,
                  ],
                ),
                new TextFormField(
                  decoration: const InputDecoration(
                    icon: const Icon(Icons.email),
                    hintText: 'Enter a email address',
                    labelText: 'Email',
                  ),
                  keyboardType: TextInputType.emailAddress,
                ),
                new InputDecorator(
                  decoration: const InputDecoration(
                    icon: const Icon(Icons.color_lens),
                    labelText: 'Color',
                  ),
                  isEmpty: _color == '',
                  child: new DropdownButtonHideUnderline(
                    child: new DropdownButton<String>(
                      value: _color,
                      isDense: true,
                      onChanged: (String newValue) {
                        setState(() {
                          _color = newValue;
                        });
                      },
                      items: _colors.map((String value) {
                        return new DropdownMenuItem<String>(
                          value: value,
                          child: new Text(value),
                        );
                      }).toList(),
                    ),
                  ),
                ),
                new Container(
                    padding: const EdgeInsets.only(left: 40.0, top: 20.0),
                    child: new RaisedButton(
                      child: const Text('Submit'),
                      onPressed: null,
                    )),
              ],
            )
          )
        );
  }

  List<ExpansionPanelRow> getRows() {
    return <ExpansionPanelRow>[
      new ExpansionPanelRow(
          false,
          'Schools',
          new Padding(
              padding: new EdgeInsets.all(20.0),
              child: interviewDataForm()
          ),
          new Icon(
            Icons.call,
            size: 18.0,
            color: Color(0xFF42A5F5)
          )
      ),
      new ExpansionPanelRow(
          false,
          'Schools',
          new Padding(
              padding: new EdgeInsets.all(20.0),
              child: new Column(children: <Widget>[])
          ),
          new Icon(
            Icons.call,
            size: 18.0,
            color: Color(0xFF42A5F5)
          )
      ),
    ];
  }

  ListView listCriteria;

  Widget build(BuildContext context) {
    listCriteria = new ListView(
      children: [
        new Padding(
          padding: new EdgeInsets.all(10.0),
          child: new ExpansionPanelList(
            expansionCallback: (int index, bool isExpanded) {
              setState(() {
                getRows()[index].isExpanded = !getRows()[index].isExpanded;
              });
            },
            children: getRows().map((ExpansionPanelRow row) {
              return new ExpansionPanel(
                headerBuilder: (BuildContext context, bool isExpanded) {
                  return new ListTile(
                      leading: row.icon,
                      title: new Text(
                        row.header,
                        textAlign: TextAlign.left,
                        style: new TextStyle(
                          fontSize: 20.0,
                          fontWeight: FontWeight.w400,
                        ),
                      ));
                },
                isExpanded: row.isExpanded,
                body: row.body,
              );
            }).toList(),
          ),
        )
      ],
    );

  Scaffold scaffold = new Scaffold(
      appBar: new AppBar(
        title: new Text("App"),
      ),
      body: listCriteria,
      persistentFooterButtons: <Widget>[
        new ButtonBar(children: <Widget>[
          new FlatButton(
            color: Colors.blue,
            onPressed: null,
            child: new Text(
              'Add',
              textAlign: TextAlign.left,
              style: new TextStyle(fontWeight: FontWeight.bold),
            ),
          )
        ])
      ],
    );
    return scaffold;
  }
}

In which Widget is better to define the height? Should I define the height in all Widgets?

Answer 1

As the error says:

If this widget is always nested in a scrollable widget there is no need to use a viewport because there will always be enough vertical space for the children. In this case, consider using a Column instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size the height of the viewport to the sum of the heights of its children.

To solve this error add shrinkWrap: true:

 Widget interviewDataForm() {
return new SafeArea(
    top: false,
    bottom: false,
    child: Form(
        key: _formKey,
        autovalidate: true,
        child: new ListView(
          shrinkWrap: true,
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          children: <Widget>[