图片控件详解

Image支持如下几种类型的构造函数：

• new Image - 用于从ImageProvider获取图像；
• new Image.asset - 使用key 从AssetBundle获得的图像；
• new Image.network - 从网络URL中获取图片；
• new Image.file - 从本地文件中获取图片；
• new Image.memory - 用于从Uint8List获取图像；

• Image支持的图片格式

  Image 支持以下类型的图片：JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, 和 WBMP。

加载网络图片

Image.network( 'http://www.devio.org/img/avatar.png', )

加载静态图片，以及处理不同分辨率的图片

• 在 pubspec.yaml 文件中声明图片资源的路径；
• 使用AssetImage访问图片；

pubspec.yaml声明图片路径：

assets:
 - images/my_icon.png

使用AssetImage访问图片图片：

Image(
  height: 26,
  width: 26,
  image: AssetImage(my_icon.png),
),

Image.asset(my_icon.png, width: 26, height: 26, )

加载完整路径的本地图片

/sdcard/Download/icon.png

import 'dart:io';
Image.file(File('/sdcard/Download/icon.png')),

如何设置placeholder?

为了设置Placeholder我们需要借助FadeInImage，它能够从内存，本地资源中加载placeholder。

从内存中加载placeholder

第一步：

安装transparent_image插件。

第二步：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Fade in images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Stack(
          children: <Widget>[
            Center(child: CircularProgressIndicator()),
            Center(
              child: FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image: 'http://www.devio.org/img/avatar.png',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

从本地资源中加载placeholder

第一步

配置本地资源图片：

 flutter:
   assets:
+    - assets/loading.gif

第二步

加载本地资源图片作为placeholder：

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif',
  image: 'http://www.devio.org/img/avatar.png',
);

配置图片缓存

在Flutter中我们可以借助cached_network_image插件，来从网络上加载图片，并且将其缓存到本地，以供下次使用。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Cached Images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: CachedNetworkImage(
            placeholder: (context, url) => new CircularProgressIndicator(),
            imageUrl:
                'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}

加载Icon

const Icon(this.icon//IconDate, {
   Key key,
   this.size,//大小
   this.color,//颜色
   this.semanticLabel,//标志位
   this.textDirection,//绘制方向，一般使用不到
 })

使用自定义的Icon

const IconData(
  this.codePoint,//必填参数，fonticon对应的16进制Unicode {
  this.fontFamily,//字体库系列
  this.fontPackage,//字体在那个包中，不填仅在自己程序包中查找
  this.matchTextDirection: false,图标是否按照图标绘制方向显示
});
 

首先我我们需要向使用字体一样，在pubspec.yaml中配置我们的icon：

fonts:
    - family: devio
      fonts:
        - asset: fonts/devio.ttf

接下来就可以使用了：

child: new Icon(new IconData(0xf5566,fontFamily: "devio"),size: 100.0,color: Colors.blueAccent,)