/flutter_pro

跨端(iOS/Android)移动应用小案例

Primary LanguageDart

Flutter

Flutter 小案例

author blog

这是一个基于 Flutter 的跨平台(iOS/Android)移动应用小案例,包含了一些基础 Widgetproviderstream 等的使用案例和一个完整的 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

futureBuilderstreamBuilder 的使用,如下

序号 案例(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 新增 futureBuilderstreamBuilder 的使用案例
  • 2020-06-27 02:15 新增 provider 的使用案例
  • 2020-06-26 23:56 调整整体目录结构

相关

如想了解更多关于 Flutter 信息,请关注我的博客文章

序号 文章
1 Flutter 初识
2 Flutter 环境搭建
3 Flutter 初体验(实战)
4 Flutter 10天高仿大厂App及小技巧积累总结(实战)
5 Flutter Android 混合开发高仿大厂App(实战)
6 Flutter FutureBuilder and StreamBuilder 优雅的构建高质量项目
7 Flutter (Flare) 最有趣用户交互动画没有之一
7 Flutter 使用 Riverpod+Retrofit 构建MVVM开发模式