Flutter 获取图像非常慢

Question

伙计们，我的代码运行良好 但我面临的问题是，每当我尝试通过 URL 获取图像时。 加载需要太多时间。 无论如何可以最大限度地减少图像的加载时间。 加载时间比预期的要长。我尝试过降低它的图像质量，但图像被破坏了。 帮助我以尽量减少加载时间。

这是我获取图像和数据的完整代码。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

 class PromotersDetails extends StatefulWidget {
  final String url,title;
   PromotersDetails({Key key, @required this.url, @required this.title}) : super(key: key);
   @override
   _PromotersDetailsState createState() => _PromotersDetailsState(url,title);
 }

 class _PromotersDetailsState extends State<PromotersDetails> {
 fetchSelfies() async {
  var url1;
  url1 = await http.get(Uri.parse(
    url));
  var res = json.decode(url1.body);
  print(res);
  return json.decode(url1.body)['selfies'];
 }
  String url,title;
_PromotersDetailsState(this.url, this.title);
 @override
 Widget build(BuildContext context) {
 double width = MediaQuery.of(context).size.width * 0.6;
return Scaffold(
  backgroundColor: Colors.white,
  appBar: AppBar(
    centerTitle: false,
    title: Text(
      title,
      style: TextStyle(fontSize: 25.0, color: Colors.white),
    ),
    elevation: 0.0,
    backgroundColor: Colors.green,
  ),
  body: FutureBuilder(
      future: fetchSelfies(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasError) {
          return Center(
            child: Text(snapshot.error.toString()),
          );
        }
        if (snapshot.hasData) {
          return ListView.builder(
            reverse: true,
            shrinkWrap: true,
            itemCount: snapshot.data.length,
            padding: EdgeInsets.all(8),
            itemBuilder: (BuildContext context, int index) {
              return Row(
                children: [
                  Container(
                    height: 120,
                    alignment: Alignment.center,
                    child: Container(
                      height: 120,
                      width: 120,                **// Image is fetched here.**
                      child: Card(
                        child: Image.network(snapshot.data[index]['image']),
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  Expanded(
                    child: Container(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [

                          SizedBox(
                            height: 10,
                          ),
                          Row(
                            children: [
                              Text(
                                "Date: ",
                                style: TextStyle(color: Colors.black),
                              ),
                              Text(
                                snapshot.data[index]['date'],
                                style: TextStyle(color: Color(0xff868597)),
                              ),
                            ],
                          ),
                          Row(
                            children: [
                              Text(
                                "Time: ",
                                style: TextStyle(color: Colors.black),
                              ),
                              Text(
                                snapshot.data[index]['time'],
                                style: TextStyle(color: Color(0xff868597)),
                              ),
                            ],
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          Container(
                            height: 50,
                            child: Text(
                              snapshot.data[index]['location'],
                              style: TextStyle(color: Color(0xff868597)),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              );
            },
          );
        }
        return Center(
          child: CircularProgressIndicator(),
        );
      })

     );
}
}

Answer 1

您可以使用此包将图像存储在缓存中： https://pub.dev/packages/cached_network_image

确保您的服务器在上传图片时速度很快