Flutter灵活显示PNG、SVG及网络图片插件flexible_png_svg_network_image_widget_juni1289的使用

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

Flutter灵活显示PNG、SVG及网络图片插件flexible_png_svg_network_image_widget_juni1289的使用

插件介绍

flexible_png_svg_network_image_widget_juni1289 是一个支持从网络加载PNG和SVG图片，并且可以缓存这些图片的Flutter插件。它还可以从本地资源加载图片。

  • 支持PNG网络图片并缓存
  • 支持SVG网络图片并缓存
  • 支持本地资源中的图片文件
  • 可以通过bool参数选择是否从网络加载图片或从本地资源加载

示例代码

import 'package:flexible_png_svg_network_image_widget_juni1289/flexible_png_svg_network_image_juni1289.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String pngURL = "https://openexpoeurope.com/wp-content/uploads/2019/12/flutter-logo-sharing.png";
  String svgURL = "https://raw.githubusercontent.com/dart-lang/site-shared/master/src/_assets/image/flutter/logo/default.svg";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Example"),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text(
              "from Assets with error",
              textAlign: TextAlign.center,
            ),
            const FlexiblePngSvgNetworkImageWidget(
              networkErrorPlaceHolderImagePath: "assets/images/placeholder.png",
              imagePathOrURL: "assets/icons/cat.png",
              height: 50,
              width: 30,
              filterQuality: FilterQuality.high,
            ),
            const Text(
              "from Assets with no error",
              textAlign: TextAlign.center,
            ),
            const FlexiblePngSvgNetworkImageWidget(
              networkErrorPlaceHolderImagePath: "assets/images/placeholder.png",
              imagePathOrURL: "assets/images/cat.png",
              height: 50,
              width: 30,
              filterQuality: FilterQuality.high,
            ),
            const Text(
              "from network for PNG with no error",
              textAlign: TextAlign.center,
            ),
            FlexiblePngSvgNetworkImageWidget(
              networkErrorPlaceHolderImagePath: "assets/images/placeholder.png",
              imagePathOrURL: pngURL,
              height: 90,
              width: 60,
              filterQuality: FilterQuality.high,
              isNetworkImage: true,
              colorProgressLoaderIndicator: Colors.purple,
            ),
            const Text(
              "from network for PNG with error",
              textAlign: TextAlign.center,
            ),
            const FlexiblePngSvgNetworkImageWidget(
              networkErrorPlaceHolderImagePath: "assets/images/placeholder.png",
              imagePathOrURL: "https://openexpoeurope.com/wp-content/uploads/2019/12.png",
              height: 90,
              width: 60,
              filterQuality: FilterQuality.high,
              isNetworkImage: true,
              colorProgressLoaderIndicator: Colors.purple,
            ),
            const Text(
              "from network for SVG with no error",
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: 100,
              width: 100,
              child: Center(
                child: FlexiblePngSvgNetworkImageWidget(
                  networkErrorPlaceHolderImagePath: "assets/images/placeholder.png",
                  imagePathOrURL: svgURL,
                  height: 90,
                  width: 60,
                  filterQuality: FilterQuality.high,
                  issNetworkImage: true,
                  colorProgressLoaderIndicator: Colors.purple,
                ),
              ),
            ),
            const Text(
              "from network for SVG with error",
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: 100,
              width: 100,
              child: Center(
                child: FlexiblePngSvgNetworkImageWidget(
                  networkErrorPlaceHolderImagePath: "assets/images/placeholder.png",
                  imagePathOrURL: "${svgURL}sdkjk",
                  height: 90,
                  width: 60,
                  filterQuality: FilterQuality.high,
                  isNetworkImage: true,
                  colorProgressLoaderIndicator: Colors.purple,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

使用说明

FlexiblePngSvgNetworkImageWidget(
  networkErrorPlaceHolderImagePath: "assets/images/placeholder.png",
  imagePathOrURL: "image path or URL",
  height: 50,
  width: 30,
  filterQuality: FilterQuality.high,
  isNetworkImage: true | false,
  colorProgressLoaderIndicator: Color,
  networkTimeOutDuration: Duration(seconds: 30),
  svgLoadRetryLimit: int,
  useDiskCacheForSVG: bool,
  cacheRuleStaleDuration: Duration(days: 100),
  onSVGLoadFailedCallback: Function,
  useOldPngImageOnUrlChange: bool,
)

主要功能

  • imagePathOrURL: 必需，指定图片路径或URL。
  • height: 必需，设置图片高度。
  • width: 必需，设置图片宽度。
  • boxFit: 可选，设置图片框合方式。
  • filterQuality: 可选，默认为高质。
  • colorSVG: 可选，设置SVG颜色。
  • isNetworkImage: 必需，指示是否从网络加载图片。
  • colorProgressLoaderIndicator: 可选，设置进度加载指示器颜色。
  • networkErrorPlaceHolderImagePath: 必需，设置网络错误时的默认图片路径。
  • errorWidget: 可选，设置自定义错误组件。
  • progressIndicatorWidget: 可选，设置自定义进度组件。
  • networkTimeOutDuration: 可选，设置SVG加载超时时间。
  • svgLoadRetryLimit: 可选，设置SVG重试次数。
  • useDiskCacheForSVG: 默认为true，启用SVG缓存。
  • cacheRuleStaleDuration: 默认为500天，设置图片缓存过期时间。
  • onSVGLoadFailedCallback: 可选，设置SVG加载失败回调函数。
  • useOldPngImageOnUrlChange: 默认为false，表示在URL变化时使用旧图片。

示例解释

  1. 从Assets加载PNG图片:

    FlexiblePpngSvgNetworkImageWidget(
  networkErrorPlaceHolderImagePath: "assets/images/placeholder.png",
  imagePathOrURL: "assets/icons/cat.png",
  height: 50,
  width: 30,
  filterQuality: FilterQuality.high,
)

  2. 从Assets加载无错误的PNG图片:

    FlexiblePpngSvgNetworkImageWidget(
  networkErrorPlaceHolderImagePath: "assets/images/placeholder.png",
  imagePathOrURL: "assets/images/cat.png",
  height: 50,
  width: 30,
  filterQuality: FilterQuality.high,
)

  3. 从网络加载PNG图片:

    FlexiblePpngSvgNetworkImageWidget(
  networkErrorPlaceHolderImagePath: "assets/images/placeholder.png",
  imagePathOrURL: pngURL,
  height: 90,
  width: 60,
  filterQuality: FilterQuality.high,
  isNetworkImage: true,
  colorProgressLoaderIndicator: Colors.purple,
)

  4. 从网络加载PNG图片（有错误）:

    FlexiblePpngSvgNetworkImageWidget(
  networkErrorPlaceHolderImagePath: "assets/images/placeholder.png",
  imagePathOrURL: "https://openexpoeurope.com/wp-content/uploads/2019/12.png",
  height: 90,
  width: 60,
  filterQuality: FilterQuality.high,
  isNetworkImage: true,
  colorProgressLoaderIndicator: Colors.purple,
)

  5. 从网络加载SVG图片:

    FlexiblePpngSvgNetworkImageWidget(
  networkErrorPlaceHolderImagePath: "assets/images/placeholder.png",
  imagePathOrURL: svgURL,
  height: 90,
  width: 60,
  filterQuality: FilterQuality.high,
  isNetworkImage: true,
  colorProgressLoaderIndicator: Colors.purple,
)
  • 从网络加载SVG图片（有错误）:
FlexiblePpngSvgNetworkImageWidget(
  networkErrorPlaceHolderImagePath: "assets/images/placeholder.png",
  imagePathOrURL: "${svgURL}sdkjk",
  height: 90,
  width: 60,
  filterQuality: FilterQuality.high,
  isNetworkImage: true,
  colorProgressLoaderIndicator: Colors.purple,
)

更多关于Flutter灵活显示PNG、SVG及网络图片插件flexible_png_svg_network_image_widget_juni1289的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter灵活显示PNG、SVG及网络图片插件flexible_png_svg_network_image_widget_juni1289的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于flexible_png_svg_network_image_widget（假设这是一个自定义的Flutter包或组件，因为这不是一个官方的Flutter包），虽然我不能提供确切的包实现代码（因为这不是一个实际存在的、广泛认知的包名），但我可以展示一个类似的Flutter代码示例，展示如何灵活地在Flutter应用中显示PNG、SVG及网络图片。

在实际项目中，你可能需要结合多个Flutter包来实现这一功能，比如flutter_svg用于显示SVG图片，image_network或内置的Image.network用于显示网络图片，以及内置的Image.asset用于显示本地PNG图片。

以下是一个示例代码，展示如何在Flutter中灵活显示这些类型的图片：

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart'; // 用于显示SVG图片

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flexible Image Display',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ImageDisplayScreen(),
    );
  }
}

class ImageDisplayScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flexible Image Display'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('Local PNG Image:', style: TextStyle(fontSize: 20)),
            SizedBox(height: 8),
            Image.asset(
              'assets/local_image.png', // 确保在pubspec.yaml中声明了assets
              width: 200,
              height: 200,
            ),
            SizedBox(height: 24),
            Text('Network Image:', style: TextStyle(fontSize: 20)),
            SizedBox(height: 8),
            Image.network(
              'https://via.placeholder.com/200',
              width: 200,
              height: 200,
            ),
            SizedBox(height: 24),
            Text('SVG Image:', style: TextStyle(fontSize: 20)),
            SizedBox(height: 8),
            SvgPicture.asset(
              'assets/sample.svg', // 确保在pubspec.yaml中声明了assets
              width: 200,
              height: 200,
            ),
          ],
        ),
      ),
    );
  }
}

注意事项：

  1. 添加依赖： 确保在pubspec.yaml文件中添加了flutter_svg依赖：

    dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^1.0.3 # 请检查最新版本号

  2. 声明资源： 在pubspec.yaml文件中声明本地图片和SVG资源：

    flutter:
  assets:
    - assets/local_image.png
    - assets/sample.svg

  3. 网络图片： 网络图片直接使用Image.network加载，确保图片URL是有效的。

这个示例展示了如何在一个Flutter应用中同时显示本地PNG图片、网络图片和SVG图片。如果你提到的flexible_png_svg_network_image_widget是一个具体的包或组件，你可能需要查阅该包的文档来了解其特定的使用方法和API。在大多数情况下，结合使用Flutter内置的Image组件和第三方包（如flutter_svg）可以满足灵活显示图片的需求。

回到顶部