Flutter图标管理插件material_symbols_icons的使用

简介

material_symbols_icons 是一个Flutter插件，它允许开发者在应用程序中使用官方的Material Symbols Icons。这个包提供了对Material Symbols Icons的完全支持，并且可以自动生成更新图标定义文件。通过这个包，你可以轻松地引用和定制各种风格（如轮廓、圆角和尖角）的图标。

版本信息

• 版本: 2.801
• 发布日期: 2024年12月5日
• 图标数量: 3797个

为了在VSCode中启用图标预览，你需要安装三个MaterialSymbols*.ttf字体文件。具体步骤如下：

1. 在VSCode中右键点击 Symbols.XXXX 标识符并选择“转到定义 [F12]”。
2. 右键点击 symbols.dart 标签并选择“在Finder中显示”（OSX）或“在文件资源管理器中显示”（Windows）。
3. 打开 fonts 目录。
4. 右键点击每个字体 .ttf 文件：
   • 在OSX上选择“使用Font Book打开”，然后点击“安装”。
   • 在Windows上直接选择“安装”。
5. 安装完成后，你可以将鼠标悬停在 Symbols.XXX 标识符上，Dart文档会弹出包含相应字体/代码点的内联SVG以显示图标。

使用方法

导入包

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

dependencies:
  material_symbols_icons: ^2.801

然后在你的Dart文件中导入：

import 'package:material_symbols_icons/symbols.dart';

引用图标

你可以通过 Symbols 类来引用图标：

final myIcon = Icon(Symbols.add_task);
final myRoundedIcon = Icon(Symbols.add_task_rounded);
final mySharpIcon = Icon(Symbols.add_task_sharp);

自定义图标样式

Material Symbols Icons 支持完整的图标变体参数设置，包括填充、权重、等级和光学尺寸。例如：

final myIcon = Icon(
  Symbols.settings,
  fill: 1,
  weight: 700,
  grade: 0.25,
  opticalSize: 48,
);

你还可以通过 IconThemeData 设置全局默认值：

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Symbols Icons For Flutter',
      theme: ThemeData(
        primarySwatch: Colors.teal,
        useMaterial3: true,
        fontFamily: 'Roboto',
        iconTheme: const IconThemeData(
          color: Colors.black,
          fill: 0,
          weight: 100,
          opticalSize: 48,
        ),
      ),
      home: const MyHomePage(title: 'Material Symbols Icons For Flutter'),
    );
  }
}

使用 get() 方法

如果你需要动态获取图标，可以使用 get() 方法。注意，这需要关闭树摇优化：

import 'package:material_symbols_icons/get.dart';

final iconRounded = SymbolsGet.get('airplane', SymbolStyle.rounded);
final iconSharp = SymbolsGet.get('airplane', SymbolStyle.sharp);
final iconOutlined = SymbolsGet.get('airplane', SymbolStyle.outlined);

// 访问图标名称到代码点的映射
final unicodeCodePointAirplane = SymbolsGet.map['airplane'];

// 遍历并打印所有可用的图标名称
for (var iconname in SymbolsGet.values) {
  print(iconname);
}

示例应用

以下是一个完整的示例应用，展示了如何使用 material_symbols_icons 插件：

import 'package:flutter/material.dart';
import 'package:material_symbols_icons/symbols.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import 'package:material_symbols_icons/symbols_map.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Symbols Icons Demo',
      theme: ThemeData(
        primarySwatch: Colors.teal,
        useMaterial3: true,
        iconTheme: const IconThemeData(color: Colors.black),
      ),
      home: MyHomePage(title: 'Material Symbols Icons Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    // 设置默认变体
    MaterialSymbolsBase.setOutlinedVariationDefaults(
      color: Colors.red,
      fill: 0.0,
      weight: 300,
      grade: 0,
      opticalSize: 40.0,
    );
    MaterialSymbolsBase.setRoundedVariationDefaults(
      color: Colors.blue,
      fill: 0.0,
      weight: 400,
      grade: 200,
      opticalSize: 48.0,
    );
    MaterialSymbolsBase.setSharpVariationDefaults(
      color: Colors.teal,
      fill: 0.0,
      weight: 600,
      grade: 0.25,
      opticalSize: 20.0,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            VariedIcon.varied(Symbols.developer, size: 48),
            SizedBox(height: 20),
            VariedIcon.varied(Symbols.pedal_bike, size: 48),
            SizedBox(height: 20),
            VariedIcon.varied(Symbols.settings, size: 48),
          ],
        ),
      ),
    );
  }
}

这个示例展示了如何使用 VariedIcon.varied() 方法创建带有默认变体设置的图标。你可以根据需要调整颜色、填充、权重等参数。

结论

material_symbols_icons 插件为Flutter开发者提供了一个强大而灵活的工具，用于管理和自定义Material Symbols Icons。通过遵循上述步骤，你可以轻松地将这些图标集成到你的应用程序中，并根据需要进行个性化设置。