How to solve: Exception caught by gesture library, type 'Null' is not a subtype of type 'String' of 'function result'

Question

Asked by Dylan on December 17, 2021 (source).

Currently I am coding a shop application and trying to make the product card clickable, however there was an error that occurred:

Exception caught by gesture library, type 'Null' is not a subtype of type 'String' of 'function result'

Here is my code for the product card (button):

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:minimlst/components/product_card.dart';
import 'package:minimlst/constants.dart';
import 'package:minimlst/models/product.dart';
import 'package:minimlst/screens/details/details_screen.dart';
import 'package:minimlst/screens/home/components/discount_banner.dart';
import 'package:minimlst/screens/home/components/home_header.dart';
import 'package:minimlst/size_config.dart';

class Body extends StatelessWidget {
  const Body({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(height: getProportionateScreenWidth(20)),
            HomeHeader(),
            SizedBox(height: getProportionateScreenWidth(30)),
            DiscountBanner(),
            SizedBox(height: getProportionateScreenWidth(20)),
            Column(children: [
              Text(
                "Our Catalog",
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
              ),
            ]),
            SizedBox(height: getProportionateScreenWidth(30)),
            SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Column(
                children: [
                  ...List.generate(
                    demoProducts.length,
                    (index) => ProductCard(
                        product: demoProducts[index],
                        press: () => Navigator.pushNamed(
                            context, DetailsScreen.routeName)),
                  ),
                  SizedBox(width: getProportionateScreenWidth(20)),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

and here is my code for the ProductCard:

import 'package:flutter/material.dart';
import 'package:minimlst/models/product.dart';

import '../constants.dart';
import '../size_config.dart';

class ProductCard extends StatelessWidget {
  const ProductCard({
    Key? key,
    this.width = 140,
    this.aspectRetio = 1.02,
    required this.product,
    required this.press,
  }) : super(key: key);

  final double width, aspectRetio;
  final Product product;
  final GestureTapCallback press;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: press,
      child: SizedBox(
        width: getProportionateScreenWidth(width),
        child: Padding(
          padding: EdgeInsets.only(left: getProportionateScreenWidth(20)),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: aspectRetio,
                child: Container(
                    padding: EdgeInsets.all(getProportionateScreenWidth(20)),
                    decoration: BoxDecoration(
                      color: kSecondaryColor.withOpacity(0.2),
                      borderRadius: BorderRadius.circular(15),
                    ),
                    child: Image.asset(product.images[0])),
              ),
              Text(
                product.title,
                style: TextStyle(color: Colors.black),
                maxLines: 2,
              ),
              Row(
                children: [
                  Text(
                    "\$${product.price}",
                    style: TextStyle(
                      fontSize: getProportionateScreenWidth(18),
                      fontWeight: FontWeight.w600,
                      color: kPrimaryColor,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Please help if you can, any kind of help would be very much appreciated, if you need any other bits of the code lmk

Answer

Question answered by Asad W (source).

the issue is that you are passing wrong function argument to press
As syntax is () => Navigator.pushNamed(
                            context, DetailsScreen.routeName)
   as fat arrow refers return so you are returning Navigator.pushNamed as argument required function who's return type must be void etc

so the change is press:(){
Navigator.pushNamed(context, DetailsScreen.routeName)
}
DART FLUTTER
SHARE: