Flutter嚐鮮1——3步驟使用自定義Icon

官方Icon

Flutter本身自帶了MaterialDesign的圖標集，在pubspec.yaml中有如下配置

...
flutter:
  users-material-design: true
...

通過以上配置，就可以在代碼中引用任何MD的官方圖標(需翻牆)。這些圖片都定義在了IconDatas中。

Icon(Icons.favorite)

第三方Icon

第三方圖標庫和MD的圖片庫在使用上沒有區別，但需要手動引入和配置路徑。爲了方便複用，我們可以把圖標製作爲一個第三方庫來調用。例如：

...
import 'package:my_icon/my_icon.dart';

...
Icon icon = Icon(MyIcon.zhihu);   # 知乎LOGO

製作Icon庫

1.製作ttf文件

一般我們會在iconfont.cn上去尋找合適的圖標集或自行繪製，完成後打包下載，壓縮包裏有製作好的ttf文件。

2.編寫配置文件

作爲示例，在/lib目錄下創建一個名爲my_font的文件夾，文件夾中的pubspec.yaml內容如下：

name: my_font
description: The font for my application
author: Lynx <[email protected]>
homepage: http://www.a-lightyear.com/
version: 1.0.0

environment:
  sdk: ">=2.0.0-dev.28.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  recase: "^2.0.0+1"

flutter:
  fonts:
    - family: MyIcon
      fonts:
        - asset: lib/fonts/iconfont.ttf
          weight: 400

從配置文件看出，iconfont下載的ttf文件放在/lib/my_font/lib/fonts/下面，該路徑可以自行設置。

3.編寫庫文件

library font_social_flutter;
    
import 'package:flutter/widgets.dart';

class MyIcon {
  static const IconData zhihu = const _MyIconData(0xe6a2);
  static const IconData wechat = const _MyIconData(0xe697);
  static const IconData alipay = const _MyIconData(0xe698);
  static const IconData weibo = const _MyIconData(0xe6ab);
  static const IconData wechat_friends = const _MyIconData(0xe6ae);
  static const IconData qq = const _MyIconData(0xe6ac);
}

class _MyIconData extends IconData {
  const _MyIconData(int codePoint)
      : super(
    codePoint,
    fontFamily: 'MyIcon',
    fontPackage: 'my_icon',
  );
}

這裏的0xe6a2即爲每個Icon的unicode字符。在iconfont下載包裏有一個html文件，打開後可以看到每個圖片的unicode值。

使用Icon

引入Icon庫

在使用之前，需要把該庫引入到當前flutter工程中。編輯flutter項目的pubspec.yaml，添加如下內容：

...
dependencies:
  flutter:
    sdk: flutter
  ...
  my_icon:
      path: lib/my_icon/   # 在這裏引入第三方icon庫
  ...
...

使用Icon

如開篇所述，在做好以上準備工作後，即可以如MD圖標一般方便的引入自制的圖標集。

...
import 'package:my_icon/my_icon.dart';

...
Icon icon = Icon(MyIcon.zhihu);   # 知乎LOGO