I tried every possible way to fix it but it didn't worked for me please help me how to fix it. I think I am missing something, it works in older version of Flutter but not in recent one. Thank you very much for help in advance. I really appreciate it. I am trying to set (onTap) function on an image to go to the next widget screen. Here is my code.

    import 'dart:js';
    
    import 'package:flutter/material.dart';
    import 'package:zar/screen/category.dart';
    
    class TopCard extends StatefulWidget {
      const TopCard({Key? key}) : super(key: key);
    
      @override
      State<TopCard> createState() => _TopCardState();
    }
    
    // TOP CARD CLASS STARTS HERE
    class CardItem {
      final String urlImage;
      final String title;
      final String subTitle;
    
      const CardItem({
        required this.urlImage,
        required this.title,
        required this.subTitle,
      });
    }
    
    // TOP CARD WIDGETS STARTS HERE
    Widget topCard({
      required CardItem item,
    }) =>
        Container(
          width: 150,
          child: Column(
            children: [
              Expanded(
                child: AspectRatio(
                  aspectRatio: 2 / 2,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Material(
                      child: Ink.image(
                        image: NetworkImage(item.urlImage),
                        child: InkWell(
                          onTap: () => Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => Categories(
                                item: item,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 4),
              Text(
                item.title,
                style: const TextStyle(
                    color: Color(0xff5e35b1),
                    fontSize: 20,
                    fontWeight: FontWeight.bold),
              ),
              Text(
                item.subTitle,
                style: const TextStyle(
                  color: Colors.redAccent,
                ),
              ),
            ],
          ),
        );
    
    class _TopCardState extends State<TopCard> {
    // TOP CARD LIST VIEW STARTS HERE
      List<CardItem> items = const [
        CardItem(
          urlImage:
              'https://img.freepik.com/free-vector/pizza-melted-cartoon-illustration-flat-cartoon-style_138676-2876.jpg?size=338&ext=jpg',
          title: 'PIZZA',
          subTitle: '\$20',
        ),
        CardItem(
          urlImage:
              'https://img.freepik.com/free-vector/triangle-sandwich-cartoon-icon-illustration_368721-11.jpg?size=338&ext=jpg',
          title: 'SANDWICH',
          subTitle: '\$7.99',
        ),
        CardItem(
          urlImage:
              'https://thumbs.dreamstime.com/b/french-fries-icon-flat-vector-related-icon-long-shadow-web-mobile-applications-can-be-used-as-logo-pictogram-icon-90676285.jpg',
          title: 'FRIES',
          subTitle: '\$2.99',
        ),
        CardItem(
          urlImage:
              'https://i.pinimg.com/originals/42/de/53/42de53a97cac79ddcaee570c436a10e6.jpg',
          title: 'BURGER',
          subTitle: '\$5.99',
        ),
      ];
      @override
      Widget build(BuildContext context) {
        return Container(
          margin: const EdgeInsets.only(top: 20),
          height: 150,
          child: ListView.separated(
            scrollDirection: Axis.horizontal,
            itemCount: 4,
            separatorBuilder: (constext, _) => const SizedBox(width: 16),
            itemBuilder: (context, index) => topCard(
              item: items[index],
            ),
          ),
        );
      }
    }

But I get Error in (context)

    child: InkWell(
     onTap: () => Navigator.push(
     context,
      MaterialPageRoute(
       builder: (context) => Categories(
        item: item,
        ),
       ),
      ),
     ),

CodePudding user response：

your helper method needs the context

 child: InkWell(
     onTap: () => Navigator.push(
     context, // HERE You need context
      MaterialPageRoute(
       builder: (context) => Categories(
        item: item,
        ),
       ),
      ),
     ),

So add it as a parameter

// TOP CARD WIDGETS STARTS HERE

Widget topCard({
      required CardItem item,
      required BuildContext context
    }) => ...

and remove

import 'dart:js'; // it gives you another context that you don't need 'JsObject' 

Another solution is to move topCard helper method within your state class, so you dont have to pass the context as an argument.