如何在flutter中缓存图像？

Question

我有一个颤振应用程序。我通过 HTTP 在那里拍摄图像并希望缓存它们，因为滚动时所有内容都会再次加载并需要时间。\n我该如何解决这个问题？如果你能给出一个例子，请。\n有必要不再下载它。那些已加载的产品最好已经在缓存中或者至少是图片中。我怎样才能做到这一点？

\n

//method gets products\nFuture<List<Product>> getProducts(int id) async {\nvar response = await http.get(Uri.parse('...'));\nfinal products = jsonDecode(response.body).cast<Map<String, dynamic>>();\n\nList<Product> list = products.map<Product>((json) => Product.fromJson(json)).toList();\n\nreturn list;}\n// parse json\nfactory Product.fromJson(Map<String, dynamic> data) {\nreturn Product(\n    id: data['id'] as int,\n    title: data['name'] as String,\n    description: data['description'] as String,\n    imgUrl: data['images'][0]['src'] as String,\n    price: num.tryParse(data['price'])\n);}\n//draw products\nWidget build(BuildContext context) {\nfinal product = Provider.of<Product>(context, listen: false);\n\nreturn Container(\n  width: 150,\n  padding: const EdgeInsets.all(10.0),\n  margin: const EdgeInsets.all(5.0),\n  decoration: BoxDecoration(\n    borderRadius: BorderRadius.circular(15.0),\n    color: Color(422),\n  ),\n  child: Column(\n    mainAxisAlignment: MainAxisAlignment.spaceBetween,\n    crossAxisAlignment: CrossAxisAlignment.stretch,\n    children: <Widget>[\n\n      GestureDetector(\n        onTap: () {\n          Navigator.of(context)\n              .push(MaterialPageRoute(builder: (context) =>\n              ItemPage(productId: product.id.toString())),\n          );\n        },\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.spaceBetween,\n          children: <Widget>[\n            Container(\n              height: 160,\n              decoration: BoxDecoration(\n                  borderRadius: BorderRadius.circular(15),\n                  image: DecorationImage(\n                    image: NetworkImage(product.imgUrl),\n                    fit: BoxFit.cover,\n                  )),\n            ),\n            Container(\n                child: Text(\n                  '${product.title}',\n                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),\n                )),\n          ],\n        ),\n      ),\n\n      Container(\n        child: Row(\n          mainAxisAlignment: MainAxisAlignment.spaceBetween,\n          children: <Widget>[\n            Text('${product.price} \xd1\x80\xd1\x83\xd0\xb1.'),\n            IconButton(\n                icon: Icon(Icons.add_circle_outline, color: Colors.black12),\n                onPressed: () {\n                  // print(product.price);\n                  Provider.of<CartDataProvider>(context, listen: false)\n                      .addItem(\n                    productId: product.id.toString(),\n                    price: product.price,\n                    title: product.title,\n                    imgUrl: product.imgUrl,\n                  );\n                })\n          ],\n        ),\n      ),\n\n    ],\n  ),\n);  }\n

\n

Answer 1

您可以使用cached_network_image包。它使用flutter_cache_manager存储和检索文件。您可以像这样简单地使用它：

    CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),