Flutter自动调整图片大小插件auto_resize_image的使用

AutoResizeImage

语言: 简体中文

根据容器的大小自动调整图片缓存大小。

特性

支持多种类型的ImageProvider，包括NetworkImage、AssetImage、FileImage等。

支持<a href="https://pub.dev/packages/cached_network_image">CachedNetworkImageProvider</a>。

debugInvertOversizedImages = false	debugInvertOversizedImages = true

使用方法

dependencies:
  auto_resize_image: ^1.0.0

SizedBox(
  width: 200,
  height: 200,
  child: LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      return Image(
        fit: BoxFit.cover,
        image: AutoResizeImage(
          imageProvider: CachedNetworkImageProvider(url),
          width: constraints.maxWidth,
          height: constraints.maxHeight,
        ),
      );
    },
  ),
),

额外信息

绿色框表示容器的大小，红色框表示图片缓存的大小。

ResizeMode	图解	清晰度/内存使用	超出尺寸
contain		低	否
balance		中	否
cover		高	是

完整示例代码

以下是一个完整的示例代码，展示了如何在应用中使用AutoResizeImage插件。

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

import 'generated/assets.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AutoResizeImage Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const ImagePage(),
    );
  }
}

class ImagePage extends StatelessWidget {
  const ImagePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    var url = "https://s2.loli.net/2024/02/27/yHRMwZr9lnjc7z4.jpg";
    debugInvertOversizedImages = true;
    return Scaffold(
      appBar: AppBar(title: const Text('AutoResizeImage Demo')),
      body: Wrap(
        children: [
          _buildImage(text: 'CachedNetworkImage', imageProvider: CachedNetworkImageProvider(url)),
          _buildImage(text: 'NetworkImage', imageProvider: NetworkImage(url)),
          _buildImage(text: 'AssetsImage contain', imageProvider: const AssetImage(Assets.assetsAa), resizeMode: ResizeMode.contain),
          _buildImage(text: 'AssetsImage balance', imageProvider: const AssetImage(Assets.assetsAa), resizeMode: ResizeMode.balance),
          _buildImage(text: 'AssetsImage cover', imageProvider: const AssetImage(Assets.assetsAa), resizeMode: ResizeMode.cover),
          _buildImage(text: 'Long image cover', imageProvider: const AssetImage(Assets.assetsLong)),
        ],
      ),
    );
  }

  Widget _buildImage({
    required String text,
    required ImageProvider imageProvider,
    ResizeMode resizeMode = ResizeMode.balance,
  }) {
    return Column(
      children: [
        SizedBox(
          width: 180,
          height: 180,
          child: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              return Image(
                fit: BoxFit.cover,
                image: AutoResizeImage(
                  resizeMode: resizeMode,
                  imageProvider: imageProvider,
                  width: constraints.maxWidth,
                  height: constraints.maxHeight,
                ),
              );
            },
          ),
        ),
        Text(text)
      ],
    );
  }
}