Flutter图片处理插件flutter_image的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter图片处理插件flutter_image的使用

Image utilities for Flutter

flutter_image 插件为Flutter提供了丰富的图像处理工具，可以更方便地加载和处理网络图片。其中 NetworkImageWithRetry 是一个非常实用的功能，它可以在加载网络图片失败时自动重试。

NetworkImageWithRetry

NetworkImageWithRetry 可以替代 Image.network 来加载带有重试机制的网络图片。这在处理网络不稳定或图片资源偶尔不可用的情况下非常有用。

示例代码

下面是一个完整的示例demo，展示了如何使用 NetworkImageWithRetry 加载网络图片，并且设置了最大重试次数和每次重试的超时时间：

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

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

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

/// 主应用程序
class MyApp extends StatelessWidget {
  /// 构造主应用程序
  const MyApp({super.key});

  /// 返回URL以从示例应用程序加载资产作为网络源。
  String getUrlForAssetAsNetworkSource(String assetKey) {
    return 'https://github.com/flutter/packages/blob/b96a6dae0ca418cf1e91633f275866aa9cffe437/packages/flutter_image/example/$assetKey?raw=true';
  }

  @override
  Widget build(BuildContext context) {
    final String imageUrl = getUrlForAssetAsNetworkSource('assets/flutter-mark-square-64.png');

    return MaterialApp(
      title: 'flutter_image example app',
      home: HomeScreen(imageUrl: imageUrl),
    );
  }
}

/// 主屏幕
class HomeScreen extends StatelessWidget {
  /// 构造 [HomeScreen]
  const HomeScreen({
    super.key,
    required this.imageUrl,
  });

  /// 网络图片的URL
  final String imageUrl;

  @override
  Widget build(BuildContext context) {
    const int maxAttempt = 3;
    const Duration attemptTimeout = Duration(seconds: 2);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Image example'),
      ),
      body: Center(
        child: Image(
          image: NetworkImageWithRetry(
            imageUrl,
            scale: 0.8,
            fetchStrategy: (Uri uri, FetchFailure? failure) async {
              final FetchInstructions fetchInstruction = FetchInstructions.attempt(
                uri: uri,
                timeout: attemptTimeout,
              );

              if (failure != null && failure.attemptCount > maxAttempt) {
                return FetchInstructions.giveUp(uri: uri);
              }

              return fetchInstruction;
            },
          ),
        ),
      ),
    );
  }
}

自定义重试机制

你可以通过提供自定义的 FetchStrategy 函数来定制重试机制。FetchStrategyBuilder 是一个辅助类，可以帮助你构建这些策略函数。上面的示例中已经展示了如何设置最大重试次数（maxAttempt）和每次重试的超时时间（attemptTimeout），并且在超过最大重试次数后放弃请求。

Features and bugs

如果你有任何功能需求或发现bug，请在 GitHub 上提交issue。

通过这个插件，开发者可以更轻松地处理网络图片加载过程中的异常情况，提升用户体验。希望这个例子能帮助你更好地理解和使用 flutter_image 插件。


更多关于Flutter图片处理插件flutter_image的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter图片处理插件flutter_image的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_image插件来处理图片的示例代码。需要注意的是，flutter_image这个名称在Flutter社区中并不常见，通常我们处理图片时会用到cached_network_image、image_picker等插件。不过，为了符合你的要求，我假设你提到的flutter_image是一个假想的或者特定用途的图片处理插件。

假设flutter_image插件提供了加载、缓存和编辑图片的功能，以下是一个示例代码，展示如何使用这个插件来加载和显示图片，以及进行简单的图片编辑（比如裁剪）：

  1. 添加依赖： 首先，在你的pubspec.yaml文件中添加flutter_image依赖（请注意，这是一个假设的依赖，实际使用时请替换为真实存在的插件）：

    dependencies:
  flutter:
    sdk: flutter
  flutter_image: ^x.y.z  # 替换为实际版本号

  2. 导入插件： 在你的Dart文件中导入flutter_image插件：

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

  3. 使用插件： 下面是一个简单的例子，展示如何使用flutter_image插件来加载和显示网络图片，并进行裁剪操作：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Image Plugin Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 使用flutter_image插件加载并显示网络图片
              FlutterImage.network(
                'https://example.com/image.jpg',
                placeholder: (context, url) => CircularProgressIndicator(),
                errorWidget: (context, url, error) => Icon(Icons.error),
              ),
              SizedBox(height: 20),
              // 假设flutter_image插件提供了裁剪功能
              ElevatedButton(
                onPressed: () async {
                  // 打开图片裁剪页面（假设的方法）
                  final croppedImage = await FlutterImage.cropImage(
                    source: 'https://example.com/image.jpg', // 或者使用本地图片路径
                    aspectRatioPresets: [
                      CropAspectRatioPreset.square,
                      CropAspectRatioPreset.ratio3x2,
                      CropAspectRatioPreset.original,
                      CropAspectRatioPreset.ratio4x3,
                      CropAspectRatioPreset.ratio16x9
                    ],
                    androidUiSettings: AndroidUiSettings(
                      toolbarTitle: 'Cropper',
                      toolbarColor: Colors.deepOrange,
                      toolbarWidgetColor: Colors.white,
                      initAspectRatio: CropAspectRatioPreset.original,
                      lockAspectRatio: false,
                    ),
                    iosUiSettings: IOSUiSettings(
                      minimumAspectRatio: 1.0,
                    ),
                  );

                  // 显示裁剪后的图片（这里简单地在控制台打印URL，实际可以显示在UI上）
                  print('Cropped image URL: $croppedImage');
                },
                child: Text('Crop Image'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

注意：

  • 上面的代码示例假设flutter_image插件提供了FlutterImage.network方法来加载网络图片，以及FlutterImage.cropImage方法进行图片裁剪。这些方法名称和功能是基于假设的，实际使用时请参考具体插件的文档。
  • 如果flutter_image插件不存在或功能不符，你可能需要使用其他流行的图片处理插件，如cached_network_image、image_cropper等。
  • 在实际开发中，务必阅读并遵循插件的官方文档和示例代码。
回到顶部