这段时间用flutter做了一个苹果AppMusic的首页的静态页面（玩玩而已），谈一谈想法思路以及过程中遇到的坑，顺便还有个小问题想请教下flutter的前辈。

说在前面的一些话

同行皆说flutter学习门槛高，我寻思不都是看文档写代码，有什么难的？且待我写个demo一探究竟。

装环境

首先大家主流的手机端开发应该都是用的Android Studio，但由于我习惯了vscode，加之电脑内存小，Android Studio跑起来都费劲别说开发了，所以我选择了用vscode写flutter，后来在官网以及一些文章的指导下，终于把这个鬼环境给装好了。 成果：

我暂时也就初学，主要学个dart语法，学个flutter的布局，所以没必要真机测试或者部署上线，环境装到这里就够用了，可以本地创建一个flutter项目然后F5跑起来到chrome浏览器中看效果。

设计稿

很随意，我就手机截了张图

效果

布局

一行一行来吧，做着玩的也不用设计什么东西了

黄色框框就是按照从上到下依次排列布局，橙色的是定位到底部的，可以理解为css中的相对于页面绝对定位，在最上层

主要代码

虽然叠起来了，还是能看个大概的吧。源码贴在文末~

遇到的一些问题及解决方案

1. ListView中使用Positioned盒子定位失效，后翻看文档之后方知Positioned要配合Stack盒子使用，把它和ListView一起包起来就可以了；
2. 底部的bottomNavigationBar中按钮数量超过三个后它的backgroundColor属性就失效了，后经查使用Theme包一层，里面设置canvasColor可以生效。

遗留问题

如何让bottomNavigationBar背景像上面播放控制器条一样模糊透明？

源码

github.com/Mapotato-Ma…

写过flutter的大佬可以谈谈感受，交流一下~