Flutter图片优化缓存插件optimized_cached_image的使用

Flutter图片优化缓存插件optimized_cached_image的使用

optimized_cached_image 是一个用于从网络加载图片并根据容器约束调整大小和缓存的Flutter库。该库旨在提高内存敏感性，通过将图像调整为较小的尺寸后存储在缓存中。它受到了 cached_network_image 库的启发。

此库提供了两个类来加载图像：

• OptimizedCacheImage，它是 CachedNetworkImage 的一对一映射。
• OptimizedCacheImageProvider，它是 CachedNetworkImageProvider 的映射。

如何使用

OptimizedCacheImage 可以直接使用，也可以通过 ImageProvider 使用。OptimizedCacheImage 和 OptimizedCacheImageProvider 都对Web支持有限，目前不包括缓存功能。

带占位符的用法

OptimizedCacheImage(
  imageUrl: "http://via.placeholder.com/350x150",
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

带进度指示器的用法

OptimizedCacheImage(
  imageUrl: "http://via.placeholder.com/350x150",
  progressIndicatorBuilder: (context, url, downloadProgress) =>
      CircularProgressIndicator(value: downloadProgress.progress),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

直接使用ImageProvider

Image(image: OptimizedCacheImageProvider(url))

同时使用占位符和ImageProvider

OptimizedCacheImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
          colorFilter:
              ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

处理GIF

optimized_cached_image 使用 flutter_image_compress 作为压缩库。虽然这个库在内存效率方面表现良好，但它不直接支持GIF格式。不过，从版本 2.0.2-alpha 开始，所有GIF都会被压缩为WebP格式。

它是如何工作的

optimized_cached_image 通过 flutter_cache_manager 存储和检索文件。

FAQ

我的应用在图像加载失败时崩溃了。（我知道这并不是一个问题。）

是否真的崩溃了？调试器可能会暂停，因为Dart VM无法识别为捕获异常；控制台可能会打印错误；即使你的崩溃报告工具也可能报告它（我知道这真的很糟糕）。然而，应用真的崩溃了吗？可能一切都在正常运行。如果你确实遇到应用崩溃的情况，可以报告问题，但请提供一个小示例以便我们能够重现崩溃。

示例代码

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

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

import 'template/globals.dart';

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

/// A Flutter application demonstrating the functionality of this plugin
class HumblerookiePluginExample extends StatelessWidget {
  /// [MaterialColor] to be used in the app [ThemeData]
  final MaterialColor themeMaterialColor =
      createMaterialColor(const Color.fromRGBO(48, 49, 60, 1));

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Humblerookie $pluginName',
      theme: ThemeData(
        accentColor: Colors.white60,
        backgroundColor: const Color.fromRGBO(48, 49, 60, 0.8),
        buttonTheme: ButtonThemeData(
          buttonColor: themeMaterialColor.shade500,
          disabledColor: themeMaterialColor.withRed(200),
          splashColor: themeMaterialColor.shade50,
          textTheme: ButtonTextTheme.primary,
        ),
        bottomAppBarColor: const Color.fromRGBO(57, 58, 71, 1),
        hintColor: themeMaterialColor.shade500,
        primarySwatch: createMaterialColor(const Color.fromRGBO(48, 49, 60, 1)),
        textTheme: TextTheme(
          bodyText1: TextStyle(
            color: Colors.white,
            fontSize: 16,
            height: 1.3,
          ),
          bodyText2: TextStyle(
            color: Colors.white,
            fontSize: 18,
            height: 1.2,
          ),
          button: TextStyle(color: Colors.white),
          headline1: TextStyle(
            color: Colors.white,
            fontSize: 18,
          ),
        ),
        visualDensity: VisualDensity.adaptivePlatformDensity,
        inputDecorationTheme: const InputDecorationTheme(
          fillColor: Color.fromRGBO(37, 37, 37, 1),
          filled: true,
        ),
      ),
      home: AppHome(title: 'Baseflow $pluginName example app'),
    );
  }

  /// Creates a [MaterialColor] based on the supplied [Color]
  static MaterialColor createMaterialColor(Color color) {
    List strengths = <double>[.05];
    Map<int, Color> swatch = {};
    final r = color.red, g = color.green, b = color.blue;

    for (var i = 1; i < 10; i++) {
      strengths.add(0.1 * i);
    }
    for (var strength in strengths) {
      final ds = 0.5 - strength;
      swatch[(strength * 1000).round()] = Color.fromRGBO(
        r + ((ds < 0 ? r : (255 - r)) * ds).round(),
        g + ((ds < 0 ? g : (255 - g)) * ds).round(),
        b + ((ds < 0 ? b : (255 - b)) * ds).round(),
        1,
      );
    }
    return MaterialColor(color.value, swatch as Map<int, Color>);
  }
}

/// A Flutter example demonstrating how the [pluginName] plugin could be used
class AppHome extends StatefulWidget {
  /// Constructs the [AppHome] class
  AppHome({Key? key, this.title}) : super(key: key);

  /// The [title] of the application, which is shown in the application's
  /// title bar.
  final String? title;

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

class _AppHomeState extends State<AppHome> {
  static final PageController _pageController = PageController(initialPage: 0);
  int _currentPage = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).bottomAppBarColor,
        title: Center(
          child: Text("OptimizedCachedImage"),
        ),
      ),
      backgroundColor: Theme.of(context).backgroundColor,
      body: PageView(
        controller: _pageController,
        children: pages,
        onPageChanged: (page) {
          setState(() {
            _currentPage = page;
          });
        },
      ),
      bottomNavigationBar: _bottomAppBar(),
    );
  }

  BottomAppBar _bottomAppBar() {
    return BottomAppBar(
      elevation: 5,
      color: Theme.of(context).bottomAppBarColor,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: List.unmodifiable(() sync* {
          for (var i = 0; i < pages.length; i++) {
            yield Expanded(
              child: IconButton(
                iconSize: 30,
                icon: Icon(icons.elementAt(i)),
                color: _bottomAppBarIconColor(i),
                onPressed: () => _animateToPage(i),
              ),
            );
          }
        }()),
      ),
    );
  }

  void _animateToPage(int page) {
    _pageController.animateToPage(page,
        duration: const Duration(milliseconds: 200), curve: Curves.linear);
  }

  Color _bottomAppBarIconColor(int page) {
    return _currentPage == page ? Colors.white : Theme.of(context).accentColor;
  }
}