Flutter FadeInImage


简介

placeHodler image到目标图片的一种过渡widget

  • 使用FadeInImage可以类似网络加载的图片以一个更加优雅的形式出现在屏幕上
  • 如果这个图片已经被加载了,或者已经存在内存中,那么placeholder图片将不会显示

基本用法

FadeInImage的写法跟Image类似,有很多别的命名构造函数。

  • fadeOutDuration和fadeOutCurve控制placeholder的淡出动画
  • fadeInDuration和fadeInCurve控制目标图像的淡入动画
  • 对于placeholder,更倾向于使用已经缓存的,以防止他也会突然的出现在屏幕上

实例演示

import 'package:flutter/material.dart';

class FadeInImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
         ClipOval(
          child:  FadeInImage.assetNetwork(
            placeholder: "assets/images/normal_user_icon.png", //预览图
            fit: BoxFit.fitWidth,
            image:
                "https://img.alicdn.com/tfs/TB148sWfMHqK1RjSZFgXXa7JXXa-536-482.png",
            width: 160.0,
            height: 160.0,
          ),
        ),
        SizedBox(
          height: 20.0,
        ),
         CircleAvatar(
          backgroundImage:  NetworkImage(
              "https://img.alicdn.com/tfs/TB148sWfMHqK1RjSZFgXXa7JXXa-536-482.png"),
          child:  Text("一凨"), //可以在图片上添加文字等等
        ),
      ],
    );
  }
}