Revision history [back]

To utilize the onTap feature within the Grid View of Flutter to navigate to particular pages, you need to follow these steps:

1. Create a class for the page you want to navigate to, and import it into the main file.

2. Define a List that contains the items you want to display in the Grid View.

3. Use the Grid View.builder function to build the Grid View.

4. Wrap each item in a GestureDetector widget.

5. Within the GestureDetector widget, add a Navigator widget and specify the page you want to navigate to.

Here is an example code snippet:

import 'package:flutter/material.dart';
import './detail_page.dart'; // import the detail page class

class HomePage extends StatelessWidget {

  final List<String> items = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grid View'),
      ),
      body: GridView.builder(
        itemCount: items.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
        ),
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () {
              Navigator.push(context, MaterialPageRoute(builder: (_) {
                return DetailPage(itemName: items[index]); // pass item name to detail page
              }));
            },
            child: Card(
              child: Center(
                child: Text(items[index]),
              ),
            ),
          );
        },
      ),
    );
  }
}

In this example, when an item is tapped, it will navigate to a detail page that displays the name of the item. The detail page class would look something like this:

import 'package:flutter/material.dart';

class DetailPage extends StatelessWidget {
  final String itemName;

  const DetailPage({Key key, this.itemName}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(itemName),
      ),
      body: Center(
        child: Text(itemName),
      ),
    );
  }
}

Note that in the DetailPage class, the constructor takes in a parameter for the item name that is passed from the home page. This allows the detail page to display the name of the item that was tapped.