如何使每个网格图块可点击以将我带到 Flutter 中的新页面

Question

I need help with the code below... I have created a grid with a specific number of tiles... I would like to be able to click individually on each tile and open a new page after clicking on it. How can I do this in android studio?

class GridOne extends StatefulWidget {

  @override
  _GridOneState createState() => new _GridOneState();
}

class _GridOneState extends State<GridOne> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GridView.count(
        crossAxisCount: 6,
        children: List.generate(
          947,
          (index) {
            return Card(
              elevation: 10.0,
              color: Color(0xFF184946),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0),
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  color: Color(0xFF184946),
                  child: Center(
                    child: Text(
                      '$index',
                      style: TextStyle(fontSize: 18, color: Color(0xFFFCF8F8)),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

Answer 1

import 'package:flutter/material.dart';

class GridOne extends StatefulWidget {

  @override
  _GridOneState createState() => new _GridOneState();
}

class _GridOneState extends State<GridOne> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GridView.count(
        crossAxisCount: 6,
        children: List.generate(
          947,
              (index) {
            return RawMaterialButton(
              onPressed: () {
                /// Navigation code will come here
              },
              child: Card(
                elevation: 10.0,
                color: Color(0xFF184946),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    color: Color(0xFF184946),
                    child: Center(
                      child: Text(
                        '$index',
                        style: TextStyle(fontSize: 18, color: Color(0xFFFCF8F8)),
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

Answer 2

We can wrap the Card Widget in a GestureDetector to use the onTap() method:

return GestureDetector(
   onTap: () {
     // let's use the magic of Navigator to navigate to another screen
     Navigator.push(
       context,
       MaterialPageRoute(builder: (context) => SecondScreen()), // second screen widget
     );
   },
   child: Card(
     elevation: 10.0,
     color: Color(0xFF184946),
     shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(20.0),
     ),
     child: Padding(
       padding: const EdgeInsets.all(8.0),
       child: Container(
         color: Color(0xFF184946),
         child: Center(
           child: Text(
             '$index',
             style: TextStyle(fontSize: 18, color: Color(0xFFFCF8F8)),
           ),
         ),
       ),
     ),
   ),
);

Our full snippet would then be:

class GridOne extends StatefulWidget {

  @override
  _GridOneState createState() => new _GridOneState();
}

class _GridOneState extends State<GridOne> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GridView.count(
        crossAxisCount: 6,
        children: List.generate(
          947,
          (index) {
            return GestureDetector(
               onTap: () {
                 // let's use the magic of Navigator to navigate to another screen
                 Navigator.push(
                   context,
                   MaterialPageRoute(builder: (context) => SecondScreen()), // second screen widget
                 );
               },
               child: Card(
                 elevation: 10.0,
                 color: Color(0xFF184946),
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(20.0),
                 ),
                 child: Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: Container(
                     color: Color(0xFF184946),
                     child: Center(
                       child: Text(
                         '$index',
                         style: TextStyle(fontSize: 18, color: Color(0xFFFCF8F8)),
                       ),
                     ),
                   ),
                 ),
               ),
            );
          },
        ),
      ),
    );
  }