Using NavigationRail with multiple Futures - flutter

Question

I am trying to make a screen with NavigationRail where each destination displays table with different data fetched from backend.
I tried implementing it with NavigationRail and three futures, but each time I transit from one destination to another, I see a red screen with error on a second and then transit completes. My logs show following error:
The following TypeErrorImpl was thrown building FutureBuilder<List>(state: _FutureBuilderState<List>#675cb):
Expected a value of type 'D1', but got one of type 'D2'
The relevant error-causing widget was
FutureBuilder<List>
Could you please see if I am missing something? I tried the same approach with three futures with carousel_slider widget and did not run into a same problem. I guess I am misusing NavigationRail somehow.
Here is base code:
class DataScreen extends StatefulWidget {
const DataScreen({super.key});
#override
State<DataScreen> createState() => _DataScreenState();
}
class _DataScreenState extends State<DataScreen> {
late Future<List<D1>> data1;
late Future<List<D2>> data2;
late Future<List<D3>> data3;
int _selectedIndex = 0;
#override
void initState() {
super.initState();
data1 = D1Service().getD1();
data2 = D2Service().getD2();
data3 = D3Service().getD3();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: <Widget>[
NavigationRail(
selectedIndex: _selectedIndex,
groupAlignment: 0.0,
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
});
},
labelType: NavigationRailLabelType.all,
leading: const SizedBox(),
trailing: const SizedBox(),
destinations: const <NavigationRailDestination>[
NavigationRailDestination(
icon: Icon(Icons.perm_identity),
selectedIcon: Icon(Icons.person),
label: Text('D1'),
),
NavigationRailDestination(
icon: Icon(Icons.groups_outlined),
selectedIcon: Icon(Icons.groups),
label: Text('D2'),
),
NavigationRailDestination(
icon: Icon(Icons.inventory_2_outlined),
selectedIcon: Icon(Icons.inventory_2),
label: Text('D3'),
),
],
),
const VerticalDivider(thickness: 1, width: 1),
const Spacer(),
// This is the main content.
Center(
child: Container(
child: _toTableAll(),
),
),
const Spacer(),
],
),
);
}
Widget _toTableAll() {
if (_selectedIndex == 0) {
return _toTable(data1);
} else if (_selectedIndex == 1) {
return _toTable(data2);
}
return _toTable(data3);
}
Widget _toTable<T>(Future<List<T>> item) {
return FutureBuilder<List<T>>(
future: item,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Container(
constraints: const BoxConstraints(maxWidth: 800),
child: MTable(snapshot.data!),
);
} else if (snapshot.hasError) {
return Text('${snapshot.error}');
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
},
);
}
}

Answer 1

Changing snapshot.hasData with snapshot.connectionState == ConnectionState.done solved the problem