Flutter + Riverpod 仿写了flutter_deer

·  阅读 1420

开头必须是项目地址

写在项目地址之后的开头

首先感谢flutter_deer提供的UI图,让我有个可以练手的项目。原项目相信应该有很多大佬都有所耳闻,毕竟6.4k的star。所以这里直接说明和原项目有哪些不同吧,这样也让有需要的同学有选择的放弃继续阅读。因为没有认识的flutter开发大佬,写这篇文章就是想和路过的大佬们一起探讨学习

1使用riverpod只是学习了官方demo,在项目中的使用方式不知道是否合适,有不足的地方,欢迎大佬指正

2因为是学习flutter的第一个项目,所以更多的是关注UI实现Widget的使用所以没有原项目的主题切换语言切换没有PC端适配等

3为了熟悉绘图和动画能绘制的都尽量自己绘制还原,还没学习绘图的 可以看下

4没有接入dio,但是尽量还原真实开发项目的要求,具体的细节可以和flutter_deer对比

5跳过了一些重复或者样式简单的页面
复制代码

先来几个效果图

绘图列表
图表列表
商品弹窗
商品弹窗
假装店铺需要登录Curves效果
登录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、其他任何好的建议,毕竟我听不进去坏话
复制代码

结尾

结尾必须是项目地址

感谢 唯鹿 大佬的开源,有设计图就很舒服。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改