List into a class show it after a a clickable ListView.builder in flutter

Question

I created these classes and this list to make it clickable in flutter with a ListView.builder. When I click on a name I take me to the clan page. How do I show the list of members in the clan class and make it tapable to the "Member profile page"? or is there a different way to do it?

These are the classes

class Clan{
  String name;int member;DateTime born;
  List<MemberClan> listMemberClan;
  List<Videogame> listVieogame;
  Clan ({this.born,this.member,this.name, this.listMemberClan, this.listVieogame});
}

class MemberClan{
  String memberClanName, email; int age;
  List<Videogame> memberVideogamelist;
  MemberClan({this.age,this.email,this.memberClanName, this.memberVideogamelist});
}

class Videogame{
  String videogameName, softwarehouse, type;
  Videogame({this.softwarehouse,this.videogameName,this.type});
}

List<Clan> clanList =[
  Clan(
    name: "Wof",
    member: 2,
    listMemberClan: [
      MemberClan(
        memberClanName: "redwolf",
        email: "redwolf@email.com",
        memberVideogamelist: [
          Videogame(
            videogameName: "fifa20",
            softwarehouse: "Ea",
            type: "sport"
          ),
        ]
      ),
      MemberClan(
        memberClanName: "shaps",
        email: "shaps@email.com",
        memberVideogamelist: [
          Videogame(
            videogameName: "fifa21",
            softwarehouse: "Ea",
            type: "sport"
          ),
          Videogame(
            videogameName: "callofduty MW",
            softwarehouse: "Activision",
            type: "fps"
          ),
        ]
      ),
    ],
  ),
  Clan(
    name: "Ika",
    member: 1,
     listMemberClan: [
      MemberClan(
        memberClanName: "stinfo",
        email: "stinfo@email.com",
        memberVideogamelist: [
          Videogame(
            videogameName: "Call Of Duty: MW",
            softwarehouse: "Activision",
            type: "fps"
          ),
        ]
      ),
    ],
    
  ),
];

these are the the simply widget for the list and the clanpage are just a simply example there isn't UI

class ClanList extends StatelessWidget {
  final Clan clan;
  final MemberClan memberClan;
  final Videogame videogame;

  const ClanList({Key key, this.clan, this.memberClan, this.videogame})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Expanded(
          child: ListView.builder(
            itemCount: clanList.length,
            itemBuilder: (context, index) => InkWell(onTap: (){Navigator.push(context, MaterialPageRoute(builder: (context)=> ClanPage(clan: clanList[index],)));},
                          child: ListTile(
                title: Text(clanList[index].name),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class ClanPage extends StatelessWidget {
  final Clan clan;
  final MemberClan memberClan;
  final Videogame videogame;

  const ClanPage({Key key, this.clan, this.memberClan, this.videogame})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Text(clan.name),
            Text(clan.member.toString()),
            //here i want show a clickable list of the member
            //and tap or clik on name I want show the member profilepage
          ],
        ),
      ),
    );
  }
}

Answer 1

In your clan class add the following code:-

class ClanPage extends StatelessWidget {
  final Clan clan;
  final MemberClan memberClan;
  final Videogame videogame;

  const ClanPage({Key key, this.clan, this.memberClan, this.videogame})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Expanded(
          child: ListView.builder(
            itemCount: clan.listMemberClan.length,
            itemBuilder: (context, index) => ListTile(
              onTap: (){Navigator.push(context, MaterialPageRoute(builder: (context)=> MemberPage(memberClan: clan.listMemberClan[index],)));},
              title: Text(clan.listMemberClan[index]),
            ),
          ),
        ),
      ),
    );
  }
}

class MemberPage extends StatelessWidget {
  final MemberClan memberClan;
  const ClanPage({this.memberClan});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        //show your details here like:-
        child:Text(memberClan.email),
      )
    );
  }
}