Ad

How Can I Make Each Grid Tile Clickable To Bring Me To A New Page In Flutter

- 1 answer

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

Answer

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)),
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
Ad
source: stackoverflow.com
Ad