Flutter 仿AppMusic首页(只是静态页面)

这段时间用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的大佬可以谈谈感受,交流一下~

相关推荐
m0_7482412321 分钟前
ElasticPDF-新国产 PDF 编辑器开发框架(基于 pdf.js Web PDF批注开发,实现高亮多边形橡皮擦历史记录保存注释文字)
前端·pdf·编辑器
huapiaoy34 分钟前
JavaSE---String(含一些源码)
java·linux·前端
rkmhr_sef35 分钟前
frp内网穿透云服务器。云服务器映射多个家庭局域网内网端口。家庭Windows主机内网运行多个web程序
服务器·前端·windows
带多刺的玫瑰35 分钟前
Leecode刷题C语言之考场就座
c语言·前端·javascript
麦子爱种地37 分钟前
前端学习DAY26(华为平板页面)
服务器·前端·javascript
m0_7482480242 分钟前
HTML5前端实现毛玻璃效果的可拖拽登录框
前端·html·html5
Loong_DQX1 小时前
【前端js】 indexedDB Nosql的使用方法
前端·javascript·nosql·indexeddb
╰つ゛木槿1 小时前
Spring Boot与Django对比:哪个更适合做为Web服务器框架?
前端·spring boot·django
爱笑的眼睛111 小时前
浅谈 前端验证码那些事
前端·程序人生
Kika写代码1 小时前
【微信小程序】2|轮播图 | 我的咖啡店-综合实训
前端·微信小程序·小程序