Flutter学习二：本地资源使用+网络图片加载

本地资源：中文文档

加载本地图片资源

导入资源路径：

代码：

new Image.asset("asset/images/splash.jpeg")

加载本地json等asset文件如下

加载 assets

您的应用可以通过AssetBundle对象访问其asset 。

有两种主要方法允许从Asset bundle中加载字符串/text（loadString）或图片/二进制（load）。

加载文本assets

每个Flutter应用程序都有一个rootBundle对象， 可以轻松访问主资源包。可以直接使用package:flutter/services.dart中全局静态的rootBundle对象来加载asset。

但是，建议使用DefaultAssetBundle来获取当前BuildContext的AssetBundle。 这种方法不是使用应用程序构建的默认asset bundle，而是使父级widget在运行时替换的不同的AssetBundle，这对于本地化或测试场景很有用。

通常，可以使用DefaultAssetBundle.of()从应用运行时间接加载asset（例如JSON文件）。

在Widget上下文之外，或AssetBundle的句柄不可用时，您可以使用rootBundle直接加载这些asset，例如：

代码：

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;

Future loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}

 

网络图片加载：网络图片中文文档

 images使用

使用场景分为：

1.网络图片 不需导入外部依赖

new Image.network（“url”）；

2.占位符淡入图片

^1 导入依赖

dependencies:

transparent_image: ^0.1.0

^2 widget：

new FadeInImage.memoryNetWork（placeholder：占位图image，image：“url”）；

3.缓存图片

^1 导入依赖

dependencies:

cached_network_image: ^0.5.1

^2 widget

new CachedNetworkImage（imageUrl：“url”）；

带占位符：

new CachedNetworkImage（placeholder：new CicularProgressIndicator（），

imageUrl：“url”）；

说明：

Flutter 中的Image widget可直接设置Gif图片

完整学习代码：

//https://img-blog.csdn.net/20160418120631895  gif
//https://img-blog.csdn.net/20160510110020141
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
import 'package:cached_network_image/cached_network_image.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "imageTest"
      ,
      home: HomePage(),

    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return
      new Column(
        children: [
          new Container(
            width: 200,
            height: 200,
            child: new Image.network(
                "https://img-blog.csdn.net/20160510110020141"),
          ),

          new Container(
            width: 200,
            height: 200,
            padding: new EdgeInsets.symmetric(vertical: 15.0, horizontal: 15.0),
            child: new Image.network(
                "https://img-blog.csdn.net/20160418120631895"),
          ),

          //占位符
          new Container(
              width: 200,
              height: 200,
              padding: new EdgeInsets.symmetric(
                  vertical: 15.0, horizontal: 15.0),
              child: new FadeInImage.memoryNetwork(
                  placeholder: kTransparentImage,
                  image: "https://img-blog.csdn.net/20160510110020141")
          ),

          //网络缓存
          new Container(
              width: 200,
              height: 200,
              padding: new EdgeInsets.symmetric(
                  vertical: 15.0, horizontal: 15.0),
              child: new CachedNetworkImage(
                placeholder: new CircularProgressIndicator(),
                imageUrl: "https://img-blog.csdn.net/20160510110020141",
              )
          )
          ,
        ],


      );
  }

}