Flutter SVG自适应加载插件leancode_flutter_svg_adaptive_loader的使用

简介

leancode_flutter_svg_adaptive_loader 是一个用于在 Flutter 应用中自适应加载 SVG 和 SVG.vec 资源的插件。该插件在加载资源时会检查文件格式（XML 基础或二进制），并根据格式进行相应的加载。

动机

创建此插件的动机是为了在保持原始 XML 基础向量资源的同时，在 CI/CD 过程中编译这些资源以减小文件大小和加载时间。假设调试环境使用 XML 基础资源，而发布应用使用编译后的二进制资源，这需要一种检查向量格式的方法。FlutterSvgAdaptiveLoader 的设计就是为了减轻程序员的这一责任。

为了使这一切正常工作，我们建议在 CI/CD 过程中编译资产时保留 .svg 扩展名而不是 .svg.vec。更改扩展名将需要相应地更新代码中的资产路径。

使用方法

基本用法

要使用自适应 SVG 加载器，只需将 FlutterSvgAdaptiveLoader 对象传递给你的 SvgPicture：

SvgPicture(FlutterSvgAdaptiveLoader('assets/foo.svg')),

使用 flutter_gen 包

如果你使用了 flutter_gen 包，可以复制以下代码并使用 adaptiveSvg() 方法作为 SvgGenImage 的扩展：

import 'package:leancode_flutter_svg_adaptive_loader/leancode_flutter_svg_adaptive_loader.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';
// TODO: 添加对 `flutter_gen` 生成的 `SvgGenImage` 的导入

extension AdaptiveSvgGenImage on SvgGenImage {
  SvgPicture adaptiveSvg({
    Key? key,
    bool matchTextDirection = false,
    AssetBundle? bundle,
    String? package,
    double? width,
    double? height,
    BoxFit fit = BoxFit.contain,
    AlignmentGeometry alignment = Alignment.center,
    bool allowDrawingOutsideViewBox = false,
    WidgetBuilder? placeholderBuilder,
    String? semanticsLabel,
    bool excludeFromSemantics = false,
    ColorFilter? colorFilter,
    Clip clipBehavior = Clip.hardEdge,
  }) {
    return SvgPicture(
      FlutterSvgAdaptiveLoader(
        path,
        assetBundle: bundle,
        packageName: package,
      ),
      key: key,
      matchTextDirection: matchTextDirection,
      width: width,
      height: height,
      fit: fit,
      alignment: alignment,
      allowDrawingOutsideViewBox: allowDrawingOutsideViewBox,
      placeholderBuilder: placeholderBuilder,
      semanticsLabel: semanticsLabel,
      excludeFromSemantics: excludeFromSemantics,
      colorFilter: colorFilter,
      clipBehavior: clipBehavior,
    );
  }
}

然后，你可以在生成的资产类上调用该扩展方法：

Assets.foo.adaptiveSvg()

示例代码

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

import 'package:example/adaptive_svg_gen_image.dart';
import 'package:example/gen/assets.gen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:leancode_flutter_svg_adaptive_loader/leancode_flutter_svg_adaptive_loader.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
                'Assets created by SvgPicture(LeancodeFlutterSvgAdaptiveLoader("asset_path"))'),
            const SizedBox(height: 8),
            const Row(
              children: [
                Expanded(
                  child: _SvgPictureWithTitle(
                    text: 'XML-based foo',
                    svgPicture: SvgPicture(
                      FlutterSvgAdaptiveLoader('assets/foo.svg'),
                    ),
                  ),
                ),
                SizedBox(width: 16),
                Expanded(
                  child: _SvgPictureWithTitle(
                    text: 'Binary compiled foo',
                    svgPicture: SvgPicture(
                      FlutterSvgAdaptiveLoader(
                        'assets/foo_compiled.svg',
                      ),
                    ),
                  ),
                ),
              ],
            ),
            const Divider(),
            const Text('Assets created by SvgGenImage.adaptiveSvg()'),
            const SizedBox(height: 8),
            Row(
              children: [
                Expanded(
                  child: _SvgPictureWithTitle(
                    text: 'XML-based foo',
                    svgPicture: Assets.foo.adaptiveSvg(),
                  ),
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: _SvgPictureWithTitle(
                    text: 'Binary compiled foo',
                    svgPicture: Assets.fooCompiled.adaptiveSvg(),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

class _SvgPictureWithTitle extends StatelessWidget {
  const _SvgPictureWithTitle({
    required this.text,
    required this.svgPicture,
  });

  final String text;
  final Widget svgPicture;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(text),
        const SizedBox(height: 8),
        svgPicture,
      ],
    );
  }
}

在这个示例中，我们展示了如何使用 FlutterSvgAdaptiveLoader 来加载 XML 基础和二进制编译的 SVG 资源，并通过 adaptiveSvg() 方法来简化代码。希望这个示例对你有所帮助！