flutter 引入第三方 Icon 圖標（以阿里圖標庫為例)

在fluttter中引入第三方圖標庫的具體方法：

1.在阿里圖標庫選好需要用的圖標，添加進購物車將選好的圖標打包下載到本地（下載代碼），復制iconfont.ttf文件到項目中

2.存放途徑：lib/assets/icons/iconfont.ttf

3.打開項目根目錄中的pubspec.yaml文件，在flutter中增加配置【默認里面有配置案例注釋修改一下就可以了】，MyIcons為自定義名稱

flutter:

  fonts:
    - family: MyIcons
      fonts:
        - asset: lib/assets/icons/iconfont.ttf

4.在項目中引用：

import 'package:flutter/material.dart';
class TestDemoPage extends StatefulWidget {
  TestDemoPage({Key key}) : super(key: key);

  _TestDemoPageState createState() => _TestDemoPageState();
}

class _TestDemoPageState extends State<TestDemoPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: Scaffold(
         appBar: AppBar(
           title: Text('測試案例頁面'),
         ),
         body: Column(
           children: <Widget>[
             Container(
               child:Icon(IconData(0xe714,fontFamily:'MyIcons')),
             )
           ],
         ),
       ),
    );
  }
}

其中：IconData()里面，第一個參數為codePoint，代表圖標字體存儲的Unicode，這個可以在打開下載文件中的HTML文件查看，將 &# 字符替換為 0 即可，fontFamily：后面跟自定義的字體圖標名稱，我這里是MyIcons

 

順便一提：flutter底部導航這里有個規則：

BottomNavigationBarType.fixed，當少於四個項目時的默認值。如果選中的項為非null，則使用fixedColor渲染，否則使用主題的ThemeData.primaryColor。導航欄的背景顏色是默認的材質背景顏色，ThemeData.canvasColor（基本上是不透明的白色）。
BottomNavigationBarType.shifting，當有四個或更多項時的默認值。所有項目都以白色呈現，導航欄的背景顏色與所選項目的BottomNavigationBarItem.backgroundColor相同 。在這種情況下，假設每個項目將具有不同的背景顏色，並且背景顏色將與白色形成鮮明對比。

我當時參照的教程，底部導航只有三個，到我自己想寫一個時，我搞了四個導航，結果一出來效果完全不同，當時就懵逼了，后來看了api才知道是這個原因，如果想要三個以上導航也按照 fixed 模式設置，可以增加參數：

bottomNavigationBar: BottomNavigationBar(
...
// 大於3個項，默認設置為BottomNavigationBarType.shifting,此處根據需求可更改
type:BottomNavigationBarType.fixed,
...
),
原文地址：https://blog.csdn.net/shuaizi96/article/details/88550217