出现错误“无法将参数类型‘JsObject’分配给参数类型‘BuildContext’”

Question

I tried to fix it but it didn't work for me. I think I am missing something, it works in older version of Flutter but not in recent one.

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

Answer 1

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.

Answer 2

I got the same error. Flutter automatically imported dart.js library, which is giving the error. Go to the top of the file and remove this line:

import 'dart:js';