开头必须是项目地址

写在项目地址之后的开头

首先感谢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、其他任何好的建议，毕竟我听不进去坏话

结尾

结尾必须是项目地址

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