Flutter SVG资源提供插件 avs_svg_provider 的使用

AVSSVGProvider 是一个Flutter包，允许你将SVG文件作为ImageProvider使用，并且可以为SVG文件添加颜色或线性渐变。

快速开始

无需任何权限即可使用该插件。

使用方法

首先，在你的项目中添加依赖：

dependencies:
  avs_svg_provider: ^最新版本号

然后运行 flutter pub get 来安装这个包。

示例代码

下面是一个完整的示例demo，展示了如何在Flutter应用中使用 avs_svg_provider 插件来显示带有渐变色的SVG图片以及纯色的SVG图片。

import 'package:avs_svg_provider/avs_svg_provider.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: 'AVSSVGProvider Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: false,
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('AVSSVGProvider Demo'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                // 渐变色SVG示例
                Container(
                  width: MediaQuery.sizeOf(context).width,
                  height: MediaQuery.sizeOf(context).width,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      fit: BoxFit.contain,
                      image: AVSSVGProvider(
                        'https://www.svgrepo.com/show/530440/machine-vision.svg',
                        scale: 9,
                        gradient: const LinearGradient(
                          colors: <Color>[Colors.red, Colors.blue],
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                        ),
                      ),
                    ),
                  ),
                  child: const Text(
                    "AVSSVGProvider Gradient Example",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                const SizedBox(height: 20),
                // 纯色SVG示例
                Image(
                  image: AVSSVGProvider(
                    'assets/layer3.svg',
                    scale: 8,
                    color: Colors.blue,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们首先导入了必要的包，并创建了一个简单的Flutter应用程序。通过使用 AVSSVGProvider，我们可以轻松地将SVG文件加载为图像，并应用不同的颜色或渐变效果。

请注意，你需要确保所有使用的SVG资源已经正确放置在项目的 assets 目录下，并且在 pubspec.yaml 文件中进行了相应的声明：

flutter:
  assets:
    - assets/layer2.svg
    - assets/layer3.svg

这样，你就可以在你的Flutter应用中自由地使用这些SVG资源了。