????小菜在學(xué)習(xí)過程中通常會(huì)需要大量的小圖標(biāo)冰沙,而多數(shù)的 Icon 都是經(jīng)過設(shè)計(jì)同學(xué)優(yōu)化過的馆类,而如何采用類似系統(tǒng) Icons 方式,此時(shí)可以通過自傳類似字體庫的 ttf 圖標(biāo)庫的方式來完成凰萨;
ACE_ICON
????小菜推薦兩個(gè)網(wǎng)站可以用來生成圖標(biāo)庫骄瓣;
1. 生成 ACE_ICON.ttf 圖標(biāo)庫
????小菜以 https://www.fluttericon.com/ 為例來生成圖標(biāo)庫;在這個(gè)圖標(biāo)庫中有很多成套的圖標(biāo)师坎,在這里可以選中需要的圖標(biāo)恕酸,也可以將本地生成的 .svg 文件拖拽進(jìn)庫中;
????其中設(shè)置完圖標(biāo)庫名稱后胯陋,通過工具選擇下載不同的文件蕊温,包括 ttf 圖標(biāo)庫、config 配置文件以及 mapping 映射文件遏乔;
2. 集成 ttf 圖標(biāo)庫
-
將 ACE_ICON.ttf 庫文件添加到 project 資源文件中义矛;
在 pubspec.yaml 文件中聲明 ACE_ICON.tt 文件庫;聲明方式與字體庫等一致盟萨,注意 family 與 font 名稱一致凉翻;在此可以聲明引入多個(gè)資源庫文件;之后 pub get 即可捻激;
fonts:
- family: DancingScript
fonts:
- asset: assets/DancingScript-Regular.ttf
- family: ACE_ICON
fonts:
- asset: images/ACE_ICON.ttf
- 將 mapping 文件添加到 project 中制轰,用于映射 ACE_ICON 圖標(biāo)庫中各 Icons 文件;
class ACE_ICON {
ACE_ICON._();
static const _kFontFam = 'ACE_ICON';
static const String _kFontPkg = null;
static const IconData emo_happy = IconData(0xe800, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_wink = IconData(0xe801, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_unhappy = IconData(0xe802, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_sleep = IconData(0xe803, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_thumbsup = IconData(0xe804, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_devil = IconData(0xe805, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_surprised = IconData(0xe806, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_tongue = IconData(0xe807, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_coffee = IconData(0xe808, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_sunglasses = IconData(0xe809, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_displeased = IconData(0xe80a, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_beer = IconData(0xe80b, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_grin = IconData(0xe80c, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_angry = IconData(0xe80d, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_saint = IconData(0xe80e, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_cry = IconData(0xe80f, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_shoot = IconData(0xe810, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_squint = IconData(0xe811, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_laugh = IconData(0xe812, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData emo_wink2 = IconData(0xe813, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData book_story = IconData(0xe814, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData book_type = IconData(0xe815, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData book_user = IconData(0xe816, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData crown = IconData(0xe844, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData crown_plus = IconData(0xe845, fontFamily: _kFontFam, fontPackage: _kFontPkg);
static const IconData crown_minus = IconData(0xe846, fontFamily: _kFontFam, fontPackage: _kFontPkg);
}
3. 圖標(biāo)庫 IconData
????集成之后胞谭,使用方式與默認(rèn)的 Icon 一致垃杖,直接獲取 IconData 即可,對(duì)于 Icon 的顏色尺寸等其他繪制也不會(huì)有影響韭赘;
List aceIconData = [
ACE_ICON.book_story, ACE_ICON.book_type, ACE_ICON.book_user, ACE_ICON.crown,
ACE_ICON.crown_minus, ACE_ICON.crown_plus, ACE_ICON.emo_angry, ACE_ICON.emo_beer,
ACE_ICON.emo_coffee, ACE_ICON.emo_cry, ACE_ICON.emo_devil, ACE_ICON.emo_displeased,
ACE_ICON.emo_grin, ACE_ICON.emo_happy, ACE_ICON.emo_laugh, ACE_ICON.emo_saint,
ACE_ICON.emo_shoot, ACE_ICON.emo_sleep, ACE_ICON.emo_squint, ACE_ICON.emo_sunglasses,
ACE_ICON.emo_surprised, ACE_ICON.emo_thumbsup, ACE_ICON.emo_tongue,
ACE_ICON.emo_unhappy, ACE_ICON.emo_wink, ACE_ICON.emo_wink2
];
return SliverPadding(
padding: const EdgeInsets.all(8.0),
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 6, mainAxisSpacing: 8.0, crossAxisSpacing: 8.0, childAspectRatio: 1.0),
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
decoration: BoxDecoration(color: Colors.grey.withOpacity(0.2), borderRadius: BorderRadius.circular(3.0)),
child: Center(child: Icon(dataList[index], color: Colors.blue.withOpacity(0.6)))),
childCount: dataList.length)));
4. 異常注意
????小菜在測(cè)試過程中缩滨,會(huì)顯示如下圖所示返敬,Icon 資源展示不出來晨横,其原因是小菜在 pubspec.yaml 文件聲明時(shí)換行空格導(dǎo)致的咙鞍,注意在引入所有資源庫文件時(shí),都應(yīng)嚴(yán)格遵守 pubspec.yaml 聲明格式袖牙;
Flutter 版本分支切換
????Flutter 一直在穩(wěn)定快速的更新迭代,而為了項(xiàng)目的穩(wěn)定性舅锄,以及一些三方插件的應(yīng)用鞭达,我們可能不會(huì)直接升級(jí)到最新版本,此時(shí)就需要切換分支,回退固定版本畴蹭;小菜簡(jiǎn)單整理一下常用的幾個(gè)命令行坦仍;
1. flutter channel
????flutter channel 用于查看渠道,官方分為 stable叨襟、beta繁扎、dev、master 四種糊闽,小菜推薦是用 stable 穩(wěn)定版梳玫;此時(shí),小菜建議在操作命令行指令時(shí)先進(jìn)入 flutter 目錄中右犹;
2. flutter channel X
????在獲取官方的各個(gè)分支之后提澎,通過 flutter channel stable 用于切換到 stable 或其他分支;
3. git tag
????git tag 用于查看 Flutter 各版本號(hào)念链;
4. git checkout (version)
????git checkout 1.17.4 用于切換固定 Flutter 版本分支盼忌;
5. git reset --hard (version)
????git reset --hard 1.17.4 用于指向?qū)?yīng)版本分支;
6. flutter version (version)
????flutter version1.17.4 用于升級(jí)或回退到指定 Flutter 版本分支掂墓;
7. flutter --version
????flutter --version 用于查看當(dāng)前使用的版本碴犬,可以通過 --version 進(jìn)行版本更新或回退后驗(yàn)證;
????小菜此次僅是對(duì)于日常資源庫和命令行的簡(jiǎn)單應(yīng)用梆暮,熟能生巧服协,僅限于日常積累;如有錯(cuò)誤啦粹,請(qǐng)多多指導(dǎo)偿荷!
來源: 阿策小和尚