flutter：图片处理flutter_svg

大前端 flutter

发布时间 : 2025-08-28 00:00

字数:431 阅读 :

是什么
常用参数
示例代码

是什么

flutter_svg是一个 SVG 矢量图显示库。Flutter 原生 Image.asset 和 Image.network 不支持 .svg 格式，而这个包可以解析并渲染 SVG。

核心功能：

加载本地 SVG：从 assets 目录加载。
加载网络 SVG：从 URL 加载 SVG。
颜色替换：可以修改 SVG 的颜色。
自适应缩放：不会失真，适合多尺寸设备

适用场景：

App Logo、图标、插画等需要高清无损缩放的图片。
在 多分辨率设备 下保持图像清晰。

常用参数

参数名	类型	作用
`assetName`	`String`	本地 SVG 文件路径（`SvgPicture.asset` 必填）
`url`	`String`	网络 SVG 地址（`SvgPicture.network` 必填）
`width`	`double?`	宽度
`height`	`double?`	高度
`fit`	`BoxFit`	缩放方式（默认 `BoxFit.contain`）
`alignment`	`AlignmentGeometry`	对齐方式（默认 `Alignment.center`）
`color`	`Color?`	给 SVG 整体着色（会覆盖原始颜色）
`semanticsLabel`	`String?`	无障碍标签（给屏幕阅读器用）
`placeholderBuilder`	`Widget Function(BuildContext)?`	占位 Widget（仅 `SvgPicture.network` 支持，用于加载中显示）
`matchTextDirection`	`bool`	是否随文字方向自动镜像（LTR/RTL）
`allowDrawingOutsideViewBox`	`bool`	是否允许绘制超出 `viewBox` 的部分
`clipBehavior`	`Clip`	裁剪方式，防止溢出`Clip.hardEdge`、`Clip.none`

示例代码

下载第三方包：

flutter pub add flutter_svg

编写代码：

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("SvgPicture 示例")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 本地 SVG
            SvgPicture.asset(
              'assets/icons/logo.svg',
              width: 100,
              height: 100,
              fit: BoxFit.contain,
              alignment: Alignment.center,
              color: Colors.blue, // 着色
              semanticsLabel: "应用Logo",
            ),

            const SizedBox(height: 20),

            // 网络 SVG
            SvgPicture.network(
              'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg',
              width: 120,
              height: 120,
              fit: BoxFit.cover,
              alignment: Alignment.center,
              color: Colors.green, // 修改颜色
              semanticsLabel: "Android Logo",
              placeholderBuilder: (context) => const CircularProgressIndicator(),
            ),
          ],
        ),
      ),
    );
  }
}