How to navigate to respective service pages when using Navigator via index

Question

The below code navigates to the respective services page (example: 'HomeDeliveryScreen', 'LaundryServiceScreen', 'PlumbingServiceScreen').

---

GridTile(
      footer: ElevatedButton(
          onPressed: () {
            // Navigate to it's dedicated pages
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => ServiceDetailScreen(
                  service: services[index],
                ),
              ),
            );
          },
        );

---

How can we get these respective service pages ('HomeDeliveryScreen', 'LaundryServiceScreen', 'PlumbingServiceScreen') dynamically? as in my case, each service is a different screen as mentioned above instead of the below line.

class ServiceDetailScreen extends StatelessWidget {
  const ServiceDetailScreen({Key? key, required this.service})
      : super(key: key);

  final Service service;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(service.categoryName),
        actions: [
          IconButton(
            onPressed: () {},
            icon: Icon(Icons.notifications),
          ),
        ],
      ),
      body: Container(
        // ******************************************
        // How can we get these respective service pages ('HomeDeliveryScreen', 'LaundryServiceScreen', 'PlumbingServiceScreen') dynamically? as in my case, each service is a different screen as mentioned above instead of the below line.
        // ******************************************
        child: HomeDeliveryScreen(),
      ),
    );
  }
}

---

Answer 1

use GridView.builder also you can use data.asMap().map(....)

GridView.builder(
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200,
                childAspectRatio: 3 / 2,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20),
            itemCount: widgets.length,
            itemBuilder: (BuildContext ctx, index) {
              final widget = widgets[index];
              final title = titles[index];
              
              return Column(children: [
                Text(title),
                Image.asset('yourImage'),
                ElevatedButton(
                  child: Text("to page"),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => widget,
                ),
              );
            },
        ),
              ]);
            })

full code

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.white,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final List<Widget> widgets = [HomeDeliveryScreen(), LaundryServiceScreen(), PlumbingServiceScreen()];
  final List<String> titles = ['first', 'second', 'third'];
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: GridView.builder(
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200,
                childAspectRatio: 3 / 2,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20),
            itemCount: widgets.length,
            itemBuilder: (BuildContext ctx, index) {
              final widget = widgets[index];
              final title = titles[index];
              
              return Column(children: [
                Text(title),
                Image.asset('yourImage'),
                ElevatedButton(
                  child: Text("to page"),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => widget,
                ),
              );
            },
        ),
              ]);
            }));
  }
}

class HomeDeliveryScreen extends StatelessWidget {
  Widget build(BuildContext context) {
    return Text('HomeDeliveryScreen');
  }
}


class LaundryServiceScreen extends StatelessWidget {
  Widget build(BuildContext context) {
    return Text('LaundryServiceScreen');
  }
}


class PlumbingServiceScreen extends StatelessWidget {
  Widget build(BuildContext context) {
    return Text('PlumbingServiceScreen');
  }
}