Firebase & List - 如何使用 FireBase 中的数据创建列表

Question

我想将 FireBase 数据传输到列表中，但我不确定是否正确。 列表中的数据不会显示在 MultiSelectBottomSheetField 中。 我也收到关于缺少退货的错误。我试图添加另一个返回容器，但它并没有解决问题。 这对我来说意味着在 Dart 编码方面我还有很多东西要学。 拜托，你能指出我正确的方向吗？ 感谢您的帮助。非常感谢。

import 'package:multi_select_flutter/chip_display/multi_select_chip_display.dart';
import 'package:multi_select_flutter/util/multi_select_item.dart';

class Context {
  final String id;
  final String name;
  Context({
    this.id,
    this.name,
  });
}

class EngagePage_Context_For_Chip extends StatefulWidget {
  EngagePage_Context_For_Chip({Key key, }):super(key:key);//this.title}) : super(key: key);
  // final String title;
  @override
  _EngagePage_Context_For_ChipState createState() => _EngagePage_Context_For_ChipState();
}

class _EngagePage_Context_For_ChipState extends State<EngagePage_Context_For_Chip> {
  static List<Context> _context = [
    
  ];

  final _itemsContext = _context
      .map((context) => MultiSelectItem<Context>(context, context.name))
      .toList();

  List<Context> _selectedContext = [];

  final _multiSelectKeyContext = GlobalKey<FormFieldState>();
  @override
  void initState() {
    _selectedContext = _context;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ENGAGE'),
      ),
      body: SingleChildScrollView(
        child: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.all(20),
          child: Column(
            children: <Widget>[
                  StreamBuilder<QuerySnapshot>(
                  stream: FirebaseFirestore.instance
                      .collection('Users')
                      .doc(FirebaseAuth.instance.currentUser.uid)
                      .collection('contexts')
                      .snapshots(),
                          builder: (context, snapshot) {
                    if (!snapshot.hasData)
                    const Text("Loading.....");
                    else {
                    for (int i = 0; i < snapshot.data.docs.length; i++) {
                    DocumentSnapshot snap = snapshot.data.docs[i];
                    List<Context> _context = [
                    Context(id: snap['id'], name: snap['context_Name']),];
                    }
                     return MultiSelectBottomSheetField<Context>(
                            key: _multiSelectKeyContext,
                            initialChildSize: 0.7,
                            maxChildSize: 0.95,
                            title: Text("Context"),
                            buttonText: Text("Context",style: TextStyle(fontSize: 18),),
                            items: _itemsContext,
                            searchable: true,
                            validator: (values) {
                            if (values == null || values.isEmpty) {
                            return "";
                            }
                            List<String> name = values.map((e) => e.name).toList();
                            return null;
                            },
                            onConfirm: (values) {
                            setState(() {
                            _selectedContext = values;
                            });
                            _multiSelectKeyContext.currentState.validate();
                            },
                            chipDisplay: MultiSelectChipDisplay(
                            onTap: (item) {
                            setState(() {
                            _selectedContext.remove(item);
                            });
                            _multiSelectKeyContext.currentState.validate();
                            },
                            ),
                            );};
                                      })
            ]
          )
        )
      )
    );
  }
}

Answer 1

使用流构建器而不是构建器来创建列表使用

ListView(
            children: snapshot.data.docs.map((document) {
              return Container(
                child: Center(child: Text(document['text'])),
              );
            }).toList(),