I wrote the code to get data from List to chips and when click chips the colour changed to blue. But I want to fetch data from firestore instead "words list".

Instead this words list ...

Database collection image

I want to display "WordName" field in the chips.

My code..

class uitry extends StatefulWidget {
  const uitry({Key? key}) : super(key: key);

  @override
  State<uitry> createState() => _uitryState();
}

class _uitryState extends State<uitry> {
  List<String> wordList = [
    'Shopping',
    'Brunch',
    'Music',
    'Road Trips',
    'Tea',
    'Trivia',
    'Comedy',
    'Clubbing',
    'Drinking',
    'Wine',
  ];

  List<String> selectedWord = [];
  List<String>? deSelectedWord = [];
  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
              image: AssetImage(Config.app_background4), fit: BoxFit.fill),
        ),
        child: SafeArea(
            child: Center(
                child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 14, right: 0),
              child: Column(
                children: [
                  SizedBox(
                    width: width * 0.94,
                    height: height * 0.30,
                    child: Column(
                      children: <Widget>[
                        const SizedBox(height: 16),
                        Wrap(
                          children: wordList.map(
                            (word) {
                              bool isSelected = false;
                              if (selectedWord!.contains(word)) {
                                isSelected = true;
                              }
                              return GestureDetector(
                                onTap: () {
                                  if (!selectedWord!.contains(word)) {
                                    if (selectedWord!.length < 50) {
                                      selectedWord!.add(word);
                                      deSelectedWord!.removeWhere(
                                          (element) => element == word);
                                      setState(() {});
                                      print(selectedWord);
                                    }
                                  } else {
                                    selectedWord!.removeWhere(
                                        (element) => element == word);
                                    deSelectedWord!.add(word);
                                    setState(() {
                                      // selectedHobby.remove(hobby);
                                    });
                                    print(selectedWord);
                                    print(deSelectedWord);
                                  }
                                },
                                child: Container(
                                  margin: const EdgeInsets.symmetric(
                                      horizontal: 5, vertical: 4),
                                  child: Container(
                                    padding: const EdgeInsets.symmetric(
                                        vertical: 5, horizontal: 12),
                                    decoration: BoxDecoration(
                                        color: isSelected
                                            ? HexColor('#0000FF')
                                            : HexColor('#D9D9D9'),
                                        borderRadius: BorderRadius.circular(18),
                                        border: Border.all(
                                            color: isSelected
                                                ? HexColor('#0000FF')
                                                : HexColor('#D9D9D9'),
                                            width: 2)),
                                    child: Text(
                                      word,
                                      style: TextStyle(
                                          color: isSelected
                                              ? Colors.black
                                              : Colors.black,
                                          fontSize: 14,
                                          fontWeight: FontWeight.w600),
                                    ),
                                  ),
                                ),
                              );
                            },
                          ).toList(),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ))),
      ),
    );
  }
}

How get that from firestore? I hope You can understand what I ask. Thank you!

CodePudding user response：

I would do the following:

1. Initialize your list of words to an empty list
2. Use the initState method of the stateful widget to make a call to firestore to fetch all the documents that have the wordName property and get the word from the result and set it to a new list
3. Assign the new list to the wordList property and setState to re-render.

This would be it to get the words and set the chips with fetched words.

Keep in mind that since you are making an async call to firestore you should show some form of loading to tell the user you are fetching the data otherwise you would show and empty chip list until you fetch the data.