从零开始,一起学习开发个 Flutter App 吧

简介: 从零开发一个App的方式,并把整个过程梳理成一个 Flutter 的实战教程。

大家好,我是叶大侠,一名独立开发者。

在用 Flutter 开发了一个简单的外包应用之后,热重载的体验实在太棒,觉得是时候把这项跨平台技术系统学习一下了。

我打算通过从零开发一个App的方式,在这个过程中遇到不懂的再去学习和琢磨,用输出来倒逼输入。

我会把整个过程梳理成一个 Flutter 的实战教程,你可以从中学习到开发一个 App 的全部知识脉络。并且我会针对一些概念和知识难点深入剖析,尽可能深入浅出,用大家能看的懂的语言表达出来。

另外,我会把制作这个 App 过程中用到的素材,包括原型稿、设计稿、和客户端源代码开源出来,纸上得来终觉浅,你可以去下载、运行、调试和改动代码,这样可以帮助你真正掌握。

这是个什么App?

这个 App 可以理解为是C大调音乐网的客户端产品,这个网站也是我独立开发的,所以也可以认为教程也是顺路一起做的咯。

App主要包含四个模块:

App主模块

音乐课程

  • 课程类型有录播课程和专栏课程,按照不同的乐器类型进行分类。
  • 用户可以在 App 进行购买、观看课程视频和文章。
  • 老师和用户可以在每节课下面进行留言和回复。

音乐老师

  • 按地理位置给用户推荐入驻音乐老师。
  • 用户可以查看老师的资历、演奏视频等。

音乐曲谱

  • 用户可以搜索、收藏曲谱和谱集。

音乐视频

  • 投稿视频展示,用户可以进行评论、点赞和分享。

你会学到哪些东西?

  • Dart 语言
  • Flutter UI 框架
  • Http网络请求
  • 本地存储
  • pub常用库的使用
  • 微信登录和支付、消息推送、统计等第三方服务集成
  • 常用工具、应用调试和性能优化
  • 应用构建和上架

如何开展?

为了更加方便国内小伙伴,我会把相关的源码托管到码云上,大家可以通过issue来开展讨论和学习。

教程将会使用 markdown 来编写,在知乎、公众号和我们的团队博客上,以连载的方式同步发布,欢迎大家进行订阅和关注,跟着一步一步学习。

写在最后

为什么做这个?

  1. 希望更多人知道 AgileStudio,没钱撒广告哈,只能靠勤劳的双手啦哈哈哈~
  2. 学习和熟悉Flutter~
  3. 又顺便把C大调的客户端做了,完美!

一举多赢,所以大家不用担心我会弃坑,我给自己定的deadline是明年6月,希望到时候能把自己挖的坑填完。

划重点!这个项目是要上线应用市场的,仅供学习,不可以商用哦!

另外目前是自由职业状态,所以除了做这个事情,还要想办法恰饭,所以内容是不定期更新的。

最后由于笔者水平有限,所以在输出过程中难免会出现一些错误,请大家一定要不吝指正。

感谢你的关注。

关于AgileStudio

我们是一支由资深独立开发者和设计师组成的团队,成员均有扎实的技术实力和多年的产品设计开发经验,提供可信赖的软件定制服务。

相关文章
|
13天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
193 7
|
13天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
222 1
|
1天前
|
存储 缓存 JavaScript
Flutter 学习之封装 WebView
【10月更文挑战第24天】通过以上的探讨,我们可以看出,在 Flutter 中封装 WebView 是非常有必要的,它可以提高代码的复用性、增强可维护性、提供统一接口。在实际应用中,我们需要根据具体的需求和场景,选择合适的封装方法和技术,以实现更好的效果。
|
13天前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
35 9
|
13天前
|
开发者
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter混合开发支持两种模式:1) 基于har包,便于主项目开发者无需关心Flutter细节,但不支持热重载;2) 基于源码依赖,利于代码维护与热重载,需配置Flutter环境。项目结构包括AppScope、flutter_module等目录,适用于不同开发需求。
39 3
|
5天前
|
NoSQL PHP Redis
布谷语音app源码服务器环境配置及技术开发语言
布谷语音app源码服务器环境配置及技术语言研发。。
|
13天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
127 0
|
13天前
|
编解码 Dart API
鸿蒙Flutter实战:06-使用ArkTs开发Flutter鸿蒙插件
本文介绍了如何开发一个 Flutter 鸿蒙插件,实现 Flutter 与鸿蒙的混合开发及双端消息通信。通过定义 `MethodChannel` 实现 Flutter 侧的 token 存取方法,并在鸿蒙侧编写 `EntryAbility` 和 `ForestPlugin`,使用鸿蒙的首选项 API 完成数据的读写操作。文章还提供了注意事项和参考资料,帮助开发者更好地理解和实现这一过程。
43 0
|
13天前
|
Dart Android开发
鸿蒙Flutter实战:03-鸿蒙Flutter开发中集成Webview
本文介绍了在OpenHarmony平台上集成WebView的两种方法:一是使用第三方库`flutter_inappwebview`,通过配置pubspec.lock文件实现;二是编写原生ArkTS代码,自定义PlatformView,涉及创建入口能力、注册视图工厂、处理方法调用及页面构建等步骤。
26 0
|
17天前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
201 0