Flutter 渐进式图片

一个 Flutter 小部件，它使用低质量图片占位符渐进式加载大图片。

特点

  1. 在目标图片加载之前显示占位符和缩略图。

  2. 平滑的淡入动画，以防止图片加载时立即弹出。

  3. 对低分辨率缩略图进行模糊处理，以防止像素化视图。

  4. 在获取目标图片之前有效解析缩略图，以获得快速的第一印象。

  5. 在 v2.0.0 中，现在可以在占位符图片而不是占位符小部件中添加占位符了。

安装

以下步骤将帮助您将此库添加为 Flutter 项目的依赖项。

  1. 在项目根目录的 pubspec.yaml 文件中

    dependencies:
progressive_image: ^2.0.0

  2. 运行以下命令获取包

    $ flutter packages get

  3. 在您的项目文件中导入包

    import 'package:progressive_image/progressive_image.dart';

用法

要更详细地了解如何使用此库，示例目录中有一个很棒的项目，并且您可以在此处找到各种示例。

下面展示了 ProgressiveImage 小部件的一个简单示例用法

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

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

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
 return MaterialApp(
   home: Scaffold(
     appBar: AppBar(title: Text('Progressive Image Example')),
     body: ProgressiveImageExample(),
   ),
 );
}
}

class ProgressiveImageExample extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
     return Container(
         child: ProgressiveImage(
             placeholder: AssetImage('assets/placeholder.jpg'),
             // size: 1.87KB
             thumbnail: NetworkImage('https://i.imgur.com/7XL923M.jpg'),
             // size: 1.29MB
             image: NetworkImage('https://i.imgur.com/xVS07vQ.jpg'),
             height: 300,
             width: 500,
         ),
     );
 }
}

GitHub

查看 Github