Flutter 小案例
这是一个基于 Flutter 的跨平台(iOS/Android)移动应用小案例，包含了一些基础 Widget、provider、stream 等的使用案例和一个完整的 MVVM 开发模式图片分享APP 。
移步 点击观看Demo演示视频
移步 点击观看Image App(MVVM Demo)演示视频
Tip: Image App 可以使用登录账户信息： 任意一个作者名字，密码都是：666666，如：
| 用户名 | 密码 |
|---|---|
| persilee | 密码：666666 |
| 摄影师蝈蝈小姐 | 密码：666666 |
| 翠花小拍 | 密码：666666 |
或者，扫描二维码下载体验(android)：flutterCase.apk ，iOS请自行运行代码体验效果
案例列表
基础小部件的使用，如下
| 序号 | 案例(Base Widget Demo) |
|---|---|
| 1 | FloatingActionButtonDemo |
| 2 | ButtonDemo |
| 3 | PopupMenuButtonDemo |
| 4 | SimpleDialogDemo |
| 5 | AlertDialogDemo |
| 6 | BottomSheetDemo |
| 7 | SnackBarDemo |
| 8 | ExpansionPanelDemo |
| 9 | ChipDemo |
| 10 | DataTableDemo |
| 11 | PaginatedDataTableDemo |
| 12 | StepperDemo |
| 13 | GridViewExtentDemo |
| 14 | GridViewCountDemo |
| 15 | LayoutDemo |
| 16 | SliverDemo |
| 17 | ListViewDemo |
| 18 | CardDemo |
| 19 | NavigatorDemo |
| 20 | FormsDemo |
| 21 | TabBarView |
| 22 | DrawerDemo |
provider 的使用，如下
| 序号 | 案例(provider🍷riverpod) |
|---|---|
| 1 | ProviderCounterDemo 跨页面状态共享 |
| 2 | ProviderGoodsListDemo 使用 Selector 更新局部（小范围）状态 |
| 3 | RiverPodDemo 使用 RiverPod 更优雅的管理state |
futureBuilder 、 streamBuilder 的使用，如下
| 序号 | 案例(stream) |
|---|---|
| 1 | BaseStatefulDemo 基本的有状态 Widget 的使用 |
| 2 | FutureBuilderDemo futureBuilder 的使用 |
| 3 | StreamBuilderDemo streamBuilder 的使用且拆分UI和逻辑代码，更符合规范代码 |
flutter flare 的使用，如下
| 序号 | 案例(flare) |
|---|---|
| 1 | FlareSignInDemo 有趣的登录交互动画 |
| 2 | FlareButtonDemo 按钮动画 |
| 3 | FlareSidebarMenuDemo 有趣的边栏动画 |
flutter MVVM 开发模式，如下
| 序号 | 案例 |
|---|---|
| 1 | Http 模块 使用 Dio 和 retrofit 封装的网络请求模块 |
| 2 | Model 数据模块 rest api 请求json的序列化 |
| 3 | View 模块 展示的页面UI |
| 4 | ViewModel VM模块 处理页面数据、状态以及业务逻辑等 |
| 5 | Utils 一些工具类 |
| 6 | Widgets 公共的组件和自定义组件等 |
更新日志
- 2021-02-23 23:26 新增 riverpod、Retrofit MVVM 开发模式 案例
- 2021-01-14 09:22 新增 riverpod 案例、provider 更新成 riverpod
- 2021-01-14 00:36 修复图片链接丢失问题及升级flutter sdk的代码问题
- 2020-07-04 00:46 发布 release v1.0.1 版
- 2020-06-30 14:26 新增 flutter flare 动画交互案例
- 2020-06-28 09:56 发布 release v1.0.0 版
- 2020-06-28 08:44 新增 My Page 案例
- 2020-06-28 07:15 新增 futureBuilder 、 streamBuilder 的使用案例
- 2020-06-27 02:15 新增 provider 的使用案例
- 2020-06-26 23:56 调整整体目录结构
相关
如想了解更多关于 Flutter 信息，请关注我的博客文章