Flutter-初试牛刀,入门篇

​

好像说的就是我呀。学习Flutter一段时间了，我感觉我要入门了，特来总结一下遇到的点点滴滴。如下效果就是我用Flutter重写的曾经项目部分效果，说是部分其实能看到的就tm的一个首页列表。

​

1、为啥只写了一个页面？

熟悉一个技能写一个页面怎能体现出来？但是本身时间有限，作为快速熟悉上手很难一次性完成。

但是我相信你能很好的做出一个功能页面，其他的功能还会是问题吗？所以作为初试牛刀，入门小结，我就以此为路线，记录下遇到的坑坑洼洼。

2、先看下运行效果吧

gif动图：

homegif.gif

不会动的静态图：

OK看仔细点， 效果看起来是不是还可以？我感觉还行，至少在安卓和苹果上运行起来基本一致。

3、涉及到的知识点

其实单看页面感觉涉及到的东西不多，但背后同时也隐含了很多。大致归纳下吧；

• 工程及环境搭建、配置，相信很多人在这里停留了很久；
• android、iOS图标、启动页等资源相关的引入及设置；
• 第三方字体图标的使用、第三方依赖库的引入和使用,这有具体的描述: Flutter-引入第三方依赖包
• 基于Dio网络访问的操作封装和数据请求；这个开始很烦，耽误我不少功夫；
• 导航栏的自定义、列表布局、flex相关操作；
• 主题样式配置、局部主题设置颜色及样式相关；
• 时间日期格式化，页面间导航跳转、路由相关；
• 其他系统容器类组件、图片、文本等组件的使用；
• 自定义了组件、页面(其实也是组件)等；
• Dart语言学习、Flutter中文档反反复复的去看；

OK，一时想到的就这些了；放个工程全貌截图吧；

project.png

4、遇到的问题

别看一个简单的开始，遇到的问题太多，多的我都记不清有哪些了，反正佛挡杀佛、鬼挡杀鬼，一切问题直接干就得了；

问题1：导航栏相关：

系统自带的导航栏感觉好高，看起来怪怪的，而且在Andorid点击返回按钮时，你还下面提示个“返回”，感觉很不爽。所以我直接用自定义的了；

问题2：第三方依赖包引入使用问题(Dio)：

这个不再细说了，看Flutter-引入第三方依赖包详细总计。

问题3：Dio使用、Charles抓包相关：

为什么我要抓包了？因为我看到文档说：

dio.png

第一感觉，好爽，不用自己处理转化数据了；但是按照相关参数设置后，我测试接口返回的还是字符串，还是要自己去json转化。所以我要抓包了看看咋回事；

然后又引入下一个问题：

按曾经的操作、设备安装证书、设置代理、IP等，结果没啥反应；安卓、苹果设备来回换都是没反应。证书删了又装，总怀疑自己哪里不对；之前的其他APP在抓就是有结果的；难道Flutter不支持抓包了？？？

于是一番搜索，知道了：Flutter应用抓包的话，代码中也必须设置代理；就像这样：

设置代理.png

然后，Charles就一切正常了！

问题4：Tab切换页面，切回原来的页面还是重新创建：

bottomNavigationBar: BottomNavigationBar

每次来回切换，网络请求都要来一次，这样真的不好。最后换成iOS风格的解决：

return CupertinoTabScaffold(
    resizeToAvoidBottomInset: false,
    tabBar: CupertinoTabBar(
  iconSize: 22,
  activeColor: Color.fromARGB(255, 68, 68, 68),
  inactiveColor:Color(0xff929292) ,

  items: widget._barItem,
), tabBuilder: (ctx , index){
  return widget._pageList[index];
});

5、关于Flutter，我是如何学习的？

不少人提到Flutter，不由自主会说，太难了、门槛太高了、真要入门真是不容易！ 还有Flutter的层层嵌套真是恶心人！ 学习Flutter还要重新学习一门Dart语言！ 还有说原生不香吗，Flutter什么Flutter？（这也我无语了，我是要跨平台的，你还给说谁香不香，难道我不知道谁香吗？我们就是要跨平台你说怎么整吧？）；

• 我看了一本书<Flutter技术入门与实战>,前前后后看了两遍，知其大概、了解属性，组件相关用法、Dart语法等；
• 不定时翻阅官方文档、中文的，看组件用法、手动实践也想不起了再回来继续看；
• 写一个页面，哪怕只有一个按钮，只输出一个helloworld；
• 原生过来的，转变下思维、特别是布局，弹性盒子模型的思想和H5那里很像，还有一切都是组件。dart嵌套层次多也是事实，但可以对代码抽取再组件、调用也会很清爽；
• 不要被传说吓到，自己去试了才知道；

6、最后

写到最后，怎能不放代码？

GitHub：https://github.com/Light413/dctt_flutter

持续更新中，喜欢就关注我吧！有任何问题欢迎指导，十分感谢！