使用Consumer Package 微件后,Flutter colorScheme恢复为默认值

ix0qys7i  于 2023-01-14  发布在  Flutter
关注(0)|答案(1)|浏览(102)

在参加Flutter课程时,我遇到了一个问题,用消费者 Package IconButton会导致它将我的主题颜色更改为默认蓝色。我认为这是因为传递到构建器的上下文不同。使用消费者保留主题的正确方法是什么?
以下是针对消费者的课程:

class ProductItem extends StatelessWidget {
  const ProductItem({super.key});

  @override
  Widget build(BuildContext context) {
    final product = Provider.of<Product>(context, listen: false);

    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: GridTile(
        footer: GridTileBar(
          backgroundColor: Colors.black87,
          leading: Consumer<Product>(
            builder: (context, value, _) => IconButton(
              icon: Icon(
                value.isFavorite ? Icons.favorite : Icons.favorite_border,
              ),
              color: Theme.of(context).colorScheme.secondary,
              onPressed: () => product.toggleFavorite(),
            ),
          ),
          title: Text(
            product.title,
            textAlign: TextAlign.center,
          ),
          trailing: IconButton(
            icon: const Icon(Icons.shopping_cart),
            color: Theme.of(context).colorScheme.secondary,
            onPressed: () {},
          ),
        ),
        child: GestureDetector(
          onTap: () {
            Navigator.of(context).pushNamed(
              ProductDetailScreen.routeName,
              arguments: product.id,
            );
          },
          child: Image.network(
            product.imageUrl,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

主题是这样的

theme: ThemeData(
          colorScheme: ColorScheme.fromSwatch(
            primarySwatch: Colors.purple,
            accentColor: Colors.deepOrange,
          ),
          fontFamily: 'Lato',
        ),
xqnpmsa8

xqnpmsa81#

好吧,我自己想明白了,问题是作为参数传入Consumer builder方法的上下文与传入ProductItem的build方法的上下文是不同的,并且在Consumer的作用域中覆盖了它。
要解决这个问题,您需要做的就是重命名传递给构建器函数的变量 (例如,用下划线替换它)

leading: Consumer<Product>(
  //also had to change child argument to two underscores to avoid name conflict
  builder: (_, value, __) => IconButton(
    icon: Icon(
      value.isFavorite ? Icons.favorite : Icons.favorite_border,
    ),
    color: Theme.of(context).colorScheme.secondary,
    onPressed: () => product.toggleFavorite(),
  ),
),

相关问题