Flutter 自定義ICON庫

Flutter自帶了Material的圖示，但還是不太滿足我們國内的需求，比如微信、微網誌、QQ這些國内常用的圖示就沒有收錄，或者為了讓APP更有個性，我們希望換掉Material的風格，這個時候，自定義圖示就成了一個不大不小的問題，Flutter對于引用自定義的解決思路其實不太複雜，按照以下步驟做就可以了。

一、生成TTF庫

1.1、将png等格式的圖檔轉換為svg格式

        不做解釋，網站有很多線上轉換。

        例如：​​PNG轉SVG – 線上将PNG文檔轉換成至SVG​​

1.2、将svg格式轉換為ttf格式；

        網址：​​​IcoMoon App - Icon Font, SVG, PDF & PNG Generator​​

        或者使用：​​iconfont-阿裡巴巴矢量圖示庫​​

第一步： 導入SVG圖檔

 第二步：選擇要轉換的圖檔（選取後變為黃色邊框）

 第三步：生成

 第四步：下載下傳

 二、引入到Flutter

2.1 将ttf檔案添加到項目中：

 2.2 建立關聯類【MyIcons.dart】:

fontFamily的值，為上圖第二步的自定義 family 值。

import 'package:flutter/material.dart';
 
class MyIcons{
  static const IconData home= const IconData(
      0xe604,
      fontFamily: "MyIcons",
      matchTextDirection: true
  );
 
}      

import 'package:flutter/material.dart';
import 'package:flutter_app_test/pages/example/ttf/MyIcons.dart';
 
void main() {
  runApp(Main());
}
 
class Main extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MainPage());
  }
}
 
class MainPage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: Container(
        padding: const EdgeInsets.all(100),
        child: Row(
          children: [
            Icon(MyIcons.home,size: 100,),
            Text("This is a ttf!"),
          ],
        ),
      ),
      // bottomNavigationBar: BottomNavigationBar(
      //     items: [
      //       BottomNavigationBarItem(icon: Icon(MyIcons.home),label: "首頁"),
      //       BottomNavigationBarItem(icon: Icon(MyIcons.life),label: "生活"),
      //       BottomNavigationBarItem(icon: Icon(MyIcons.money),label: "金融"),
      //       BottomNavigationBarItem(icon: Icon(MyIcons.mine),label: "我的"),
      //     ]
      // ),
    );
  }
}