how to provide initialValue in TextFormField from Cloud FireStore

Viewed 704

I am trying to update my data in cloud Firestore through a form. I need the already stored fields in the firestore to be shown as initialValue in the TextFormField.

The fetched data is printed on the console by print() but it shows nothing in the TextFormField.

The initialValue has the same line of code I used for print().

The data is also fetched properly.

This is the code :

var initData = {
'title': '',
 };

void didChangeDependencies() async{
super.didChangeDependencies();
await Firestore.instance
    .collection('${widget.collection}')
    .document('${widget.title}')
    .get()
    .then((value) {
  setState(() {
    initData = {
      'title': value.data['title'],
    };
  });
});

if (isValid) {
  _formKey.currentState
      .save();
  }
  widget.submitFn(
    _title,)
 }

@override
Widget build(BuildContext context) {

print(initData['title']); // the fetched data is printed in the console

return Form(
  key: _formKey,
 Column(
   children: <Widget>[
               TextFormField(
                  initialValue: initData['title'], // this doesnt show anything on the TextFormField,
                  decoration: InputDecoration(
                      labelText: 'Enter Product Name',
                      contentPadding: EdgeInsets.all(5)),
                  validator: (value) {
                    if (value.isEmpty) {
                      return 'Enter a the Product Title';
                    }
                    return null;
                  },
                  onSaved: (value) {
                    _title = value;
                  },
                ),
              ),
            ),
           }
3 Answers
import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {
  TextEditingController controller;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller = TextEditingController();
    controller.text = "hiii";  //Here you can provide a default value when your app starts.
    controller.addListener(() {
      print(controller.text);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Form(
              child: TextField(
                controller: controller,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

If you check the constructor of TextFormField, you can pass initialValue to it. So you just have to fetch the data from Firestore and pass it to the initialValue in TextFormField.

String data = "Some value fetched from firestore";
TextFormField(
  initialValue:data,
)

Getting data from Firestore takes time. And it can't be set as the initial value before getting from Firestore. So you must set the initial value for textfield and at the same time query value from firestore and after that set the value to textfield.

Related