使卡片可导航

Question

我开始编程了。我正在尝试创建一个带有 flutter 的移动应用程序。创建了一个带有小部件的主屏幕。这个想法是，触摸每张卡片会将您带到不同的页面。他用了不同的方法，但都没有得到结果。如果有人能告诉我为什么我不导航到其他屏幕以及如何修复它，我将不胜感激。我的代码应该是什么样子来解决这个问题。非常感谢

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

你好，我开始编程了。我正在尝试创建一个带有 flutter 的移动应用程序。创建了一个带有小部件的主屏幕。这个想法是，触摸每张卡片会将您带到不同的页面。他用了不同的方法，但都没有得到结果。如果有人能告诉我为什么我不导航到其他屏幕以及如何修复它，我将不胜感激。我的代码应该是什么样子来解决这个问题。非常感谢

Answer 1

只需将您的卡片包裹在 InkWell 中并在 onTap 方法中添加此代码

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

将您的 OtherPage() 替换为您要导航到的小部件。

使卡片可导航

Make cards navigable

screen

widget

navigator

flutter

card