Flutter - 加载网络图片的几种方式

对很多移动应用来说，加载网络图片是很常见的基本功能。Android中常用Glide等图片库。Flutter提供了Image组件来展示不同类型的图片。

加载网络图片有几种方式：

• Image.network
• FadeInImage.memoryNetwork
• 使用cached_network_image中的CachedNetworkImage

使用Image.network加载图片

根据URL加载图片，使用Image.network构造器

Image.network(
  'https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg',
)

Image组件也支持GIF格式的图片

使用方法如下，和上面的用法一样

Image.network(
  'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',
);

Image.network的例子

import 'package:flutter/material.dart';

void main() => runApp(new ImageDemoApp());

class ImageDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Image Demo',
      home: new HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _HomePageState();

}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('Web Image Demo Page'),),
      body: new ListView(children: <Widget>[
        Container(
          margin: EdgeInsets.only(bottom: 12.0),
          decoration: BoxDecoration(color: Colors.grey),
          child: Column(children: <Widget>[
            Image.network(
              'https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg',
            ),
            Text('Image.network')
          ],),
        ),
        Container(
          margin: EdgeInsets.only(bottom: 12.0),
          decoration: BoxDecoration(color: Colors.grey),
          child: Column(children: <Widget>[
            Image.network(
              'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',
            ),
            Text('Image.network  Animated Gifs')
          ],),
        ),
      ],),
    );
  }

}

Image.network加载图片

有默认占位图和淡入效果

在图片加载过程中，给用户展示一张默认的图片，能提高用户体验。
使用FadeInImage组件来达到这个功能。FadeInImage能处理内存中，App资源或者网络上的图片。

加载网络图片

import 'package:transparent_image/transparent_image.dart';

FadeInImage.memoryNetwork(
  placeholder: kTransparentImage,
  image: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);

示例效果

使用FadeInImage.memoryNetwork

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

void main() => runApp(new FadeInImageDemoApp());

class FadeInImageDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Image Demo',
      home: new HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('Fade In Image Demo Page'),),
      body: Stack(
        children: <Widget>[
          Center(child: CircularProgressIndicator()),
          Center(child: FadeInImage.memoryNetwork(
            image: 'https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg',
            placeholder: kTransparentImage/* 透明图片 */,)),
        ],
      ),
    );
  }

}

占位图与淡入效果

使用应用内的图片来做占位图

使用FadeInImage.assetNetwork

代码

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('Fade In Image Demo Page'),),
      body: Center(child: FadeInImage.assetNetwork(
        image: 'https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg',
        placeholder: 'images/birds.gif' /* 指定gif */,)),
    );
  }

}

使用自定的gif图片

使用缓存图片

使用cached_network_image包。参见 https://pub.dartlang.org/packages/cached_network_image 。

CachedNetworkImage(
  imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);

添加placeholder
cached_network_image的placeholder支持任意组件，比如CircularProgressIndicator

CachedNetworkImage(
  placeholder: CircularProgressIndicator(),
  imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);

代码示例

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cached image load',
      home: Scaffold(appBar: AppBar(title: new Text('Cache Image Load'),),
        body: Center(child: CachedNetworkImage(
            placeholder: CircularProgressIndicator(),
            imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true'),),),
    );
  }

}