Flutter Example - Handle Image | Load Cached Image | cached_network_image plugin

* About Plugin

https://pub.dev/packages/cached_network_image

cached_network_image | Flutter Package

 

1. Add this to pubspec.yaml file

dependencies:
  cached_network_image: ^1.1.1

 

2. Source Code

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class LoadCachedNetworkImage extends StatelessWidget {
  String url = "https://picsum.photos/300";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Load Image From Network")),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: 300,
            child: Center(
              child: CachedNetworkImage(
                imageUrl: url,
                placeholder: (context, url) => new CircularProgressIndicator(),
                errorWidget: (context, url, error) => new Icon(Icons.error),
              ),
            ),
          ),
          Text(url),
          Container(
            decoration: BoxDecoration(color: Colors.orangeAccent),
            margin: const EdgeInsets.all(15),
            padding: const EdgeInsets.all(15),
            child: Text(
              "* Cached images are loaded quickly without re-downloading.",
              style: TextStyle(color: Colors.white),
            ),
          )
        ],
      ),
    );
  }
}

 

 

▶ Go to Table of Contents | 강의 목차로 이동

---

※ This example is also available in the Flutter Code Examples app. | 본 예제는 Flutter Code Examples 앱에서도 제공됩니다.

Flutter Code Examples - Google Play 앱