在 ListView.builder 中显示信息时出现问题

Question

我试图在 web flutter 中显示从 firebase 带来的一些信息，但我在实现 FutureBuilder 时遇到了问题，因为它没有显示信息，小部件没有呈现任何内容，页面完全空白，附上我发送的完整代码出现问题的页面，因为我遵循了我找到的所有教程，但我无法让它显示数据，同样我还附加了返回我用来获取数据的补码的 Json firebase，希望合作，非常感谢

完整代码

class DriverPages extends StatefulWidget {
  static final routeName = 'DriverPage';
  DriverPages({Key key}) : super(key: key);

  @override
  _DriverPagesState createState() => _DriverPagesState();
}

DatabaseRef driverRef =
    FirebaseDatabaseWeb.instance.reference().child('drivers');

class _DriverPagesState extends State<DriverPages> {
  GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
  List prueba;

  Future<List> driverItem() async {
    DatabaseSnapshot snapshot = await driverRef.once();
    Map<String, dynamic> json = snapshot.value;
    return json.values.toList();
  }

  Widget driverList() {
    return FutureBuilder<List>(
      future: driverItem(),
      builder: (contetx, snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
            itemCount: snapshot.data.length,
            itemBuilder: (context, index) {
              final value = snapshot.data[index];
              return ListTile(
                title: Text(value['fullname']),
                subtitle: Text(value['email']),
              );
            },
          );
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    if (userSnapshot != null) {
      return Scaffold(
        key: scaffoldKey,
        drawer: Container(
          width: 320,
          color: Colors.white,
          child: Drawer(
            child: PatimovilMenu(),
          ),
        ),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          padding: EdgeInsets.symmetric(
            vertical: 25,
            horizontal: 30,
          ),
          child: Column(
            children: <Widget>[
              PatimovilHeader(
                onPressed: () {
                  scaffoldKey.currentState.openDrawer();
                },
                titlePage: 'Driver Manager',
              ),
              Container(
                width: MediaQuery.of(context).size.width,
                height: (MediaQuery.of(context).size.height) - 260,
                alignment: Alignment.center,
                child: Center(
                  child: driverList(),
                ),
              ),
              PatimovilFooder(),
            ],
          ),
        ),
      );
    } else {
      Navigator.pushNamedAndRemoveUntil(
        context,
        LoginPage.routeName,
        (route) => false,
      );
    }
  }
}

这是返回我正在使用的依赖项的 Json

{VOVQv28SU2c0GgXJKcSp8UFchPz2: 
    {email: bibiana206@gmail.com, fullname: bibiana, identification: e8104970, phone: 2095770, status: Waiting, 
        vehicle_details: 
            {car_brand: Ferrari, car_color: rojo, car_model: cretta, car_plate: az12}
    },
dBncphEFOZbzGEt5qn44sD9BYVK2: 
    {email: bolivia20192019@gmail.com, fullname: Gustavo Barrios, identification: 14326048, phone: 60697350, status: Active, 
        vehicle_details: 
            {car_brand: Renault, car_color: Gris, car_model: Duster, car_plate: AY6787,}
    }
}

我无法让数据显示给我，它没有渲染任何东西

Answer 1

您应该检查未来的当前状态，因为有四种连接状态：

1. ConnectionState.none
2. ConnectionState.waiting
3. ConnectionState.active
4. ConnectionState.done

您仅在 snapshot.hasData 时返回小部件，这仅在连接状态完成且没有错误时才会发生。 在所有其他情况下，您的方法 driverList 将不返回任何内容。

所以，更新你的方法如下：

  Widget driverList() {
    return FutureBuilder<List>(
      future: driverItem(),
      builder: (contetx, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            return Center(child: Text('Something went wrong'));
          }
          
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, index) {
                final value = snapshot.data[index];
                return ListTile(
                  title: Text(value['fullname']),
                  subtitle: Text(value['email']),
                );
              },
            );
          }
        }
        return Center(child: CircularProgressIndicator());
      },
    );
  }