Fluter模仿小宇宙播客app实战

🪐小宇宙 Flutter

大家好，我正在学习Flutter，并用它模仿小宇宙App写了几个页面。希望对想学习Flutter的前端开发者，有所帮助。

🌱目标

• ✅登录页
• ✅首页
• ✅播放页面 (可播放)
• ✅详情页面
• ❌开屏页面
• ❌优化（在学学看）
• ❌其他页（都是无脑滚键盘了，和上面页面差距不大，看请况吧😂😂😂）
• ❌10个Star⭐（2/10）
  
  

🌳完成页面

🌻学习参考

• Flutter 官网 英语好的，看官方最好。

• 老孟 Flutter 英语不好，可以看这个 主要快速查询方便。

• 👍👍👍FlutterUnit flutter组件效果预览App 主页有下载地址，非常推荐初学者安装，没事打开滑一滑。

• 王叔不秃Flutter教程 需要有点基础看,应该是b站最好的flutter教学。

• Flutter GetX使用—简洁的魅力！

• Flutter之GetX依赖注入Bindings使用详解

工具

• 脚手架 注意阅读Readme
• vscode 插件 脚手架作者写的，用于快速创建页面
• json数据格式化Map网站

总结&开发感受

我一直从事小公司的前端开发，唯一接触到App方面的就是uniapp。由于uniapp的性能和交互效果难以实现等问题，所以我尝试学习Flutter。显然，Flutter并没有想象中那么难，但也不是完美无缺的。注意，我的水平确实十分有限，因此我的言论可能不够准确。

1. Flutter可以被视为类似于Unity这样的工具，可以在一个"画布"上绘制组件（Flutter Web 就是用一个Canvas来实现的）。因此，它能够真正实现多端样式统一，不像React Native需要将组件转换为各自平台的组件。
2. 很多人说Flutter存在多层嵌套的问题，其实只要合理地分层，问题不大。
3. Flutter的设计理念是基于Widget的，包括Container、Row（相当于flex布局的display: flex; flex-direction: row;）、Column（相当于flex布局的display: flex; flex-direction: column;）甚至padding和手势事件都是组件。
4. Flutter生态系统类似于npm，而且提供了很多有用的组件库pub.dev。
5. 性能确实在 build的写法下渲染1W条都不会卡顿，但是它并没有我想象的那么完美，还是能感觉出来卡顿的。
6. 这玩意真有人公司用吗？ 这个问题困扰了我很久，也是我一开始学习Flutter时的主要考虑因素。但事实证明，确实有许多大公司在移动端应用Flutter，例如B站漫画。我在体验时发现，应用非常流畅，但也有一些App卡的不行。具体看这个国内大厂应用在移动端 Flutter 框架使用分析
7. 怎么看哪些页面是flutter?三个手指在屏幕上滑就知道了。 ps:掘金ios版发现页面应该是flutter，一下就能感觉出来。
8. 开发App时怎么选？说实话我感觉小公司的大部分业务都不复杂，uniapp可太舒服了，vue谁不会。小程序也能直接转换，直接一套脸滚键盘带走完事。但是如果对App有点交互要求啊性能要求啊，写过uniapp的大家应该感受过，当ui拿着别的原生App交互让你实现时，你是会崩溃的😭😭😭。但是这也不是说就无脑上flutter如果就一两个页面，那nvue也能顶！！！
9. Flutter并不是完美无缺的，但是它的确非常强大，能够实现许多炫酷的交互效果和样式。😁😁
10. 看🦅酱直播去了🐾🐾🐾本项目地址