Flutter SVG图片渲染插件 flutter_svg_image 的使用

flutter_svg_image 是一个用于在 Flutter 应用中渲染 SVG 图片的插件。它利用 jovial_svg 或 WebView 来解析 SVG 文件，并通过 flutter_cache_manager 来缓存这些文件。

开始使用

安装

首先，在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_svg_image: ^x.x.x # 替换为最新版本号

然后运行 flutter pub get 来安装依赖。

示例代码

以下是如何在 Flutter 应用中使用 flutter_svg_image 插件的示例代码：

使用 SvgImage.cachedNetwork 渲染 SVG 图片

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Image(
            fit: BoxFit.contain,
            image: SvgImage.cachedNetwork(
              'https://jovial.com/images/jupiter.svg',
            ),
          ),
        ),
      ),
    );
  }
}

使用 ScalableImageWidget.fromSISource 渲染 SVG 图片

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: ScalableImageWidget.fromSISource(
            fit: BoxFit.contain,
            si: CachedNetworkSvgSource(
              'https://jovial.com/images/jupiter.svg',
            ),
          ),
        ),
      ),
    );
  }
}

使用 WebView 渲染 SVG 图片

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _webViewCreated = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    SvgWebImage.initWebView().then((value) {
      setState(() {
        _webViewCreated = true;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Image(
                fit: BoxFit.contain,
                image: SvgImage.cachedNetwork(
                  'https://jovial.com/images/jupiter.svg',
                ),
              ),
              if (_webViewCreated)
                Image(
                  fit: BoxFit.contain,
                  image: SvgWebImage.cachedNetwork(
                    'https://jovial.com/images/jupiter.svg',
                    cacheSvg: true,
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

完整的示例 Demo

以下是一个完整的示例应用，展示了如何使用 flutter_svg_image 插件来渲染 SVG 图片：

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _webViewCreated = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    SvgWebImage.initWebView().then((value) {
      setState(() {
        _webViewCreated = true;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Image(
                fit: BoxFit.contain,
                image: SvgImage.cachedNetwork(
                  'https://jovial.com/images/jupiter.svg',
                ),
              ),
              if (_webViewCreated)
                Image(
                  fit: BoxFit.contain,
                  image: SvgWebImage.cachedNetwork(
                    'https://jovial.com/images/jupiter.svg',
                    cacheSvg: true,
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}