Flutter Route Not Responding onClick

Question

I have created a card component that contains icons, text and pressn as parameters inside card component. The pressn represents route. All other widgets are working except pressn widget which represents the route widget.

Am I suppose to assign any unClick or tab function to pressn?

Below is the code

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:api_example_app/constants.dart';
import 'package:flutter/widgets.dart';

class CardsParent extends StatefulWidget {
  const CardsParent({
    Key key,
    @required this.size,
    this.icon,
    this.title,
    this.subtitle,
    this.pressn,
  }) : super(key: key);

  final Size size;
  final IconData icon;
  final String title;
  final String subtitle;
  final GestureTapCallback pressn;

  @override
  _CardsParentState createState() => _CardsParentState();
}

class _CardsParentState extends State<CardsParent> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 140,
      height: 100,
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15.0),
        ),
        color: Colors.white,
        elevation: 10,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              leading: Icon(
                widget.icon,
                size: 50,
                color: kOrangeColor,
              ),
              title: Text(widget.title,
                  style: TextStyle(fontSize: 14.0, color: kOrangeColor)),
              subtitle: Text(widget.subtitle,
                  style: TextStyle(fontSize: 11.0, color: kOrangeColor)),
            ),
          ],
        ),
      ),
    );
  }
}

Below is where I want to make use of the code, where I passed pressn to represent the Navigator.

 Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                CardsParent(
                  size: size,
                  icon: FontAwesomeIcons.temperatureHigh,
                  title: 'Tem',
                  subtitle: '33C',
                  pressn: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => TemSensorScreen(),
                      ),
                    );
                  },
                ),
                CardsParent(
                  size: size,
                  title: 'Hum ',
                  subtitle: '75%',
                  icon: FontAwesomeIcons.cloudShowersHeavy,
                 pressn: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => HumSensorScreen(),
                      ),
                    );
                  },
                ),
              ],
            ),

What am I doing wrong?

Answer 1

There are several issues in your code:

• In the current scenario, when you call onTap it will return null value always and your GestureDetector won't respond to touches. So remove the following code:

get onTap => null; // Remove this

• You need to pass widget.onTap to your gesture detector (not onTap):

@override
Widget build(BuildContext context) {
   return GestureDetector(
      onTap: widget.onTap, // Change is here
      child: Container(
          // Remaining Code
      ),
   );
}

Answer 2

You forgot to use GestureDetector.

return GestureDetector(
  onTap: pressn,
  child: Container(
    width: 140,
    height: 100,
    child: Card(),
  ),
)