Flutter图标SVG管理插件common_svgs的使用

本指南将介绍如何在Flutter项目中使用common_svgs插件来管理和显示SVG图标。

特性

• Google Logo
• Apple Logo

使用方法

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

dependencies:
  flutter:
    sdk: flutter
  common_svgs: ^x.x.x

然后运行flutter pub get以获取该包。

接下来，在你的Dart代码中导入必要的包：

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

你可以使用SvgPicture.string方法来显示SVG图标。以下是一个简单的示例：

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SVG Icons Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示Google Logo
            SvgPicture.string(
              svgGoogle,
              width: 32,
              height: 32,
            ),
            SizedBox(height: 20),
            // 显示Apple Logo
            SvgPicture.string(
              svgApple,
              width: 32,
              height: 32,
            ),
            SizedBox(height: 20),
            // 显示Arcane Arts Logo
            SvgPicture.string(
              svgArcaneArts,
              width: 32,
              height: 32,
            ),
          ],
        ),
      ),
    );
  }
}

在上面的代码中，我们使用了三个预定义的SVG字符串变量：svgGoogle、svgApple 和 svgArcaneArts。这些变量包含了相应的SVG图标数据，可以直接用于渲染。

完整示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用common_svgs插件来显示不同的SVG图标。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SVG Icons Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示Google Logo
            SvgPicture.string(
              svgGoogle,
              width: 32,
              height: 32,
            ),
            SizedBox(height: 20),
            // 显示Apple Logo
            SvgPicture.string(
              svgApple,
              width: 32,
              height: 32,
            ),
            SizedBox(height: 20),
            // 显示Arcane Arts Logo
            SvgPicture.string(
              svgArcaneArts,
              width: 32,
              height: 32,
            ),
          ],
        ),
      ),
    );
  }
}