文章目錄

• 一、FlutterIcon 下載圖標
• 二、自定義 svg 圖標生成 ttf 字體文件
• 三、使用下載的 ttf 圖標文件
• 四、完整代碼示例
• 五、相關資源

一、FlutterIcon 下載圖標

---

https://www.fluttericon.com/ 可以根據需求挑選合適的 icon 圖標 , 生成 ttf 文件 ;

下圖中 , 選中需要生成 ttf 字體文件的圖標 , 這里選中了前 $10$ 個圖標 , 然后點擊右上角的 DOWNLOAD 按鈕 , 該網站會在后臺將這 $10$ 個圖標的 SVG 文件打包到 ttf 文件中 ,

下載的文件是 flutter-icons-5b92b65c.zip , 后面一串是隨機生成的數字 ;

該壓縮包中主要有三個文件 ,

① ttf 字體文件 : MyFlutterApp.ttf , svg 格式的圖標就封裝在該文件中 ;

② dart 文件 : Flutter 中使用 ttf 圖標的參考 ,

/// Flutter icons MyFlutterApp /// Copyright (C) 2021 by original authors @ fluttericon.com, fontello.com /// This font was generated by FlutterIcon.com, which is derived from Fontello. /// /// To use this font, place it in your fonts/ directory and include the /// following in your pubspec.yaml /// /// flutter: /// fonts: /// - family: MyFlutterApp /// fonts: /// - asset: fonts/MyFlutterApp.ttf /// /// /// * Material Design Icons, Copyright (C) Google, Inc /// Author: Google /// License: Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) /// Homepage: https://design.google.com/icons/ /// import 'package:flutter/widgets.dart';class MyFlutterApp {MyFlutterApp._();static const _kFontFam = 'MyFlutterApp';static const String? _kFontPkg = null;static const IconData threedee_rotation = IconData(0xe855, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData ac_unit = IconData(0xe856, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData access_alarm = IconData(0xe857, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData access_alarms = IconData(0xe858, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData access_time = IconData(0xe859, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData accessibility = IconData(0xe85a, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData accessible = IconData(0xe85b, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData account_balance = IconData(0xe85c, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData account_box = IconData(0xe85d, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData account_balance_wallet = IconData(0xf008, fontFamily: _kFontFam, fontPackage: _kFontPkg); }

③ json 配置文件 : 這個看起來是給前端開發使用的 ;

{"name": "","css_prefix_text": "","css_use_suffix": false,"hinting": true,"units_per_em": 1000,"ascent": 850,"glyphs": [{"uid": "2cc10cdba83708a30142016d40519bb9","css": "threedee_rotation","code": 59477,"src": "material"},{"uid": "6a105ad156427b024b633a799e03af7b","css": "ac_unit","code": 59478,"src": "material"},{"uid": "9548f8adbc5e7b2dc94633be2821cd1f","css": "access_alarm","code": 59479,"src": "material"},{"uid": "2b1bcd8b15d35599f6828e4f5eadfa30","css": "access_alarms","code": 59480,"src": "material"},{"uid": "82f44f1094ffd1d78093e76c33cc08cc","css": "access_time","code": 59481,"src": "material"},{"uid": "ad65fa7f0f35e80fe1f1a5afadbc561f","css": "accessibility","code": 59482,"src": "material"},{"uid": "74bc3a2d72aec992ff1e08cfdd986b38","css": "accessible","code": 59483,"src": "material"},{"uid": "5da59f89dd294fa4475a7cdbe3cd3145","css": "account_balance","code": 59484,"src": "material"},{"uid": "cdd836ec082da15e51545f2ea1a37015","css": "account_balance_wallet","code": 61448,"src": "material"},{"uid": "58f376c8c60c911e8cd5a65becb0d932","css": "account_box","code": 59485,"src": "material"}] }

二、自定義 svg 圖標生成 ttf 字體文件

---

https://www.fluttericon.com/ 中 , 將 SVG 格式的圖標拖動到該地址頁面的 Custom Icons 區域 ,

拖動過程 :

拖動完成后 , 頁面中的 Custom Icons 區域會顯示這 $20$ 個 SVG 圖標 ;

選中這些圖標 , 點擊 DOWNLOAD 按鈕 , 即可下載生成的 ttf 格式的文件 ;

三、使用下載的 ttf 圖標文件

---

將 MyFlutterApp.ttf 字體文件拷貝到 Flutter 源碼根目錄下的 fonts 目錄下 ,

在 pubspec.yaml 配置文件中配置字體文件 ,

name: flutter_image_widget description: A new Flutter application.version: 1.0.0+1environment:sdk: ">=2.1.0 <3.0.0"dependencies:flutter:sdk: fluttercupertino_icons: ^0.1.2path_provider: ^2.0.1transparent_image: ^2.0.0cached_network_image: ^2.5.1dev_dependencies:flutter_test:sdk: flutterflutter:uses-material-design: trueassets:- images/sidalin.png- images/sidalin2.png- images/waiting.giffonts:- family: MyFlutterAppfonts:- asset: fonts/MyFlutterApp.ttf

參考下載時給的示例代碼 , 里面有每個圖標對應的 $16$ 進制的 Unicode 編碼 , $3\mathrm{D}$ 圖標對應的編碼是 $0\mathrm{x}\mathrm{e}855$ ;

import 'package:flutter/widgets.dart';class MyFlutterApp {MyFlutterApp._();static const _kFontFam = 'MyFlutterApp';static const String? _kFontPkg = null;static const IconData threedee_rotation = IconData(0xe855, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData ac_unit = IconData(0xe856, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData access_alarm = IconData(0xe857, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData access_alarms = IconData(0xe858, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData access_time = IconData(0xe859, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData accessibility = IconData(0xe85a, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData accessible = IconData(0xe85b, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData account_balance = IconData(0xe85c, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData account_box = IconData(0xe85d, fontFamily: _kFontFam, fontPackage: _kFontPkg);static const IconData account_balance_wallet = IconData(0xf008, fontFamily: _kFontFam, fontPackage: _kFontPkg); }

IconData 構造函數參數說明 :

• codePoint : 字體中的圖標對應的十六進制 Unicode ;
• fontFamily : pubspec.yaml 中配置的 fontFamily ;
• fontPackage : 字體所在的包 , 默認不填 ;
• matchTextDirection : 圖標繪制方向 , 是否按照 svg 文件中的方向繪制 ;

代碼中使用 IconData 加載自定義圖標 , $3\mathrm{D}$ 圖標對應的編碼是 $0\mathrm{x}\mathrm{e}855$ ;

Center(// 加載自定義圖標child: Icon(IconData(0xe855, fontFamily: "MyFlutterApp",), size: 200,), ),

運行效果 : 第一個圖標就是加載的自定義圖標 ;

四、完整代碼示例

---

完整代碼示例 :

import 'package:flutter/material.dart'; import 'dart:io'; import 'package:path_provider/path_provider.dart'; import 'package:transparent_image/transparent_image.dart'; import 'package:cached_network_image/cached_network_image.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget 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, this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}/// SD 卡路徑String sdPath;@overridevoid initState() {// 獲取 SD 卡路徑getSdPath();}void getSdPath() async {String path = (await getExternalStorageDirectory()).path;setState(() {sdPath = path;});}@overrideWidget build(BuildContext context) {print("sdPath : $sdPath");return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: ListView(children: [Center(// 加載自定義圖標child: Icon(IconData(0xe855, fontFamily: "MyFlutterApp",), size: 150,),),Center(// 加載 Flutter 內置圖標child: Icon(Icons.threed_rotation, size: 200,),),Stack(children: [Center(// 網絡加載時顯示本地的資源圖片child: FadeInImage.assetNetwork(// Placeholderplaceholder: "images/waiting.gif",image: "https://img-blog.csdnimg.cn/20210324110914742.png",),)],),Stack(children: [// 進度條Center(child: CircularProgressIndicator(),),Center(// 網絡加載時漸變出現child: FadeInImage.memoryNetwork(// Placeholderplaceholder: kTransparentImage,image: "https://img-blog.csdnimg.cn/2021032321394771.png",),)],),Center(// 圖片加載完成之前顯示的是 placeholder , 加載完成后顯示網絡圖片child: CachedNetworkImage(// 加載網絡圖片過程中顯示的內容 , 這里顯示進度條placeholder: (context, url)=>CircularProgressIndicator(),// 網絡圖片地址imageUrl: "https://img-blog.csdnimg.cn/20210324100419204.png",),),// 圖片組件 , 從網絡中加載一張圖片Image.network(// 圖片地址"https://img-blog.csdnimg.cn/2021032313493741.png",),Image(image: AssetImage("images/sidalin.png"),),//Image.asset('images/sidalin2.png', ),/// 從 SD 卡加載圖片if(sdPath != null)Image.file(File('$sdPath/sidalin3.png'),width: 200,),],)),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);} }

運行效果展示 :

五、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_image_widget ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/16083326 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。