So I have this code from my home screen where I build a listView using components from a list, then I want to when I click on each especific one it navigates to the especific item screen, so what I want is to get each item of this list view to navigate to its especific page, example: the first item is "agentes", when I click on it I want it to navigate to "AgentScreen", can anyone help me?

class HomeScreen extends StatelessWidget {
  HomeScreen({super.key});
  final List<HomeModel> homes = [
    HomeModel(00, "Agentes", "assets/icons/agents_icon.png"),
    HomeModel(01, "Armas", "assets/icons/weapons_icon.png"),
    HomeModel(02, "Mapas", "assets/icons/maps_icon.png"),
    HomeModel(03, "Ranks", "assets/icons/ranks_icon.png"),
    HomeModel(04, "Cards", "assets/icons/cards_icon.png"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 29, 39, 54),
      body: SafeArea(
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.fromLTRB(0, 5, 0, 5),
              width: 400,
              height: 35,
              alignment: Alignment.center,
              child: Text(
                'Guia de Valorant',
                style: GoogleFonts.bowlbyOneSc(
                  color: Colors.white,
                  letterSpacing: .5,
                  fontSize: 24,
                ),
              ),
            ),
            Expanded(
              child: ListView(children: [
                for (var home in homes)
                  Container(
                    margin: const EdgeInsets.fromLTRB(10, 15, 10, 20),
                    padding: const EdgeInsets.fromLTRB(30, 5, 15, 5),
                    width: double.infinity,
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: const Color.fromARGB(255, 255, 70, 85),
                        width: 3,
                      ),
                    ),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Container(
                          margin: const EdgeInsets.fromLTRB(0, 1, 38, 0),
                          child: Stack(
                            alignment: Alignment.center,
                            children: [
                              Text(
                                home.tittle,
                                style: GoogleFonts.bowlbyOneSc(
                                  color: Colors.white,
                                  letterSpacing: .5,
                                  fontSize: 24,
                                ),
                              ),
                            ],
                          ),
                        ),
                        const Spacer(),
                        // ignore: sized_box_for_whitespace
                        Container(
                          width: 125,
                          height: 135,
                          child: Stack(
                            alignment: Alignment.center,
                            children: [
                              Image.asset(
                                home.icon,
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
              ]),
            ),
          ],
        ),
      ),
    );
  }
}

then I have this code for example the screen the first item should go:

class AgentScreen extends StatelessWidget {
  const AgentScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.fromLTRB(21, 44, 19.5, 52),
      width: double.infinity,
      decoration: const BoxDecoration(
        color: Color(0xff0f1923),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            margin: const EdgeInsets.fromLTRB(8, 5, 0, 0),
            width: double.infinity,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                GestureDetector(
                  onTap: () {
                    Navigator.of(context).pushReplacementNamed(Routes.home);
                  },
                  child: Container(
                    margin: const EdgeInsets.fromLTRB(0, 0, 100, 2),
                    width: 15,
                    height: 25,
                    child: Image.asset('assets/icons/back_icon.png'),
                  ),
                ),
                Text(
                  'Agentes',
                  textAlign: TextAlign.center,
                  style: GoogleFonts.bowlbyOneSc(
                    fontSize: 24,
                    fontWeight: FontWeight.w400,
                    height: 1.525,
                    letterSpacing: 0.3000000119,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

I use routes to navigate between pages

class Routes {
  Routes._();

  //static variables
  static const String splash = '/splash';
  static const String home = '/home';
  static const String agents = "/agents";
//static const String detail = '/detail';
  // static const String weapons = '/weapons';

  static final routes = <String, WidgetBuilder>{
    splash: (BuildContext context) => const SplashScreen(),
    home: (BuildContext context) => HomeScreen(),
    agents: (BuildContext context) => const AgentScreen(),
    // detail: (BuildContext context) => DetailScreen(),
    // weapons: (BuildContext context) => WeaponDetailScreen(),
  };
}

CodePudding user response：

You could use ListTile and then onTap: () => Navigator.of(context).pushReplacementNamed(myRoutes[listIndex]); if you put all your routes into a list.