Flutter中使用SVG格式图片的简单教程

最新推荐文章于 2025-02-20 19:06:20 发布

何时不少年

最新推荐文章于 2025-02-20 19:06:20 发布

阅读量3.1k

点赞数 2

分类专栏： Flutter桌面应用开发文章标签： flutter SVG图片

本文链接：https://blog.csdn.net/qq_26585943/article/details/134932738

版权

Flutter桌面应用开发专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Flutter应用中使用SVG（ScalableVectorGraphics），包括添加依赖、加载SVG图像（通过`SvgPicture`）、自定义SVG样式以及网络加载。教程详细展示了如何使用`SvgPicture.asset`和`SvgPicture.string`来实现清晰、流畅的图标显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter中可以使用SVG（Scalable Vector Graphics）矢量图形，使得图标和图形的显示更清晰、更流畅，同时也能够减小应用的体积。

下面是如何在Flutter中使用SVG的简单教程。

导入依赖

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

flutter_svg: ^0.19.1

然后在命令行中运行：

flutter packages get

加载SVG图像

在Flutter中，可以使用SvgPicture widget 来加载SVG图像。

导入依赖后，引入SVG文件，使用SvgPicture.asset或SvgPicture.network函数加载SVG。SvgPicture.asset要求SVG文件路径配置在Flutter应用程序的。

import 'package:flutter_svg/flutter_svg.dart';

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return SvgPicture.asset(
      'assets/my_icon.svg',
      semanticsLabel: 'My Icon',
    );
  }
}

自定义SVG样式

SvgPicture有许多其他属性，可以用来自定义样式，如颜色、填充、描边等。

SvgPicture.asset(
  'assets/my_icon.svg',
  colorFilter:const ColorFilter.mode(Colors.blueAccent, BlendMode.srcIn),
  semanticsLabel: 'Acme Logo',
);

除了color属性外，还可以使用paintBuilder属性定制SVG的描边宽度、颜色等：

SvgPicture.asset(
  'assets/my_icon.svg',
  semanticsLabel: 'Acme Logo',
  color: Colors.red,
  allowDrawingOutsideViewBox: true,
  width: 48.0,
  height: 48.0,
  strokeWidth: 3.0,
  strokeColor: Colors.blue[800],
  onReadyToDraw: (_) => print('ready to draw!'),
  clipBehavior: Clip.antiAlias,
)

SVG图标的使用

可以使用SvgPicture标签来使用SVG图标：

SvgPicture.string(
    '<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="4" /></svg>',
    height: 100,
    width: 100,
  ),

以上就是使用Flutter中使用SVG的教程。