Flutter图标库插件 outline_material_icons 的使用

outline_material_icons 是一个提供 Material Design 网站上 ‘outline’ 主题图标的 Flutter 插件。这些图标在默认的 Flutter 图标库中不可用，也没有作为 .ttf 字体文件提供。

功能概述

• 提供了 Material Design 网站上的 ‘outline’ 主题图标。
• 包含了一个 Map<String, int>，其中包含蛇形命名的图标名称和对应的代码点。
• 由于单色限制，所有部分填充的图标（如部分电量图标）都被移除。

使用方法

步骤 1：添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  outline_material_icons: ^latest_version

记得将 ^latest_version 替换为最新版本号。

步骤 2：导入并使用

接下来，在 Dart 文件中导入该包，并使用 OMIcons 类来显示图标。

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Icon(OMIcons.sentimentSatisfied);
  }
}

示例 Demo

以下是一个完整的示例应用程序，展示了如何浏览和选择不同的 outline_material_icons 图标：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'outline_material_icons example',
      home: MyHomePage(title: 'outline_material_icons example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({this.title = ''});

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

class _MyHomePageState extends State<MyHomePage> {
  String selectedName = '';
  IconData? selectedIcon;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              children: <Widget>[
                selectedIcon != null ? Icon(selectedIcon, size: 48.0) : Container(),
                Flexible(
                  child: Text(
                    selectedName.isNotEmpty ? selectedName : "Select an icon",
                    style: Theme.of(context).textTheme.subtitle1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 6,
              ),
              itemCount: OMIcons.codePoints.length,
              itemBuilder: (context, index) => InkWell(
                onTap: () {
                  setState(() {
                    selectedName = OMIcons.codePoints.keys.toList()[index];
                    selectedIcon = IconData(
                      OMIcons.codePoints[selectedName]!,
                      fontFamily: 'outline_material_icons',
                      fontPackage: 'outline_material_icons',
                    );
                  });
                },
                child: Icon(
                  IconData(
                    OMIcons.codePoints.values.toList()[index],
                    fontFamily: 'outline_material_icons',
                    fontPackage: 'outline_material_icons',
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

注意事项

• 所有部分填充的图标（如部分电量图标）被移除了。
• 带下划线的图标（如 border_color, format_color_fill 和 format_color_text）已将其线条变为实线。
• 某些图标名称进行了修改以避免 Dart 错误或冲突，例如 360 改为 icon360，class 改为 classIcon，sync 改为 syncIcon。

通过上述步骤和示例代码，你可以轻松地在 Flutter 应用程序中使用 outline_material_icons 提供的各种图标。