Flutter开发(十四)：Flutter图片控件

1.Image 

Flutter 中的图片控件是 Image ，支持下面几种类型的构造函数：

new Image        从ImageProvider获取图片

new Image.asset        使用key从AssetBundle获取图片

new Image.network        从网络获取图片

new Image.file        本地文件获取图片

new Image.memory        从Uint8List获取图片

支持的图片类型：JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, WBMP

2.加载网络图片

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Image.network('http://www.devio.org/img/avatar.png'),
    );
  }
}

3.加载静态图片

在 pubspec.yaml 文件中声明图片资源路径；

使用 AssetImage 加载该图片；

首先把图片放到指定目录下面，assets文件夹要在根目录下：

 然后在 pubspec.yaml 文件中指定目录：

flutter:
  uses-material-design: true
  assets:
    - assets/images/my_icon.jpg

最后代码中添加：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Image(height: 100,width: 100,
        image: AssetImage('assets/images/my_icon.jpg'),),
    );
  }
}

另一种方法通过 Image.asset 加载：

home: Image.asset('assets/images/my_icon.jpg',width: 100,height: 100)

4.加载本地图片

加载手机中的图片

Image.file(File('/storage/emulated/0/Download/test.jpg')
,width: 100,height: 100)

 

5.设置 Placeholder

 transparent_image 插件加载图片，可以显示进度条，逐渐透明显示出来加载的图片：

pubspec.yaml 添加：

transparent_image: ^2.0.0

添加包：

import 'package:transparent_image/transparent_image.dart';

添加代码：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Stack(
        children: [
          //进度条
          Center(child: CircularProgressIndicator(),),
          Center(
            //网络加载时渐变出现
            child: FadeInImage.memoryNetwork(
              // Placeholder
              placeholder: kTransparentImage,
              image: "https://www.devio.org/img/avatar.png",
            ),
          )
        ],
      ),
    );
  }
}

加载本地资源图片，先显示我们的gif进度条，然后再显示加载成功的图片：

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Stack(
        children: [
          // 进度条
          Center(
            // 网络加载时渐变出现
            child: FadeInImage.assetNetwork(
              // Placeholder
              placeholder: 'assets/images/my_icon.gif',
              image: "https://www.devio.org/img/avatar.png",
            ),
          )
        ],
      ),
    );
  }

6.配置图片缓存

利用 cached_network_image 插件加载网络图片，缓存到本地：

pubspec.yaml 添加：

cached_network_image: ^2.0.0-rc

添加包：

import 'package:cached_network_image/cached_network_image.dart';

添加代码：

home: Scaffold(
          appBar: AppBar(
            title: Text('title'),
          ),
          body: Center(
            child: CachedNetworkImage(
              // Placeholder
              placeholder: (context, url) => CircularProgressIndicator(),
              imageUrl: "https://www.devio.org/img/avatar.png",
              errorWidget: (context, url, error) => new Icon(Icons.error),
            ),
          ),
      )

7.加载 Icon

使用 Flutter 内置的 material_fonts ：

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('title'),
        ),
        body: Center(
          child: new Icon(Icons.android,size:100),
        ),
      ),
    );
  }