problems when displaying information in a ListView.builder - flutter

Question

I am trying to show some information brought from firebase in web flutter but I have problems implementing FutureBuilder, since it does not show the information, the widget is not rendering anything the page is completely blank, attached I send the complete code of the page that is presenting the problem since I have followed all the tutorials that I have found but I can not make it show the data, in the same way I also attach the Json that returns the complement that I am using to obtain the data from firebase, I hope for the collaboration, thank you very much
Complete Code
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,
);
}
}
}
This is the Json that returns the dependency I am using
{VOVQv28SU2c0GgXJKcSp8UFchPz2:
{email: bibiana206#gmail.com, fullname: bibiana, identification: e8104970, phone: [phone], 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: [phone], status: Active,
vehicle_details:
{car_brand: Renault, car_color: Gris, car_model: Duster, car_plate: AY6787,}
}
}
I can't get the data to show me, it doesn't render anything

Answer 1

You should check the current state of the future as there are four connection states:
ConnectionState.none
ConnectionState.waiting
ConnectionState.active
ConnectionState.done
You were returning a widget only when snapshot.hasData which will occur only when the connection state is done & there are no errors.
In all other cases, your method driverList will be returning nothing.
So, update your method as follows:
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());
},
);
}