Flutter图片加载插件 image_loader 的使用

image_loader 是一个帮助库，用于从多种资源（如 assets、文件或缓存的网络图片）加载图片，并支持将图片设置为圆形或圆角矩形等形状。

示例截图

开始使用

添加依赖

首先，在你的 pubspec.yaml 文件中添加 image_loader 依赖：

dependencies:
  image_loader: ^最新版本号

然后运行 flutter pub get 来安装依赖。

使用示例

以下是一个完整的示例 Demo，展示了如何使用 ImageHelper 加载不同类型的图片并应用不同的配置。

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:image_loader/image_helper.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Loader',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Image Loader Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String networkImageUrl =
      'https://i.pinimg.com/originals/a4/f8/f9/a4f8f91b31d2c63a015ed34ae8c13bbd.jpg';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ImageHelper(
              imageType: ImageType.network,
              imageShape: ImageShape.circle,
              width: MediaQuery.of(context).size.width,
              boxFit: BoxFit.none,
              scale: 4.0,
              image: networkImageUrl,
              defaultLoaderColor: Colors.red,
              defaultErrorBuilderColor: Colors.blueGrey,
            ),
            flex: 1,
          ),
          Expanded(
            child: ImageHelper(
              imageType: ImageType.network,
              imageShape: ImageShape.oval,
              boxFit: BoxFit.fill,
              image: networkImageUrl,
              defaultLoaderColor: Colors.red,
              defaultErrorBuilderColor: Colors.blueGrey,
            ),
            flex: 1,
          ),
          Expanded(
            child: ImageHelper(
              imageType: ImageType.network,
              imageShape: ImageShape.rectangle,
              borderRadius: BorderRadius.all(Radius.circular(20.0)),
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              boxFit: BoxFit.fill,
              image: networkImageUrl,
              defaultLoaderColor: Colors.red,
              color: Colors.blue,
              blendMode: BlendMode.hue,
              defaultErrorBuilderColor: Colors.blueGrey,
              loaderBuilder: _loader,
            ),
            flex: 1,
          ),
          Expanded(
            child: ImageHelper(
              image: '',
              scale: 1.0,
              filterQuality: FilterQuality.high,
              borderRadius: BorderRadius.all(Radius.circular(30.0)),
              alignment: Alignment.center,
              imageType: ImageType.network,
              imageShape: ImageShape.rectangle,
              boxFit: BoxFit.fill,
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              defaultLoaderColor: Colors.red,
              defaultErrorBuilderColor: Colors.blueGrey,
              color: Colors.blue,
              blendMode: BlendMode.srcIn,
              errorBuilder: _errorBuilderIcon,
              loaderBuilder: _loader,
            ),
            flex: 1,
          ),
        ],
      ),
    );
  }

  Widget get _loader => SpinKitWave(
    color: Colors.redAccent,
    size: 50,
    type: SpinKitWaveType.start,
  );

  Widget get _errorBuilderIcon => Icon(Icons.image_not_supported, size: 50);
}