我试着修复它,但它对我不起作用。我想我错过了一些东西,它在旧版本的Flutter中起作用,但在最近的版本中不起作用。
我正在尝试在图像上设置(onTap)功能以转到下一个小部件屏幕。
下面是我的代码:
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],
),
),
);
}
}
但在(上下文)中出现错误
child: InkWell(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Categories(
item: item,
),
),
),
),
2条答案
按热度按时间0x6upsns1#
你的助手方法需要
context
因此将其添加为参数
//顶卡小工具从此处开始
并除去了
另一个解决方案是在状态类中移动
topCard
帮助器方法,这样就不必将context
作为参数传递。lvjbypge2#
我得到了同样的错误。Flutter自动导入dart.js库,这是给错误。去文件的顶部,并删除此行: