This commit is contained in:
toly
2023-05-21 07:43:59 +08:00
parent 9492fde1a0
commit dbcd06bdd5

View File

@@ -1,16 +1,59 @@
# flutter_first_station
#### 二、 教程的五大模块
A new Flutter project.
本教程共 26 章,分为如下 5 大模块:
## Getting Started
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c19207a2915490c87cddb2feab905a0~tplv-k3u1fbpfcp-watermark.image?)
This project is a starting point for a Flutter application.
##### 1.Flutter 基础
A few resources to get you started if this is your first Flutter project:
第一个模块是 Flutter 最基础的前置知识准备阶段包括环境搭建、Dart 基础语法介绍、计数器项目解读个三部分。如果已经开发过 Flutter 项目的朋友,可以选择跳过本模块,也可以温故知新。
- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cda7253672764c65b33dcec2c244a76e~tplv-k3u1fbpfcp-watermark.image?)
For help getting started with Flutter development, view the
[online documentation](https://docs.flutter.dev/), which offers tutorials,
samples, guidance on mobile development, and a full API reference.
***
##### 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?)