flutterdart

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


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(),
      ),
    );
  }
}

enter image description here


Solution

  • 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');
      }
    }