Flutter图标使用插件material_design_icons_flutter的功能

简介

material_design_icons_flutter 是一个基于 Material Design Icons 的Flutter图标包。它包含了丰富的图标资源，可以方便地在Flutter项目中使用。

你可以通过访问 web demo 来查看由这个包构建的在线演示。

如果你喜欢这个包，请在 pub.dev 上点赞！

安装

在你的 pubspec.yaml 文件的 dependencies: 部分添加以下行：

  material_design_icons_flutter: 7.0.7296

警告：MDI的版本号是根据图标的数量来定的，并不严格遵循语义化版本控制指南。他们尽力保持小版本之间的图标名称不变，但名称更改的情况仍然可能出现。为了不破坏你的应用程序，强烈建议你在 pubspec.yaml 中使用固定版本。

使用方法

直接使用图标常量

你可以在Dart代码中直接引用 MdiIcons 类中的图标常量。例如：

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      // 使用 MdiIcons 类中的图标常量
      icon: Icon(MdiIcons.sword),
      onPressed: () { print('Using the sword'); }
    );
  }
}

通过字符串名称获取图标

如果你想通过字符串名称来获取图标，可以使用 fromString 方法。不过，这种方法并不推荐，因为它需要一个包含所有图标名称的映射表，无法享受树摇算法（tree-shaking）带来的优化效果。

在Flutter 1.22及以上版本中，使用 fromString 方法会导致编译错误 This application cannot tree shake icons fonts，可以通过 --no-tree-shake-icons 参数绕过此问题。

示例代码如下：

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      // 使用字符串名称来获取图标
      icon: Icon(MdiIcons.fromString('sword')),
      onPressed: () { print('Using the sword'); }
    );
  }
}

名称转换

由于某些图标名称是Dart语言中的保留关键字，因此这些名称已经进行了更改。具体修改如下：

• null -> nullIcon
• switch -> switchIcon
• sync -> syncIcon
• factory -> factoryIcon

示例Demo

下面是一个完整的示例，展示了如何在Flutter应用中使用 material_design_icons_flutter 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: <Widget>[
          IconButton(
            icon: Icon(MdiIcons.sword),
            onPressed: () { print('Using the sword'); },
          ),
          IconButton(
            icon: Icon(MdiIcons.fromString('shield')), // 不推荐使用
            onPressed: () { print('Using the shield'); },
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(MdiIcons.plus),
      ), 
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用程序，其中包含两个图标按钮，分别使用了 MdiIcons.sword 和 MdiIcons.fromString('shield')。此外，还有一个浮动操作按钮，使用了 MdiIcons.plus 图标。

请注意，尽量避免使用 fromString 方法，以确保你的应用程序能够正确地进行树摇算法优化。