如何从 firestore 检索数据以显示在 multi select 表单字段中

Question

你好，我是 flutter 的新手。我正在尝试从 firestore 获取症状列表并将其显示在 'MultiSelectFormField' 中。我怎样才能做到？我应该添加什么？

MultiSelectFormField(
  autovalidate: AutovalidateMode.disabled,
  chipBackGroundColor: Colors.blue[900],
  chipLabelStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
  dialogTextStyle: TextStyle(fontWeight: FontWeight.bold),
  checkBoxActiveColor: Colors.blue[900],
  checkBoxCheckColor: Colors.white,
  dialogShapeBorder: RoundedRectangleBorder(
  borderRadius: BorderRadius.all(Radius.circular(12.0))),
  title: Text(
            "Symptoms",
            style: TextStyle(fontSize:20),
         ),
         validator: (value) {
            if (value == null || value.length == 0) {
              return 'Please select one or more symptoms';
            }
            return null;
         },
         dataSource: ['value': symptomsList],
         textField: 'value',
         valueField: 'value',
         okButtonLabel: 'OK',
         cancelButtonLabel: 'CANCEL',
         hintWidget: Text('Please choose one or more symptoms'),
         initialValue: _symptoms,
         onSaved: (value) {
         if (value == null) return;
            setState(() {
              _symptoms = value;
       });
   },
),

Answer 1

重要

请务必在您的 firebase 项目中注册您的应用程序并将包：Firebase Core and Cloud Firestore 添加到您的 pubspec.yaml 文件

检索

如果您使用文档作为症状：

要从云 firestore 检索数据，请确保您已导入云 firestore 包

import 'package:cloud_firestore/cloud_firestore.dart';

完成后创建一个名为 getDataFromFirestore()

的函数

getDataFromFirestore(var collection, var data) async {

  await FirebaseFirestore.instance
          .collection(collection)
          .get()
          .then((value) {
      // here we set the data to the data
      data = value.docs;
      });

 

}

完成后我们可以使用 auer initstate 中的函数：

    List symptoms = [];
    
      ...
    
      @override
      void initState() {
        super.initState();
    
        asyncTasks() async {
          var data;

          await getDataFromFirestore("symptoms", data);

          // here we fill up the list symptoms
          for(var item in data) {
            symptoms.add(item.data()["name"]);
          }
          setState(() {});
        }
    
      asyncTasks();
      
      }

当您在文档中使用列表作为症状时：

要从云 firestore 检索数据，请确保您已导入云 firestore 包

import 'package:cloud_firestore/cloud_firestore.dart';

完成后创建一个名为 getDataFromFirestore()

的函数

// the document Id is the id from the document where the symptoms list is in
    getDataFromFirestore(var collection, var data, var documentId) async {
  
      await FirebaseFirestore.instance
              .collection(collection)
              .doc(documentId)
              .get()
              .then((value) {
          // here we set the data to the data
          data = value.data();
          });
    
     
    
    }

完成后我们可以使用 auer initstate 中的函数：

    List symptoms = [];
    
      ...
    
      @override
      void initState() {
        super.initState();
    
        asyncTasks() async {
          var data;

          await getDataFromFirestore("symptoms", data);

          // here we fill up the list symptoms
          for(var item in data) {
            symptoms.add(item["name"]);
          }
          setState(() {});
        }
    
      asyncTasks();
      
      }

显示

MultiSelectFormField(
  autovalidate: AutovalidateMode.disabled,
  chipBackGroundColor: Colors.blue[900],
  chipLabelStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
  dialogTextStyle: TextStyle(fontWeight: FontWeight.bold),
  checkBoxActiveColor: Colors.blue[900],
  checkBoxCheckColor: Colors.white,
  dialogShapeBorder: RoundedRectangleBorder(
  borderRadius: BorderRadius.all(Radius.circular(12.0))),
  title: Text(
            "Symptoms",
            style: TextStyle(fontSize:20),
         ),
         validator: (value) {
            if (value == null || value.length == 0) {
              return 'Please select one or more symptoms';
            }
            return null;
         },
        // you can simply use the list
         dataSource: ['value': symptoms[0]],
         textField: 'value',
         valueField: 'value',
         okButtonLabel: 'OK',
         cancelButtonLabel: 'CANCEL',
         hintWidget: Text('Please choose one or more symptoms'),
         initialValue: _symptoms,
         onSaved: (value) {
         if (value == null) return;
            setState(() {
              _symptoms = value;
       });
   },
),

希望对您有所帮助！

Answer 2

首先，声明流

final Stream<QuerySnapshot> symptomsStream = FirebaseFirestore.instance.collection('symptoms').snapshots();

然后使用流生成器查询症状流。声明症状列表并填写列表症状。在datasource中，使用for逐一显示列表项。

StreamBuilder(
  stream: symptomsStream,
  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
    if(snapshot.hasError){
      print('Something went wrong');
    }
    if(snapshot.connectionState == ConnectionState.waiting){
      return const Center(
         child: CircularProgressIndicator(),
      );
    }
                          
    final List symptomsList = [];
    //fill up the list symptoms                      
    snapshot.data!.docs.map((DocumentSnapshot document){
      Map a = document.data() as Map<String, dynamic>;
      symptomsList.add(a['name']);
      a['id'] = document.id;
     }).toList();

     return MultiSelectFormField(
       autovalidate: AutovalidateMode.disabled,
       chipBackGroundColor: Colors.blue[900],
       chipLabelStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
        dialogTextStyle: TextStyle(fontWeight: FontWeight.bold),
        checkBoxActiveColor: Colors.blue[900],
        checkBoxCheckColor: Colors.white,
        dialogShapeBorder: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(12.0))),
        title: Text(
          "Symptoms",
          style: TextStyle(fontSize:20),
        ),
        validator: (value) {
          if (value == null || value.length == 0) {
            return 'Please select one or more symptoms';
          }
          return null;
        },
        dataSource: [
          for (String i in symptomsList) {'value' : i}
        ], 
        textField: 'value',
        valueField: 'value',
        okButtonLabel: 'OK',
        cancelButtonLabel: 'CANCEL',
        hintWidget: Text('Please choose one or more symptoms'),
        initialValue: _symptoms,
        onSaved: (value) {
        if (value == null) return;
        setState(() {
        _symptoms = value;
      }
     );
    },
   );
  }
),

如何从 firestore 检索数据以显示在 multi select 表单字段中

How to retrieve data from firestore to display in multi select form field

dart

flutter

google-cloud-firestore

重要

检索

如果您使用文档作为症状：

当您在文档中使用列表作为症状时：

显示