Flutter安全显示SVG图片插件websafe_svg的使用

websafe_svg

websafe_svg是一个与Flutter兼容的库，用于处理Android、iOS和Web上的SVG图像。

使用库

要使用此库，请先将它添加到您的Flutter pubspec.yaml文件中：

dependencies:
  websafe_svg: ^<version> 

然后运行以下命令以获取包：

flutter packages get

支持类型

• asset
• network
• memory
• string

示例代码

以下是一个完整的示例应用程序，展示了如何使用websafe_svg来显示不同来源的SVG图片。

main.dart

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

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('WebsafeSvg Example'),
      ),
      body: ListView(
        children: [
          ListTile(
            onTap: () => Navigator.of(context).push(
              MaterialPageRoute(
                builder: (BuildContext context) => AssetSvgPage(),
              ),
            ),
            title: const Text('Assets'),
          ),
          ListTile(
            onTap: () => Navigator.of(context).push(
              MaterialPageRoute(
                builder: (BuildContext context) => NetworkSvgPage(),
              ),
            ),
            title: const Text('Network'),
          ),
          ListTile(
            onTap: () => Navigator.of(context).push(
              MaterialPageRoute(
                builder: (BuildContext context) => MemorySvgPage(),
              ),
            ),
            title: const Text('Memory'),
          ),
          ListTile(
            onTap: () => Navigator.of(context).push(
              MaterialPageRoute(
                builder: (BuildContext context) => StringSvgPage(),
              ),
            ),
            title: const Text('String'),
          ),
        ],
      ),
    );
  }
}

asset_svg_page.dart

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

class AssetSvgPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Asset SVG'),
      ),
      body: Center(
        child: WebsafeSvg.asset(
          'assets/images/example.svg', // 确保在pubspec.yaml中声明了该资源路径
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

network_svg_page.dart

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

class NetworkSvgPage extends StatelessWidget {
  final String _url = "https://example.com/path/to/your/image.svg";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network SVG'),
      ),
      body: Center(
        child: WebsafeSvg.network(
          _url,
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

memory_svg_page.dart

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

class MemorySvgPage extends StatelessWidget {
  final List<int> _bytes = [/* SVG 图片的字节数据 */];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Memory SVG'),
      ),
      body: Center(
        child: WebsafeSvg.memory(
          _bytes,
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

string_svg_page.dart

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

class StringSvgPage extends StatelessWidget {
  final String _svgString = '<svg ...></svg>'; // SVG XML 字符串

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('String SVG'),
      ),
      body: Center(
        child: WebsafeSvg.string(
          _svgString,
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

通过上述代码，您可以创建一个包含多个页面的应用程序，每个页面展示一种加载SVG图片的方式。确保根据实际情况调整SVG资源路径和其他配置。