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 = [
      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: [
                  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:  [
                      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(
                      value: _typeAppt,
                      isDense: true,
                      onChanged: (String newValue) {
                        setState(() {
                          _typeAppt = newValue;
                        });
                      },
                      items: _allTypeAppt.map((String value) {
                        return new DropdownMenuItem(
                          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,
      ),
    );
  }

user_7532298 · Answer

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

user_9499646 · Answer

Using TextEditorController it's quite simple:

For "First Name" add==>

TextEditingController nameController = new TextEditingController();

and

`new TextFormField(
         decoration: const InputDecoration(
           icon: const Icon(Icons.person),
           hintText: 'First Name?',
           labelText: 'First Name *',
          ),
         validator: _validateName,
         controller: nameController,
 ),`

In your onSubmit() ==>

print(nameController.text)

user_11164422 · Answer

if you have TextFormField that you auto generate by listView.builder() you can do this solution

  List generalController=[];

 @override
void initState() {
super.initState();
for(int i=0;i<100;i++){
  generalController.add(TextEditingController(text: ""));
}}

first define list that contain list of TextEditingController and after that initialize it with default value inside initState and inside every item in listview.builder()
use controller with index

like that

 ListView.builder(itemBuilder: (context,int index){
 CustomTextFromField(
                    textEditingController: generalController[index],
                    hint: AppLocalizations.of(context)!.translate("subject_name"),
                    texInputType: TextInputType.text,
                

                  ),
              },
          itemCount: state.subjectList.length,

user_19963360 · Answer

I had the same issue, I was using ListView and the values go missing when i was scroll, Just as someone above mentioned(Suman Maharjan) i tried using SingleChildScrollView with Column and issue is resolved now.

flutter form data disappears when I scroll

5 Answers