从零开始上架 FlutterAPP（一）

从零开始发布 APP系列第一期

起因

开发岗位做久了估计都会萌生自己开发一款应用的想法，其实很久之前就有冲动了，只是一直没有好的想法，不知道做什么类型的应用，开发计划也就一直搁置了。最近一段时间压力比较大，停下来就容易胡思乱想，于是就先动起来吧。这个系列主要是记录开发过程碰到的问题以及进度记录，大佬们有好的点子可以指导一下，我加到项目里边去。

效果

1. 自定义tabbar切换有放大效果

2. tabbar 整体添加滑动隐藏显示（实际效果并不好，跟系统的工具条和手势容易冲突，后面考虑固定）

   
   
   tabbar.gif

进度

1. 实现自定义 tabbar
2. 个人中心界面框架

下一步

1. 个人中心背景图使用相册图片
2. 编辑个人资料（姓名，标签）
3. 使用 sqlite 保存用户信息

知识点

1. 自定义 tabbar 关键是IndexedStack组件，用来切换 page

IndexedStack(
            index: currentIndex,
            children: [
              Container(
                color: Colors.white,
              ),
              Container(
                color: Colors.green,
              ),
              Container(
                color: Colors.yellow,
              ),
              const UserMain(),
            ],
          ),

2. 动画效果主要使用了动画组件AnimatedScale，AnimatedContainer，位移组件Transform

AnimatedContainer(
                curve: Curves.easeOutCubic,
                color: $styles.colors.accent1,
                duration: const Duration(milliseconds: 200),
                height: 3,
                width: widget.selected ? 30 : 0,
              ),

3. 枚举enum的学习，不太会用记录一下，后面继续学习
   dart2.17枚举增加新特性，支持成员变量 用法参考官网

enum UserFunction {
  collect(UserFunctionModel('我的收藏', RoutesApi.collect, IconType.collect)),
  abount(UserFunctionModel('关于', RoutesApi.abount, IconType.abount));

  final UserFunctionModel model;
  const UserFunction(this.model);

  String title() => model.title;
  String router() => model.router;
  Icon icon() => model.iconType.icon();
}

///使用
List list = [UserFunction.collect, UserFunction.abount];