前言
目前微信的导航栏图标使用的是Flutter框架自带的字体图标，不太好看。
所以使用阿里巴巴矢量库找到了一些符合、贴近原生微信的图标，替换掉导航栏图标。
想法
- 自定义字体图标类。
- 导航栏使用自定义的图标。
实现
下载字体文件
在阿里巴巴矢量库中找到合适的图标，加入购物车，在购物车中下载代码，拷贝xxx.ttf和xxx.json文件到项目中。
修改项目配置
修改项目根目录下的pubspec.yaml配置文件加入以下代码
flutter:
fonts:
- family: WeChatFont
fonts:
- asset: fonts/wechat-iconfont.ttf
自定义图标类
IconData的构造函数如下
const IconData(
this.codePoint, {
this.fontFamily,
this.fontPackage,
this.matchTextDirection = false,
}
其中常用的属性为：
codePoint: 字体图标Unicode编码fontFamily: 字体名称（自定义，只要和配置文件保持一致就行）fontPackage: 字体包的名称matchTextDirection: 是否应在从右到左的环境中自动镜像此图标
在lib目录下新建ui/font.dart文件
IconData( codePoint(xxx.json中的unicode), fontFamily: fontFamily)
- fontFamily 配置文件中的值
import 'package:flutter/material.dart';
class WeChatFont {
static const fontFamily = "WeChatFont";
///添加用户
static const IconData add_user = IconData(0xf014d, fontFamily: fontFamily);
///语音
static const IconData speech = IconData(0xe805, fontFamily: fontFamily,);
///语音
static const IconData speech_2 = IconData(0xe888, fontFamily: fontFamily);
///我
static const IconData my = IconData(0xe608, fontFamily: fontFamily);
///消息
static const IconData message = IconData(0xe642, fontFamily: fontFamily);
///消息
static const IconData message_2 = IconData(0xe619, fontFamily: fontFamily);
///公众号
static const IconData official_accounts = IconData(0xe68b, fontFamily: fontFamily);
///位置
static const IconData address = IconData(0xe8ff, fontFamily: fontFamily);
///视频
static const IconData video = IconData(0xe603, fontFamily: fontFamily);
///群聊
static const IconData group_chat = IconData(0xe60f, fontFamily: fontFamily);
///设置
static const IconData setting = IconData(0xeb8d, fontFamily: fontFamily);
///标签
static const IconData label = IconData(0xeabd, fontFamily: fontFamily);
///图片
static const IconData picture = IconData(0xeac4, fontFamily: fontFamily);
///搜一搜
static const IconData search = IconData(0xe611, fontFamily: fontFamily);
///服务
static const IconData server = IconData(0xe732, fontFamily: fontFamily);
///音乐
static const IconData music = IconData(0xe667, fontFamily: fontFamily);
///扫一扫
static const IconData sweep = IconData(0xe62c, fontFamily: fontFamily);
///发现
static const IconData discover = IconData(0xe655, fontFamily: fontFamily);
///表情
static const IconData expression = IconData(0xe612, fontFamily: fontFamily);
///添加
static const IconData add = IconData(0xe641, fontFamily: fontFamily);
///朋友圈
static const IconData friend_circle = IconData(0xe603, fontFamily: fontFamily);
///附近
static const IconData nearby = IconData(0xebfa, fontFamily: fontFamily);
///通讯录
static const IconData directory = IconData(0xe604, fontFamily: fontFamily);
///相机
static const IconData camera = IconData(0xe63e, fontFamily: fontFamily);
///转账
static const IconData transfer = IconData(0xe606, fontFamily: fontFamily);
///收藏
static const IconData collection = IconData(0xea5a, fontFamily: fontFamily);
///卡包
static const IconData card_package = IconData(0xe603, fontFamily: fontFamily);
///文件
static const IconData file = IconData(0xe69e, fontFamily: fontFamily);
///收付款
static const IconData payment_received = IconData(0xe647, fontFamily: fontFamily);
}
修改导航栏图标
找到lib/pages/index/index.dart文件，修改导航栏图标
// 定义图标Map(方便后期使用自定义图标库)
final Map<String, Icon> _iconMap = const {
"message": Icon(WeChatFont.message),
"directory": Icon(WeChatFont.directory),
"discover": Icon(WeChatFont.discover),
"home": Icon(WeChatFont.my),
};
设置导航栏选择、未选择状态下的图标颜色和文字大小
BottomNavigationBar(
//设置选中图标颜色
selectedItemColor: Colors.green,
//设置未选中图标颜色
unselectedItemColor: Colors.grey,
//设置选中文字大小
selectedLabelStyle: const TextStyle(fontSize: 10),
//设置未选中文字大小
unselectedLabelStyle: const TextStyle(fontSize: 10),
//设置类型
type: BottomNavigationBarType.fixed,
//设置选中下标
currentIndex: _index,
//设置按钮按下事件
onTap: _onBottomNavigationBarTapped,
//调用构建导航栏组件方法
items: _getNavBarItem(),
)
