Flutter How to visualize nested maps from Firebase

Question

Im working on a project that it has nested maps in Firebase.

First of all here is Firebase document screenshot:

And this one is my how to fetch this document function to my model:

Future<StaffListModel> personelleriGetir(String id) async {
    try {
      var document = await _firestore
          .collection('path')
          .doc(id)
          .collection('path)
          .doc('staffs')
          .get();
      Map<String, dynamic>? documentData = document.data();
      print(documentData);
      return StaffListModel.fromMap(documentData ?? {});
    } on FirebaseAuthException catch (e) {
      Get.snackbar('Error', e.code);
      rethrow;
    }
  }

When I print documentData variable it returns perfectly(at least, thats what im thinking).

{staffList: [{user1: {Admin: {permission1: true, permission2: true}}}, {user2: {Admin: {permission1: true, permission2: true}}}]}

So here is my StaffListModel class:

class StaffListModel {
  List<Map<String, Map<String, Map<String, bool>>>>? staffs;
  StaffListModel({
    this.staffs,
  });

  Map<String, dynamic> toMap() {
    return {
      'staffs': staffs,
    };
  }

  factory StaffListModel.fromMap(Map<String, dynamic> map) {
    return StaffListModel(
      staffs: map['staffs'] != null
          ? List<Map<String, Map<String, Map<String, bool>>>>.from(map['staffs']
              ?.map((x) => Map<String, Map<String, Map<String, bool>>>.from(x)))
          : null,
    );
  }
}

Before if you ask what is this section " map['staffs'] ", I will say it is my Firebase Document's name.

Btw, I am using Riverpod FutureBuilder but it doesn't matter. I want to show this model in listViewBuilder.

I tried everything i know but i never show it up in ui. Here is what i tried:

SliverToBoxAdapter(
              child: staffFuture.when(
                  data: ((data) => ListView.builder(
                        shrinkWrap: true,
                        itemCount: 1,
                        itemBuilder: (BuildContext context, int index) {
                          return Text(data.staffs[index][]. toString());
                        },
                      )),
                  error: (error, s) => Text('Error'),
                  loading: () => const Center(
                        child: CircularProgressIndicator(),
                      )),
            ),

Thanks from now.