Flutter第7天--字体图标+综合小案例+Android代码交互

/// 3d_rotation — material icon named “3d rotation”.
static const IconData threed_rotation = IconData(0xe84d, fontFamily: ‘MaterialIcons’);

/// 4k — material icon named “4k”.
static const IconData four_k = IconData(0xe072, fontFamily: ‘MaterialIcons’);

---

3.怎么才能自定义字体图标

玩前端的应该都知道:还是进入阿里图标神库:iconfont

---

4.根据Flutter内置的类，我写了一个自动代码生成器

虽然直接也能用，不够要记住图标的unicode码，算了，还是跟Flutter看齐吧

注意：为了简单使用：拷贝到的位置，命名，请务必和下面保持一致!保持一致!
把两个文件拷贝到对应处，icon_by_toly.dart写好(在下面)，右键运行就自动生成iconfont.dart了

代码生成器：icon_by_toly.dart

import ‘dart:io’;

main() {
var result = “”"import ‘package:flutter/widgets.dart’;
//Power By 张风捷特烈— Generated file. Do not edit.

class TolyIcon {

TolyIcon._();
“”";

var fileCss = File.fromUri(Uri.parse(“${Uri.base}iconfont/iconfont.css”));
if (!fileCss.existsSync()) {
return;
}

var read = fileCss.readAsStringSync();

var split = read.split(“.icon-”);
split.forEach((str) {
if (str.contains(“before”)) {
var split = str.split(“:”);
result += “static const IconData " +
split[0].replaceAll(”-“, “_”) +
" = const IconData(” +
split[2].replaceAll(“”\“, “0x”).split(”“”)[0] +
“, fontFamily: “TolyIcon”);\n”;
}
});
result+=“}”;
fileCss.delete();

var fileOut = File.fromUri(Uri.parse(“${Uri.base}lib/iconfont.dart”));
fileOut.writeAsStringSync(result);

var config=“”"
fonts:

• family: TolyIcon
  fonts:
• asset: iconfont/iconfont.ttf
  “”“;
  var yaml = File.fromUri(Uri.parse(”${Uri.base}pubspec.yaml"));
  if (yaml.readAsStringSync().contains(“TolyIcon”)) {
  return;
  }
  yaml.writeAsString(config,mode: FileMode.append);
  }

---

pubspec.yaml的flutter标签下也会自动生成配置：

fonts:

• family: TolyIcon
  fonts:
• asset: iconfont/iconfont.ttf

Icon(TolyIcon.icon_spring_boot)//颜色可自行处理

---

友情提示：下载之前最好把图标名字改一下，不然之后找起来费劲

如果实在不想该，可以点击这里查看名字和图标的对应情况

---

二、综合小案例

1.初始代码：主页面：android_stack.dart

import ‘package:flutter/material.dart’;

class AndroidPage extends StatefulWidget {
@override
_AndroidPageState createState() => _AndroidPageState();
}

class _AndroidPageState extends State
with SingleTickerProviderStateMixin {

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {

var scaffold = Scaffold(
appBar: AppBar(
title: Text(“张风捷特烈”),
),
body: Container(),
floatingActionButton: FloatingActionButton(
onPressed: () {

},
tooltip: ‘Increment’,
child: Icon(Icons.add),
),
);

return scaffold;
}
}

---

2.拼接底部条

---

2.1:常量的准备：(为了方便使用或修改)

class ItemBean {
Color color;
IconData iconId;
String info;
ItemBean(this.color, this.iconId, this.info);
}

//底部栏图标信息
var iconLi=[
ItemBean(Color(0xff8FC552),TolyIcon.android,“Android”),
ItemBean(Color(0xff6BFB00),TolyIcon.icon_spring_boot,“SpringBoot”),
ItemBean(Color(0xff63DAFF),TolyIcon.react,“React”),
ItemBean(Color(0xffF3D861),TolyIcon.biji,“编程随笔”),
ItemBean(Color(0xff5CEBF2),TolyIcon.daima,“系列文章”)
];

---

2.2:底部栏：

//成员变量
int _curIndex = 0;

//底部栏
var bottomNavigationBar = BottomNavigationBar(
items: iconLi.map((item) {
return BottomNavigationBarItem(
title: Text