Flutter 自定義矢量圖標

使用系統(tǒng)的自帶的 Icon

const Icon(Icons.star, color: Colors.red,)

Icons 是系統(tǒng)圖標的集合

自定義 Icon

  1. 去阿里圖標庫搜索對應的圖標,選擇之后然后點擊下載代碼 https://www.iconfont.cn/
  2. 解壓之后就是圖標的一些文件,里面包含字體文件(ttf) 和 json 配置文件
  3. 項目新建一個 fonts 文件夾,將 iconfont.ttf 字體文件拖入 fonts 文件夾
  4. 在 pubspac.yaml 文件中配置 fonts
    fonts:
    - family: AppIcons
      fonts:
        - asset: fonts/iconfont.ttf
    
    然后執(zhí)行 flutter pub get
  5. 在 lib 文件夾下面新建一個 icons.dart 文件(名稱隨意), 創(chuàng)建一個 AppIcons 類(名稱隨意)
    import 'package:flutter/material.dart';
    
    class AppIcons {
        // 對應圖標的名稱,隨便你怎么起名
        static const IconData konglong = IconData(
            0xe6eb,
            fontFamily: 'AppIcons',
        );
    }
    
    使用 IconData 自定義圖標,第一個參數是字體編碼,在 json 配置文件中找到 unicode,這個就是對應的字體編碼。fontFamily 是這個圖標字體屬于哪一個字體文件,AppIcons 是在 pubspac.yaml 文件中定義的 family 標識。

使用自定義的圖標

const Icon(AppIcons.konglong, color: Colors.green,)
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容