Flutter之图片placeholder插件&图片缓存插件

最新推荐文章于 2024-10-20 09:22:29 发布

id-whc

最新推荐文章于 2024-10-20 09:22:29 发布

阅读量2.1k

点赞数 1

分类专栏： Flutter

本文链接：https://blog.csdn.net/u013600907/article/details/101363953

版权

Flutter 专栏收录该内容

41 篇文章

订阅专栏

一、图片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) {
    return MaterialApp(
        home: Scaffold(
            body: Column(
      children: <Widget>[
        Center(
          //加载本地图片增加placeholder
          child: FadeInImage.assetNetwork(
              placeholder: "images/loading.gif",
              image: "https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=eea934627f8da9775a228e79d138937c/b3b7d0a20cf431ad6fd6b4684736acaf2edd985f.jpg"),
        ),
        Center(
          //加载网络图片增加placeholder
          child: FadeInImage.memoryNetwork(placeholder: kTransparentImage, image: "https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=eea934627f8da9775a228e79d138937c/b3b7d0a20cf431ad6fd6b4684736acaf2edd985f.jpg"),
        ),
      ],
    )));
  }
}

示例图：

二、图片cached_network_image插件的使用：

首先要去镜像仓库安装cached_network_image插件->插件直达

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Center(
        //加载本地图片增加placeholder
        child: CachedNetworkImage(
          imageUrl: "https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=eea934627f8da9775a228e79d138937c/b3b7d0a20cf431ad6fd6b4684736acaf2edd985f.jpg",
          placeholder: (context,url)=>CircularProgressIndicator(),
        )
      ),
    ));
  }
}

这样的话第一次加载图片的时候会缓存下来，断网情况下也可以正常访问。