颤振：无法读取 null 的属性（读取颜色）

Question

我正在运行此代码，但出现错误 无法读取 null 的属性（读取颜色）

在代码中加星标的行

import 'package:flutter/material.dart';
import 'package:untitled/constants.dart';
import 'package:untitled/models/product.dart';
import 'package:untitled/screens/home/components/categories.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(15.0),
          child: Text(
            "Women",
            textAlign: TextAlign.left,
            style: Theme.of(context)
                .textTheme
                .headline5
                .copyWith(fontWeight: FontWeight.bold),
          ),
        ),
        Categories(),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: GridView.builder(
              itemCount: products.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 0.75,
              ),
              itemBuilder: (Context, index) => ItemCard(),
            ),
          ),
        ),
      ],
    );
  }
}

class ItemCard extends StatelessWidget {
  final Product product;
  final Function press;
  const ItemCard({
    Key key,
    this.product,
    this.press,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: press,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Expanded(
            child: Container(
              padding: EdgeInsets.all(20.0),
              height: 100,
              width: 100,
              decoration: BoxDecoration(
*               color: product.color,   //error in that line
                borderRadius: BorderRadius.circular(15),
              ),
              child: Hero(
                tag: "${product.id}",
                child: Image.asset(product.image),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 5),
            child: Text(
              product.title,
              style: TextStyle(
                color: ktextlightcolor,
              ),
            ),
          ),
          Text(
            "\$${product.price}",
            style: TextStyle(fontWeight: FontWeight.bold),
          )
        ],
      ),
    );
  }
}

---

这是product.dart

import 'package:flutter/material.dart';

class Product {
  final String image, title, description;
  final int price, size, id;
  var color;
  Product({
    this.id,
    this.image,
    this.title,
    this.price,
    this.description,
    this.size,
    this.color,
  });
}

List<Product> products = [
  Product(
    id: 1,
    title: "office code",
    price: 232,
    size: 12,
    description: dummyText,
    image: "assets/images/bag_1.png",
    color: const Color(0XFF3D82AE),
  ),
  Product(
      id: 2,
      title: "belt bag",
      price: 234,
      size: 8,
      description: dummyText,
      image: "assets/images/bag_2.png",
      color: const Color(0xffd3a084)),
  Product(
      id: 3,
      title: "hang top",
      price: 444,
      size: 13,
      description: dummyText.
      image: "assets/images/bag_3.png",
      color: const Color(0XFF989493)),
  Product(
      id: 4,
      title: "old fashion",
      price: 555,
      size: 18,
      description: dummyText,
      image: "assets/images/bag_4.png",
      color: const Color(0xffe6b398)),
  Product(
      id: 5,
      title: "office code",
      price: 999,
      size: 33,
      description: dummyText,
      image: "assets/images/bag_5.png",
      color: const Color(0xfffb7883)),
  Product(
      id: 6,
      title: "siple bag",
      price: 1299,
      size: 6,
      description: dummyText,
      image: "assets/images/bag_6.png",
      color: const Color(0xffaeaeae)),
];

String dummyText =
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

Answer 1

您需要将产品实例传递给您的ItemCard 构造函数。它目前被设置为可选参数，因为它用{} 包装。

所以，假设您想传递 products 列表中的产品，它应该是这样的：

Expanded(
  child: Padding(
    ...,
    child: GridView.builder(
      itemCount: products.length,
      ...,
      itemBuilder: (Context, index) => ItemCard(product: products[index]),
    ),
  ),
),

Answer 2

您必须在 ItemCard() 类上传递参数，其中您已经提到了 2 个参数。你没有通过任何参数。如下更新您的代码：

itemBuilder: (Context, index) => ItemCard(product: products[index], press: press)