如何将Firestore文档列表绑定到Flutter中的下拉菜单？ [英] How to bind a Firestore documents list to a Dropdown menu in Flutter?

问题描述

我在下拉菜单和Firestore方面遇到问题，如何将从Firestore检索到的文档列表绑定到DropdownButton？当前，我遇到此错误：

I'm having a problem regarding dropdown menus and firestore, how can I bind a list of documents retrieved from firestore to a DropdownButton? Currently I'm having this error:

The argument type '(Map<dynamic, dynamic>) → DropdownMenuItem<String>' can't be assigned to the parameter type '(DocumentSnapshot) → dynamic'.

我的小部件中的代码.dart：

Code from my widget .dart:

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class MessageList extends StatelessWidget {
  MessageList({this.firestore});

  final Firestore firestore;
  var _mySelection;

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: firestore.collection('preciso-modelos').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (!snapshot.hasData) return const Text('Loading...');
        return new DropdownButton<String>(
            isDense: true,
            hint: new Text("Select"),
            value: _mySelection,
            onChanged: (String newValue) {
              print (_mySelection);
            },
            items: snapshot.data.documents.map((Map map) {
              return new DropdownMenuItem<String>(
                value: map["id"].toString(),
                child: new Text(
                  map["name"],
                ),
              );
            }).toList(),
        );},
        );
      }
}

谢谢！

推荐答案

new StreamBuilder<QuerySnapshot>(
    stream: Firestore.instance.collection('categories').snapshots(),
    builder: (context, snapshot){
      if (!snapshot.hasData) return const Center(
        child: const CupertinoActivityIndicator(),
      );
      var length = snapshot.data.documents.length;
      DocumentSnapshot ds = snapshot.data.documents[length - 1];
      _queryCat = snapshot.data.documents;
      return new Container(
        padding: EdgeInsets.only(bottom: 16.0),
        width: screenSize.width*0.9,
        child: new Row(
          children: <Widget>[
            new Expanded(
                flex: 2,
                child: new Container(
                  padding: EdgeInsets.fromLTRB(12.0,10.0,10.0,10.0),
                  child: new Text("Category",style: textStyleBlueBold,),
                )
            ),
            new Expanded(
              flex: 4,
              child:new InputDecorator(
                decoration: const InputDecoration(
                  //labelText: 'Activity',
                  hintText: 'Choose an category',
                  hintStyle: TextStyle(
                    color: primaryColor,
                    fontSize: 16.0,
                    fontFamily: "OpenSans",
                    fontWeight: FontWeight.normal,
                  ),
                ),
                isEmpty: _category == null,
                child: new DropdownButton(
                  value: _category,
                  isDense: true,
                  onChanged: (String newValue) {
                    setState(() {
                      _category = newValue;
                      dropDown = false;
                      print(_category);
                    });
                  },
                  items: snapshot.data.documents.map((DocumentSnapshot document) {
                    return new DropdownMenuItem<String>(
                        value: document.data['title'],
                        child: new Container(
                          decoration: new BoxDecoration(
                              color: primaryColor,
                              borderRadius: new BorderRadius.circular(5.0)
                          ),
                          height: 100.0,
                          padding: EdgeInsets.fromLTRB(10.0, 2.0, 10.0, 0.0),
                          //color: primaryColor,
                          child: new Text(document.data['title'],style: textStyle),
                        )
                    );
                  }).toList(),
                ),
              ),
            ),
          ],
        ),
      );
    }
);

这篇关于如何将Firestore文档列表绑定到Flutter中的下拉菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！