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));