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

CodePudding user response：

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.