Make cards navigable

Question

I am starting to program. I am trying to create a mobile app with flutter. Created a home screen with widgets. The idea is that touching each card takes you to a different page. He used different methods, but failed to get results. I would really appreciate it if someone could tell me why I am not navigating to other screens and how to fix it. What should my code look like to fix this. Thank you very much

import 'dart:ui';
import 'package:flutter/material.dart';

class CardTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Table(
      children: [
        TableRow(
            children: [
              SigleCard( color: Color.fromRGBO(203, 73, 73, 1), icon: Icons.book, text: 'Blog'),
              SigleCard( color: Color.fromRGBO(203, 73, 73, 1), icon: Icons.newspaper, text: 'Noticias' ),
            ]
        ),

        TableRow(
            children: [
              SigleCard( color: Color.fromRGBO(203, 73, 73, 1), icon: Icons.check, text: 'Especies chilenas' ),
              SigleCard( color: Color.fromRGBO(203, 73, 73, 1), icon: Icons.sunny, text: 'Temporadas por región' ),
            ]
        ),

        TableRow(
            children: [
              SigleCard( color: Color.fromRGBO(203, 73, 73, 1), icon: Icons.check, text: 'Modalidades de Pesca' ),
              SigleCard( color: Color.fromRGBO(203, 73, 73, 1), icon: Icons.check, text: 'Buenas prácticas' ),
            ]
        ),

        TableRow(
            children: [
              SigleCard( color: Color.fromRGBO(203, 73, 73, 1), icon: Icons.balance, text: 'Normativa' ),
              SigleCard( color: Color.fromRGBO(203, 73, 73, 1), icon: Icons.error, text: 'Infracciones' ),
            ]
        ),

      ],
    );
  }
}

class SigleCard extends StatelessWidget {

  final IconData icon;
  final Color color;
  final String text;

  const SigleCard({
    Key? key,
    required this.icon,
    required this.color,
    required this.text
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return _CardBackground(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircleAvatar(
              backgroundColor: this.color,
              child: Icon( this.icon, size: 35, color: Colors.white, ),
              radius: 30,
            ),
            SizedBox( height: 10 ),
            Text( this.text , style: TextStyle( color: this.color, fontSize: 18 ),)
          ],
        )
    );
  }
}


class _CardBackground extends StatelessWidget {

  final Widget child;

  const _CardBackground({
    Key? key,
    required this.child
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(15),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: BackdropFilter(
          filter: ImageFilter.blur( sigmaX: 5, sigmaY: 5 ),
          child: Container(
            height: 180,
            decoration: BoxDecoration(
                color: Color.fromRGBO(62, 66, 107, 0.7),
                borderRadius: BorderRadius.circular(20)
            ),
            child: this.child,
          ),
        ),
      ),
    );
  }
}

Hello, I am starting to program. I am trying to create a mobile app with flutter. Created a home screen with widgets. The idea is that touching each card takes you to a different page. He used different methods, but failed to get results. I would really appreciate it if someone could tell me why I am not navigating to other screens and how to fix it. What should my code look like to fix this. Thank you very much

Answer 1

Just wrap your card in an InkWell and add this code in the onTap method

 onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => OtherPage()),
  );
}

Replace your OtherPage() with the widget that you want to navigate to.