如何使用 futurebuilder 在 TextFormField 中显示初始值？

Question

在 textformfield 中显示的初始值应该是用户已经键入并保存到 firebase 上的数据。我曾想过使用 futurebuilder 来检索这些数据并显示它，但我遇到错误“FutureBuilder 无法分配给字符串类型的变量”。

class _ModulesState extends State<Modules> {

  getModules() async {
    final uid = await Provider.of(context).auth.getCurrentUID();
    DocumentSnapshot doc = await Firestore.instance.collection('users').document(uid).collection('settings')
    .document('modules').get();
    return doc;
  }

  TextEditingController _module1Controller = new TextEditingController()..text(
     FutureBuilder(
      future: getModules(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {              
          return snapshot.data['module1'];
        } else {
          return CircularProgressIndicator();
        }
      },
    ),);
    
    TextEditingController _module2Controller = new TextEditingController();
    TextEditingController _module3Controller = new TextEditingController();
    TextEditingController _module4Controller = new TextEditingController();
    TextEditingController _module5Controller = new TextEditingController();
    //TextEditingController _module6Controller = new TextEditingController();
    //TextEditingController _module7Controller = new TextEditingController();
    
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[900],
      appBar: AppBar(
        backgroundColor: Colors.grey[850],
        leading: Builder(
          builder: (BuildContext context) {
            return IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed: () {
                Navigator.of(context).pop();
              },
            );
          },
        ) ,
      title: Text("Your Modules",) 
    ),
    body: Builder(builder: (context) {
      return SingleChildScrollView(child:Column(
        children: <Widget>[
          SizedBox(height: 20,),
          Row(children: <Widget>[
            SizedBox(width: 15,),
            Text("Module 1", style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold, color: Colors.grey[100]),),
            SizedBox(width: 30,),
            Expanded(child: 
             TextFormField(
               style: TextStyle(color: Colors.grey[100]),
               cursorColor: Colors.tealAccent,
               controller: _module1Controller, 
              decoration: InputDecoration(
                hintStyle: TextStyle(color: Colors.grey[100], fontSize: 15),
                hintText: "Eg. CS2030, IS1103, MA1101R",
               focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.tealAccent,
                              ),),
                            enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.grey[800])),
             ),
             ),)
          ],),
          SizedBox(height: 10,),
          Row(children: <Widget>[
            SizedBox(width: 15,),
            Text("Module 2", style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold, color: Colors.grey[100]),),
            SizedBox(width: 30,),
            Expanded(child: 
             TextFormField(
               style: TextStyle(color: Colors.grey[100]),
               cursorColor: Colors.tealAccent,
               controller: _module2Controller,
               decoration: InputDecoration(
                 hintStyle: TextStyle(color: Colors.grey[100],fontSize: 15),
                 hintText: "Eg. CS2030, IS1103, MA1101R",
               focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.tealAccent,
                              ),),
                            enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.grey[800])),
             ),
             ),)
          ],),

如图所示，我尝试使用 futurebuilder 为文本编辑控制器提供初始值

Answer 1

TextEditingController _module1Controller = 
    TextEditingController(text: "Value not from Database");

如果您不需要 CircularProgressIndicator，请更改 getModule 函数，如下所示

getModules() async {
      final uid = await Provider.of(context).auth.getCurrentUID();
      Firestore.instance.collection('users').document(uid).collection('settings')
          .document('modules').get().then((ds) {
        _module1Controller.text = ds.data['module1'];
        setState(() {
          
        });
        /// now _module1Controller.text contains the text from database....
      });
      
    }

注意：这个代码我没试过，请试试....

Answer 2

尝试让你的控制器最终化

final _module2Controller = new TextEditingController();

注意：我没有测试任何东西