How to passs id with type string to listview.builder? – Flutter

my app got error "Type ‘String’ is not a subtype of type ‘int’ of ‘index’. This is because i want to get data with a string id. But i use listview.builder and it can’t accept a string data
this is my code

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {
  late Future<List<Agent>> agents;

  @override
  void initState() {
    super.initState();
    agents = fetchAgents();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Anime List'),
        ),
      body: Column(
          children: [
              FutureBuilder(
                builder: (context, AsyncSnapshot<List<Agent>> snapshot) {
                  if (snapshot.hasData) {
                    return Expanded(
                      child: ListView.builder(
                        itemCount: snapshot.data?.length,
                        itemBuilder: (BuildContext context,  index) {
                          return Card(
                            child: ListTile(
                              contentPadding: const EdgeInsets.symmetric(
                                  horizontal: 20.0, vertical: 10.0),
                              leading: CircleAvatar(
                                radius: 30,
                                backgroundImage: NetworkImage(
                                    snapshot.data![index].displayIconSmall),
                              ),
                              title: Text(snapshot.data![index].displayName),
                              subtitle: Text('Role: ${snapshot.data![index].role.displayName}'),
                              onTap: () {
                                Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (context) => DetailPage(
                                        item: snapshot.data![index].uuid,
                                        title: snapshot.data![index].displayName,
                                        role: snapshot.data![index].role.displayName,
                                        image: snapshot.data![index].displayIconSmall,
                                        description: snapshot.data![index].description,),
                                  ),
                                );
                              },
                            ),
                          );
                        },
                      ),
                    );
                  } else if (snapshot.hasError) {
                    return Center(child: Text('${snapshot.error}'));
                  }
                  return const CircularProgressIndicator();
                },
                future: agents,
              ),
          ],
        ),
    );
  }
}

class Agent {
  final String uuid;
  final String displayName;
  final String description;
  final String displayIcon;
  final String displayIconSmall;
  final bool isPlayableCharacter;
  Role role;

  Agent({
    required this.uuid,
    required this.displayName,
    required this.description,
    required this.displayIcon,
    required this.displayIconSmall,
    required this.isPlayableCharacter,
    required this.role
  });

  factory Agent.fromJson(Map<String, dynamic> json) {
    return Agent(
      uuid: json['uuid'],
      displayName : json['displayName'],
      description : json['description'],
      displayIcon : json['displayIcon'],
      displayIconSmall : json['displayIconSmall'],
      isPlayableCharacter : json['isPlayableCharacter'],
      role : json['role'],
      );
  }
  Map<String, dynamic> toJson() => {
        'uuid': uuid,
        'displayName': displayName,
        'description': description,
        'displayIcon': displayIcon,
        'displayIconSmall': displayIconSmall,
        'isPlayableCharacter': isPlayableCharacter,
        'role': role
      };
}

class Role{
  final String uuid;
  final String displayName;
  final String description;

   Role({
    required this.uuid,
    required this.displayName,
    required this.description,
  });

  factory Role.fromJson(Map<String, dynamic> json) {
    return Role(
      uuid: json['uuid'],
      displayName : json['displayName'],
      description : json['description'],
      );
  }

  Map<String, dynamic> toJson() => {
        'uuid': uuid,
        'displayName': displayName,
        'description': description,
      };
}

Future<List<Agent>> fetchAgents() async {
  final response =
      await http.get(Uri.parse('https://valorant-api.com/v1/agents'));

  if (response.statusCode == 200) {
    var jsonResponse = json.decode(response.body)['data'];
    var data = jsonResponse["data"];
    if(data is Map) {
        Role user = Role(
          uuid:["uuid"].toString(),
          displayName:["displayName"].toString(),
          description:["description"].toString(),
        );
        return jsonResponse.map((role) => Agent.fromJson(role)).toList();
      };
    return jsonResponse.map((agent) => Agent.fromJson(agent)).toList();
  } else {
    throw Exception('Failed to load data');
  }
}

i already try to change it to integer but it can’t since listview.build must have index and index must be integer. I expecting the data can be pass because the uid for the api data is string type