Firebase & List - how to create a list with data from FireBase

Viewed 88

I would like to Transfert FireBase data into a list but I am not sure to do it right. The data in the list are not displayed in the MultiSelectBottomSheetField. I am also getting an error about missing return. I have tried to add another return Container but it does not solve the problem. This means to me that I still have a lot to learn about coding in Dart. Please, can you point me into the right direction? Your help is appreciated. Many thanks.

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();
                            },
                            ),
                            );};
                                      })
            ]
          )
        )
      )
    );
  }
}


1 Answers

use the stream builder instead of builder,to create a list use

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