flutter form data disappears when I scroll

Question

I have a widget, that has an image element and and expanded listview of form elements that as I fill out and scroll the data disappears when it scrolls behind the image. It is not throwing any errors when I debug and it happens on any field that scrolls behind the image at the top of the widget. Any ideas?

@override
  Widget build(BuildContext context) {
    var _children = <Widget>[
      new Center(
        child: new Text(widget.prov.fname + widget.prov.lname,
          style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
        ),
      ),
      new Center(
          child: new Container(
            padding: new EdgeInsets.only(
                left: 125.0, right: 125.0, bottom: 50.0),
            child: new Image.network('http://$baseurl:8080/getimage/'+widget.prov.pic.assetName),
          )
      ),

      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 *',
                    ),
                    onSaved: (String value) { referral.fname = value; },
                    validator: _validateName,
                  ),

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

                  new TextFormField(
                    decoration: const InputDecoration(
                        icon: const Icon(Icons.phone),
                        hintText: 'How to contact?',
                        labelText: 'Phone Number *',
                        prefixText: '+1'
                    ),
                    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(
                      hintText: 'Tell us about patient',
                      helperText: 'It does not have to be detailed yet',
                      labelText: 'Referral Details',
                    ),
                    maxLines: 5,
                  ),

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

                  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 RefreshIndicator(
        child: new ListView.builder(
          itemBuilder: _itemBuilder,
          itemCount: listcount,
        ),
        onRefresh: _onRefresh,

      ),*/

    ];
    return new Scaffold(
      appBar: new AppBar(title: new Text("My Provider")),
      body: new Column(
        children: _children,
      ),
    );
  }

Answer 1

This is because you are using ListView to render your children. ListView only renders the visible children (has recycling nature). Instead, use Column with SingleChildScrollView.

SingleChildScrollView(child:Column(children:yourFormChildren));