在Flatter中的ListView中显示多个文档数据

在Flatter中的ListView中显示多个文档数据,listview,flutter,dart,stream-builder,Listview,Flutter,Dart,Stream Builder,这是我使用的代码。我试图实现的是在RadioItem中的ListView中显示来自每个容器的不同驱动程序。目前,它只显示了一个重复的名称,如所附的照片所示 导入“包装:颤振/材料.省道”; 导入“package:flatter_screenutil/flatter_screenutil.dart”; 导入“包:cloud_firestore/cloud_firestore.dart”; 类BeepListView扩展了StatefulWidget{ @凌驾 _BeepListViewState

这是我使用的代码。我试图实现的是在RadioItem中的ListView中显示来自每个容器的不同驱动程序。目前,它只显示了一个重复的名称,如所附的照片所示

导入“包装:颤振/材料.省道”;
导入“package:flatter_screenutil/flatter_screenutil.dart”;
导入“包:cloud_firestore/cloud_firestore.dart”;
类BeepListView扩展了StatefulWidget{
@凌驾
_BeepListViewState createState()=>\u BeepListViewState();
}
类_BeepListViewState扩展状态{
List beepUnits=新列表();
@凌驾
void initState(){
super.initState();
beepUnits.add(新的RadioModel(false,'Unit1'));
beepUnits.add(新的RadioModel(false,'Unit2'));
beepUnits.add(新的RadioModel(假,'Unit3'));
beepUnits.add(新的RadioModel(假,'Unit4'));
beepUnits.add(新的RadioModel(假,“单元5”);
beepUnits.add(新的RadioModel(假,'Unit6'));
beepUnits.add(新的RadioModel(false,'Unit7'));
beepUnits.add(新的RadioModel(假,'Unit8'));
beepUnits.add(新的RadioModel(false,'unit9'));
beepUnits.add(新的RadioModel(假,“单元10”);
beepUnits.add(新的RadioModel(假,'Unit11'));
beepUnits.add(新的RadioModel(假,'Unit12'));
beepUnits.add(新的RadioModel(假,'Unit13'));
beepUnits.add(新的RadioModel(假,'Unit14'));
beepUnits.add(新的RadioModel(假,'Unit15'));
beepUnits.add(新的RadioModel(假,'Unit16'));
beepUnits.add(新的RadioModel(假,'Unit17'));
beepUnits.add(新的RadioModel(假,'Unit18'));
beepUnits.add(新的RadioModel(假,'Unit19'));
beepUnits.add(新的RadioModel(假,'Unit 20'));
}
@凌驾
小部件构建(构建上下文){
双默认屏幕宽度=400.0;
双默认屏幕高度=810.0;
ScreenUtil.instance=ScreenUtil(
宽度:默认屏幕宽度,
高度:默认屏幕高度,
allowFontScaling:true,
)..初始(上下文);
返回容器(
边缘:边缘组。对称(垂直:20.0),
高度:100.0,
子项:ListView.builder(
滚动方向:轴水平,
itemCount:beepUnits.length,
itemBuilder:(构建上下文,int索引){
返回新墨水池(
颜色:颜色。蓝色,
onTap:(){
设置状态(){
beepUnits.forEach((element)=>element.isSelected=false);
beepUnits[index].isSelected=true;
});
},
儿童:新的放射性项目(beepUnits[索引]),
);
},
),
);
}
}
类RadioItem扩展了无状态小部件{
最终无线电模型项目;
放射性透射电镜(本项目);
@凌驾
小部件构建(构建上下文){
返回流生成器(
流:Firestore.instance
.collection('驱动程序')
.where('状态',isEqualTo:'值班')
.限额(1)
.snapshots(),
生成器:(BuildContext上下文,异步快照){
if(snapshot.hasError)返回新文本('Error:${snapshot.Error}');
交换机(快照.连接状态){
案例连接状态。正在等待:
返回新文本(“”);
违约:
返回容器(
边距:所有新边集(5.0),
孩子:新的一排(
mainAxisSize:mainAxisSize.max,
儿童:[
新容器(
高度:100.0,
宽度:160.0,
孩子:排(
儿童:[
容器(
孩子:填充(
填充:仅限常量边设置(
左:10.0,右:10.0),
儿童:新文本(
“埃塔”,
样式:TextStyle(
颜色:_item.isSelected
?颜色。灰色[200]
:颜色。黑色,
fontSize:ScreenUtil.instance.setSp(29.0),
fontWeight:fontWeight.bold,
),
),
),
),
填充物(
填充:仅限常量边集(顶部:15.0),
子:列(
crossAxisAlignment:crossAxisAlignment.start,
儿童:[
容器(
孩子:排(
儿童:[
容器(
子:图标(
Icons.directions\u总线,
颜色:_item.isSelected
?颜色。灰色[200]
:颜色。黑色,
大小:ScreenUtil.instance.setSp(19.0),
),
),
容器(
儿童:新文本(
_项目.按钮,
样式:新文本样式(
颜色:_item.isSelected
?颜色。灰色[200]
:颜色。黑色,
字体大小:
ScreenUtil.instance.setSp(15.0),
),
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class BeepListView extends StatefulWidget {
  @override
  _BeepListViewState createState() => _BeepListViewState();
}

class _BeepListViewState extends State<BeepListView> {
  List<RadioModel> beepUnits = new List<RadioModel>();

  @override
  void initState() {
    super.initState();
    beepUnits.add(new RadioModel(false, 'Unit 1'));
    beepUnits.add(new RadioModel(false, 'Unit 2'));
    beepUnits.add(new RadioModel(false, 'Unit 3'));
    beepUnits.add(new RadioModel(false, 'Unit 4'));
    beepUnits.add(new RadioModel(false, 'Unit 5'));
    beepUnits.add(new RadioModel(false, 'Unit 6'));
    beepUnits.add(new RadioModel(false, 'Unit 7'));
    beepUnits.add(new RadioModel(false, 'Unit 8'));
    beepUnits.add(new RadioModel(false, 'Unit 9'));
    beepUnits.add(new RadioModel(false, 'Unit 10'));
    beepUnits.add(new RadioModel(false, 'Unit 11'));
    beepUnits.add(new RadioModel(false, 'Unit 12'));
    beepUnits.add(new RadioModel(false, 'Unit 13'));
    beepUnits.add(new RadioModel(false, 'Unit 14'));
    beepUnits.add(new RadioModel(false, 'Unit 15'));
    beepUnits.add(new RadioModel(false, 'Unit 16'));
    beepUnits.add(new RadioModel(false, 'Unit 17'));
    beepUnits.add(new RadioModel(false, 'Unit 18'));
    beepUnits.add(new RadioModel(false, 'Unit 19'));
    beepUnits.add(new RadioModel(false, 'Unit 20'));
  }

  @override
  Widget build(BuildContext context) {
    double defaultScreenWidth = 400.0;
    double defaultScreenHeight = 810.0;

    ScreenUtil.instance = ScreenUtil(
      width: defaultScreenWidth,
      height: defaultScreenHeight,
      allowFontScaling: true,
    )..init(context);
    return Container(
      margin: EdgeInsets.symmetric(vertical: 20.0),
      height: 100.0,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: beepUnits.length,
        itemBuilder: (BuildContext context, int index) {
          return new InkWell(
            splashColor: Colors.blue,
            onTap: () {
              setState(() {
                beepUnits.forEach((element) => element.isSelected = false);
                beepUnits[index].isSelected = true;
              });
            },
            child: new RadioItem(beepUnits[index]),
          );
        },
      ),
    );
  }
}

class RadioItem extends StatelessWidget {
  final RadioModel _item;
  RadioItem(this._item);
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
        stream: Firestore.instance
            .collection('driver')
            .where('status', isEqualTo: 'On Duty')
            .limit(1)
            .snapshots(),
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
          switch (snapshot.connectionState) {
            case ConnectionState.waiting:
              return new Text(' ');
            default:
              return Container(
                margin: new EdgeInsets.all(5.0),
                child: new Row(
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    new Container(
                      height: 100.0,
                      width: 160.0,
                      child: Row(
                        children: <Widget>[
                          Container(
                            child: Padding(
                              padding: const EdgeInsets.only(
                                  left: 10.0, right: 10.0),
                              child: new Text(
                                'ETA',
                                style: TextStyle(
                                  color: _item.isSelected
                                      ? Colors.grey[200]
                                      : Colors.black,
                                  fontSize: ScreenUtil.instance.setSp(29.0),
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(top: 15.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Container(
                                  child: Row(
                                    children: <Widget>[
                                      Container(
                                        child: Icon(
                                          Icons.directions_bus,
                                          color: _item.isSelected
                                              ? Colors.grey[200]
                                              : Colors.black,
                                          size: ScreenUtil.instance.setSp(19.0),
                                        ),
                                      ),
                                      Container(
                                        child: new Text(
                                          _item.buttonTitle,
                                          style: new TextStyle(
                                            color: _item.isSelected
                                                ? Colors.grey[200]
                                                : Colors.black,
                                            fontSize:
                                                ScreenUtil.instance.setSp(15.0),
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                Container(
                                  child: Row(
                                    children: <Widget>[
                                      Container(
                                        child: Icon(
                                          Icons.swap_calls,
                                          color: _item.isSelected
                                              ? Colors.grey[200]
                                              : Colors.black,
                                          size: ScreenUtil.instance.setSp(19.0),
                                        ),
                                      ),
                                      Container(
                                        child: new Text(
                                          'Distance',
                                          style: new TextStyle(
                                            color: _item.isSelected
                                                ? Colors.grey[200]
                                                : Colors.black,
                                            fontSize:
                                                ScreenUtil.instance.setSp(15.0),
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                Container(
                                  child: Row(
                                    children: <Widget>[
                                      Container(
                                        child: Icon(
                                          Icons.face,
                                          color: _item.isSelected
                                              ? Colors.grey[200]
                                              : Colors.black,
                                          size: ScreenUtil.instance.setSp(19.0),
                                        ),
                                      ),
                                      Column(
                                        children: snapshot.data.documents
                                            .map((DocumentSnapshot document) {
                                          return Container(
                                            child: new Text(
                                              '${document['fname']}',
                                              style: new TextStyle(
                                                color: _item.isSelected
                                                    ? Colors.grey[200]
                                                    : Colors.black,
                                                fontSize: ScreenUtil.instance
                                                    .setSp(15.0),
                                              ),
                                            ),
                                          );
                                        }).toList(),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                      decoration: new BoxDecoration(
                        color:
                            _item.isSelected ? Colors.blue : Colors.transparent,
                        border: new Border.all(
                          width: 0.5,
                          color: _item.isSelected ? Colors.blue : Colors.grey,
                        ),
                        borderRadius:
                            const BorderRadius.all(const Radius.circular(10.0)),
                      ),
                    ),
                  ],
                ),
              );
          }
        });
  }
}

class RadioModel {
  bool isSelected;
  final String buttonTitle;

  RadioModel(this.isSelected, this.buttonTitle);
}