Files
flutter_first_station/README.md
2023-05-21 07:43:59 +08:00

59 lines
5.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
#### 二、 教程的五大模块
本教程共 26 章,分为如下 5 大模块:
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c19207a2915490c87cddb2feab905a0~tplv-k3u1fbpfcp-watermark.image?)
##### 1.Flutter 基础
第一个模块是 Flutter 最基础的前置知识准备阶段包括环境搭建、Dart 基础语法介绍、计数器项目解读个三部分。如果已经开发过 Flutter 项目的朋友,可以选择跳过本模块,也可以温故知新。
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cda7253672764c65b33dcec2c244a76e~tplv-k3u1fbpfcp-watermark.image?)
***
##### 2. 猜数字模块
第二个模块是猜数字项目,这是我设计的一个比较简单有趣的小案例,生成随机数后,在头部输入框猜数字。其中包含着 Flutter 最基础的知识点,比如基础组件的使用、界面的布局、逻辑的控制、动画的使用等。麻雀虽小五脏俱全,非常适合新手学习。
| 生成随机数 | 输入比较 |
| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3fb791611b044facabbfc69bc8ed3f79~tplv-k3u1fbpfcp-watermark.image?) | ![129.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15503ee18d1946359dcf4be53d8563df~tplv-k3u1fbpfcp-watermark.image?) |
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7acb95e32bd44cd999e2205ae029328c~tplv-k3u1fbpfcp-watermark.image?)
***
##### 3.电子木鱼模块
第三个模块是电子木鱼项目,也是一个比较简单有趣的小案例,最主要的功能是点击图片发出木鱼的音效。另外支持功德记录的查看,以及音效、图片的选择。其中包含也着 Flutter 很多的知识点,比如基础组件的使用、状态类生命周期回调、依赖库的使用、本地资源配置等。
| 点击木鱼 | 查看功德记录 |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| ![130.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76fd6dd91fdc4255be22777c84d8998e~tplv-k3u1fbpfcp-watermark.image?) | ![133.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f0d286937b1447a8009b784b49ca450~tplv-k3u1fbpfcp-watermark.image?) |
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/23a1c93ea6c945d2a47c0978791f7eb4~tplv-k3u1fbpfcp-watermark.image?)
***
##### 4.白板绘制模块
第四个模块是白板绘制项目,用户可以通过手势交互在界面上绘制线条,交互性很强,也非常有趣;支持线颜色和线宽的选择,并可以回退上一步和撤销回退。其中包含也着 Flutter 很多的知识点,比如绘制的使用、手势监听器的使用、组件封装等。
| 画板绘制 | 回退和撤销 |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| ![135.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/901f7e741b884cdda85119939d6a910f~tplv-k3u1fbpfcp-watermark.image?) | ![136.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a79da0208534aa8b7d68ab9748b78ff~tplv-k3u1fbpfcp-watermark.image?) |
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28b24ba45a504c36b441fcbd5f8e9c59~tplv-k3u1fbpfcp-watermark.image?)
***
##### 5.项目整合
最后一部分将介绍如何将之前的一个个孤零零的界面,通过导航结构整合为一个项目。并了解如何在切换界面时,保活状态数据。这部分还会介绍数据的持久化存储,这样用户的选择项和一些记录数据就可以存储到本地,不会随着应用的退出而重置。最后,会介绍对网络数据的访问,完成下面文章展示页的小案例:
| 下拉刷新 | 加载更多 |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| ![124.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1633c8b3c7c24709af211241159a2876~tplv-k3u1fbpfcp-watermark.image?) | ![123.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f6fbf14080345ab90fef84fb343d579~tplv-k3u1fbpfcp-watermark.image?) |
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92ff32c7b25748e1828c2e7985565582~tplv-k3u1fbpfcp-watermark.image?)