Getting error "The argument type 'JsObject' can't be assigned to the parameter type 'BuildContext'"

user_17811830 0
Viewed 1035

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,
        ),
       ),
      ),
     ),
dart flutter
1 Answers

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.

user_132744570
Related