flutter: 用cached_network_image缓存图片

一，安装第三方库

地址:

https://pub.dev/packages/cached_network_image

编辑pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  get: ^4.7.2
  cached_network_image: ^3.4.1

然后点击 pub get 

二，打开网络权限

编辑  android/app/src/main/AndroidManifest.xml

在android 的 AndroidManifest.xml中添加网络权限，添加一行:

<uses-permission android:name="android.permission.INTERNET" />

如下：

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:label="demo2"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">

三，代码：

 

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

class ImagePage extends StatefulWidget {
  @override
  State<ImagePage> createState() => _ImagePageState();
}

class _ImagePageState extends State<ImagePage>  {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('拖动例子'),
      ),
      body: Column(
        children: [
          //容器，占用一定高度
          Container(
            color: Colors.orange,
            height: 100,
          ),
          Container(
            color: Colors.blue,
            height: 260,
            child: CachedNetworkImage(
              imageUrl: "https://wx3.sinaimg.cn/mw600/006w3xHogy1i0hrpnqcdtj32c0340x6q.jpg",
              imageBuilder: (context, imageProvider) => Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: imageProvider,
                    fit: BoxFit.contain,
                  ),
                ),
              ),
              //外面套container为了防CircularProgressIndicator变形
              placeholder: (context, url) => new Container(
                child: new Center(
                  child: new CircularProgressIndicator(),
                ),
                width: 160.0,
                height: 90.0,
              ),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
          ),
       Container(
        color: Colors.deepPurpleAccent,
        height: 260,
         child: CachedNetworkImage(
           imageUrl: "https://wx2.sinaimg.cn/large/0079XWwJgy1i0il0vbuhaj34002o0x6t.jpg",
           imageBuilder: (context, imageProvider) => Container(
             decoration: BoxDecoration(
               image: DecorationImage(
                 image: imageProvider,
                 fit: BoxFit.contain,
               ),
             ),
           ),
           //外面套container为了防CircularProgressIndicator变形
           placeholder: (context, url) => new Container(
             child: new Center(
               child: new CircularProgressIndicator(),
             ),
             width: 160.0,
             height: 90.0,
           ),
           errorWidget: (context, url, error) => Icon(Icons.error),
         ),
       ),

        ],

      ),
    );
  }
}

四，测试效果: