Сделать карты навигационными

Я начинаю программировать. Я пытаюсь создать мобильное приложение с флаттером. Создан домашний экран с виджетами. Идея состоит в том, что прикосновение к каждой карточке переносит вас на другую страницу. Он использовал разные методы, но не добился результатов. Я был бы очень признателен, если бы кто-нибудь сказал мне, почему я не перехожу на другие экраны и как это исправить. Как должен выглядеть мой код, чтобы исправить это. Большое тебе спасибо

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

Привет, я начинаю программировать. Я пытаюсь создать мобильное приложение с флаттером. Создан домашний экран с виджетами. Идея состоит в том, что прикосновение к каждой карточке переносит вас на другую страницу. Он использовал разные методы, но не добился результатов. Я был бы очень признателен, если бы кто-нибудь сказал мне, почему я не перехожу на другие экраны и как это исправить. Как должен выглядеть мой код, чтобы исправить это. Большое тебе спасибо

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
1
0
17
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто оберните карту в InkWell и добавьте этот код в метод onTap.

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

Замените свой OtherPage() виджетом, к которому вы хотите перейти.

Большое тебе спасибо. Ответ прекрасно решил мою проблему

Eve 23.04.2022 05:03

Другие вопросы по теме