如何在 Flutter 中创建自定义图标【Flutter专题22】

徐建国

发布于 2022-03-30 15:20:31

3.4K0

发布于 2022-03-30 15:20:31

文章被收录于专栏：个人路线

在本文中，我将向您展示如何在 Flutter 中创建自定义图标

Flutter 提供了很多开箱即用的图标，使用这些图标非常容易。但是，您也可以使用自己的图标。您需要的是一个 TTF（True Type Font）文件，其中包含您要使用的图标。生成 TTF 文件的最简单方法是使用 Fluttericon.com。

创建或查找 SVG 文件

您至少需要一个 SVG 文件。您可以在 Internet 上找到免费的 SVG 图像或创建自己的文件。它必须是 SVG 格式。

打开Fluttericon.com

上传 SVG 文件，稍等片刻，您会在右上角看到下载按钮。按下按钮以获取包含您需要的文件的 zip。

解压缩下载的 Zip 并复制文件。

在fonts文件夹里面，有一个.ttf文件。将其复制到项目中的目录中，例如assets/fonts.

然后，将.dart文件复制到lib目录中。例如，您可以将其复制到lib/assets. 该文件应如下所示。有多个IconData常量，每个常量代表一个Icon.

  import 'package:flutter/widgets.dart';
 
  class MyCustomIcons {
    MyCustomIconss._();
 
    static const _kFontFam = 'MyCustomIconss';
 
    static const IconData icon1 = const IconData(0xe800, fontFamily: _kFontFam);
    static const IconData icon2 = const IconData(0xe801, fontFamily: _kFontFam);
  }

更新`pubspec.yaml`文件

在flutter部分下，添加fonts以添加您复制的文件.ttf。

  flutter:
    fonts:
      - family:  MyCustomIcons
        fonts:
        - asset: assets/fonts/MyCustomIcons.ttf

导入`.dart`文件以使用图标。

在要使用图标的文件中，导入下载的 .dart 文件，您就可以使用图标了。

  import './assets/my_custom_icons.dart';
  void main() => runApp(MyApp());
 
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter DropdownButton Tutorial',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter DropdownButton Tutorial by jianguojs.cn'),
          ),
          body: Center(
            child: Icon(MyCusstomIcons.icon1),
          ),
        ),
      );
    }
  }

今天的文章就分享到这儿，如果大家喜欢的话，我将会在接下来的一段时间里，持续分享更多优质内容。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除

svg