Flutter学习之路->svg矢量图标 IconData的生产过程 坑一下填一把

笔记说明:

今天信心满满的坐在电脑面前 产品对我说 想用dart package ->water_drop_nav_bar这个bottomNavigationBar效果，实现我们的产品底部切换 因为看到这个动画以后发现 确实跟我们的产品风格很相符 就同意了 于是乎开始了看起了这个小框架

1.先去看看效果吧

连接在此pub.flutter-io.cn/packages/wa…

2.那我就先用用看，编写一下代码

于是噼里啪啦编写了代码 诶怎么不对呢Icons是个什么 这不是矢量图库里的吗 仔细研究了一下 这个框架应该加载的是svg矢量图 用动画填充路径 所以往常的png图标是满足不了的 而产品又要求自定义图标

3.没什么难度

美术给了png图片直接转成svg不就可以了吗 于是找到了这篇文章 it.cha138.com/nginx/show-… 这里感谢这位走在前沿的兄弟

于是我拿着美术给的png图片 通过上面的博客链接找到了png转svg的网站

4.好的 去操作一下

png成功转成svg这

5.此时信心满满

倒入我那新鲜的svg 把它变成可识别的ttf文件

6.导入成功

7.选中这些图片 它会变成黄色框

8.点击生成font文件

9.已经生成了

10.本地创建一个font文件夹

11.把下载出来的icomoon.ttf放入到对应路径下 文件名你可以自己修改

12.在pubspec.yaml 里配置一下文件

13.创建一个类 用来读取.ttf里面的svg信息 这不也就是转换成代码

14.点开icomoon文件夹里面的demo.html

15.把里面的编码复制到对应位置

16.这时候拿着CustomIcons 直接就可以使用了

好的置入代码

barItems: [
  BarItem(
    filledIcon: CustomIcons.tab1,
    outlinedIcon: CustomIcons.tab1,
  ),
  BarItem(
    filledIcon: CustomIcons.tab2,
    outlinedIcon: CustomIcons.tab2,
  ),
  BarItem(
    filledIcon: CustomIcons.tab3,
    outlinedIcon: CustomIcons.tab3,
  ),
  BarItem(
    filledIcon: CustomIcons.tab4,
    outlinedIcon: CustomIcons.tab4,
  ),
],

17.看效果

可以看到这盛世如我所愿 果然不对 原来是svg图片的路径必须是可填充有要求的 我找到了美术小伙伴 让他把svg好好做做 然后重复操作生成.ttf文件

18.好的解决了！

这就是所有的过程 不懂的可以加V:sunyan414361110