Flutter + Riverpod 仿写了flutter_deer
开头必须是项目地址
写在项目地址之后的开头
首先感谢flutter_deer提供的UI图,让我有个可以练手的项目。原项目相信应该有很多大佬都有所耳闻,毕竟6.4k的star。所以这里直接说明和原项目有哪些不同
吧,这样也让有需要的同学有选择的放弃继续阅读。因为没有认识的flutter开发大佬,写这篇文章就是想和路过的大佬们一起探讨学习
。
1、使用riverpod。只是学习了官方demo,在项目中的使用方式不知道是否合适,有不足的地方,欢迎大佬指正
2、因为是学习flutter的第一个项目,所以更多的是关注UI实现、Widget的使用。所以没有原项目的主题切换、语言切换、没有PC端适配等。
3、为了熟悉绘图和动画。能绘制的都尽量自己绘制还原,还没学习绘图的 可以看下
4、没有接入dio,但是尽量还原真实开发项目的要求,具体的细节可以和flutter_deer对比
5、跳过了一些重复或者样式简单的页面
先来几个效果图
绘图 | 列表 |
---|---|
商品 | 弹窗 |
假装店铺需要登录 | Curves效果 |
产出
flutter_table_list_view
flutter_deer中,地区选择使用了azlistview,账户流水类似页面是用了sticky_headers, 作为ios开发,使用惯了UITableView就感觉缺少点什么。所以就基于scrollable_positioned_list封装了flutter_table_list_view来还原ios开发中的体验。具体效果可以看上方列表展示, 主要参数看下方
/// 返回section个数
final int Function() sectionCount;
/// 返回每个section中的cell个数
final int Function(int) rowCount;
/// 提供刷新、滚动
final FlutterTableViewController controller;
/// 类比ios UITableView
/// plain : header不悬停
/// grouped: header悬停
final FlutterTableViewStyle style;
/// cell构造器
final TableViewItemBuilder itemBuilder;
/// 提供header
final TableViewHeaderBuilder? headerBuilder;
/// 提供footer
final TableViewFooterBuilder? footerBuilder;
/// 点击cell
final TableViewItemSelectedHandler? onSelectedItem;
/// 点击头
final TableReusableViewSelectedHandler? onSelectedHeader;
/// 点击footer
final TableReusableViewSelectedHandler? onSelectedFooter;
flutter_easy_segment
flutter的TabBar
很好,作为初恋她给了我很多。但是... 我想给她换身「衣服」确实不太方便。所以还是选择自己动手实现了 flutter_easy_segment, 指示器和单个Tab支持自定义,当然也提供了最基础的样式, 使用效果看上方图例,代码示例,可以再项目中找到。
打个广告
:ios原生需要这种效果
,欢迎使用EasyKits,当然它不是只有这个。
EasySegment(
controller: segmentController,
space: 15,
padding: const EdgeInsets.only(left: 15, right: 15),
onTap: (index) {
pageController.jumpToPage(index);
},
indicators: const [
/// 固定宽度无动画
CustomSegmentLineIndicator(
color: Colours.appMain,
width: 40,
bottom: 2,
height: 3,
animation: false,
),
/// 固定宽度有动画
CustomSegmentLineIndicator(
color: Colours.red,
width: 40,
bottom: 7,
height: 3,
animation: true,
),
/// 动态宽度(和item保持宽度一致) 有动画
CustomSegmentLineIndicator(
color: Colors.yellow,
top: 0,
height: 3,
animation: true,
),
/// 动态宽度(和item保持宽度一致) 无动画
CustomSegmentLineIndicator(
color: Colors.green,
top: 5,
height: 3,
animation: false,
),
],
children: items
.map((item) => CustomSegmentText(
key: ValueKey(item.title),
content: item.title,
height: 50,
normalStyle: const TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.normal),
selectedStyle: const TextStyle(
color: Colours.appMain,
fontSize: 18,
fontWeight: FontWeight.bold,
),
))
.toList(),
);
以上的两个package也已经上传到pub,他们出生在学习开发flutter的第一个项目,还没用于生产环境。 我尽量自己再多测试、优化一下。
Help
留言告诉我,我要学
1、还在看Sliver源码的过程中,东西有点多。所以告诉我你们偷学Sliver时的学习资料
最好自己实现简单Sliver的详细解读
2、详细的性能测试资料,这个我还在看
3、其他任何好的建议,毕竟我听不进去坏话
结尾
结尾必须是项目地址
感谢 唯鹿 大佬的开源,有设计图就很舒服。
转载自:https://juejin.cn/post/7138248802770616357