Flutter Fetching Image is very Slow

Issue

Guys My Code is working absolutely Fine
But i am facing issue that whenever i try to fetch images through URL.
It takes too much time to load.
Is there anyway to minimize the loading time of the Image.
Loading time is more then expected. I have tried by reducing the image quality it works but image is destorted.
Help me in order to minimize the loading time.

Here is my full code for fetching the image and data.

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(),
        );
      })

     );
}
}

Solution

You can use this package to store images in cache:
https://pub.dev/packages/cached_network_image

Make sure your server is fast where images are uploaded

Answered By – Anas Nadeem

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)