Flutter 仿最美拍照APP

项目git地址
扣人像更换背景部分没做了，但是实现也简单，可以通过调用face+提供的免api实现，项目中已经加入了http和实现了一个bloc拉取数据的例子。
最近公司部门项目分出一个小组使用flutter，已经势在必行，看了下flutter官网的例子，莫名感到焦虑，趁着五一突击学习了下，做了个demo，上传到了git。

有点编程基础入门应该是不难的，主要是耐下心认真看完官网一些教程。做完后，就这个项目中遇到的问题个人总结下，可能也不对。

一：官网在sdk方面做的还不是完善的，就拿我这个首页gridview来说，默认不会根据item高度适配，是等宽高的，也就是说，当一列显示的子类越多，宽度会被压缩，高度也会变短，目前好像只能通过 childAspectRatio 宽高比来设置，算好比例后在一些机型上也会有些出入。具体可能根flutter适配方案有关系。

二：自定义拍照功能，flutter 本身没有直接实现 通过插件 camera 做的，只支持最小sdk21，模拟器上调试一直报缺少方法（method channel）,估计可能真机才可以用，或者我哪一步做错了，后面看了下别人总结，通过在android，ios端编写代码做成plugin以widget形式供flutter调用来突破版本限制问题，据官网介绍原生plugin在flutter中不能热刷新，但总还是有办法能解决问题的

后面改成调用系统拍照，相册选择了，模拟器上选取相册很卡顿，真机就没测试了。

三：整个Demo中唯一遇到点小问题的就是在将button定位到底部，以及button设置撑满屏幕遇到点问题，后面通过Expand 这个控件解决了,主要还是不熟的问题。代码如下：

    return Expanded(
        child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.end,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        //your elements here
        Row(
          children: <Widget>[
            Expanded(
              child:....;
                  },
                 ...,
            ),
          ],
        ),
        ...
  ....
      ],
    ));

四：使用dart编写过程中，看着重重的嵌套，本来有点抵触，但是学习的过程还是挺舒服，可能就在昨天插件又更新了，看起来舒服多了，所以官方一直在致力改善中。另外通过将一个个子widget抽成对象或者方法也可以减少嵌套，不然在后期调整或者review的时候真心心累。

image.png

五：刚从android 到flutter 上来各种不适应，为什么要用代码编写布局，但是自从写完下面的布局感觉flutter 好多了

image.png

以前android要写这种布局，可能要在xml中写很多这种代码，

<LinearLayout><TextView/> <TextView/></LinearLayout>
<LinearLayout><TextView/> <TextView/></LinearLayout>
..
...

但是flutter只要

TextItem("像素大小", "${homeMenu.dec}"),
TextItem("纸质照片尺寸", "25x35mm"),
TextItem("照片格式", "jpg"),
ColorItme("背景色", null),

TextItem.dart

class TextItem extends StatelessWidget {
  String title;
  String dec;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
      child: Row(
        children: <Widget>[
          Expanded(
            child: Text(
              '$title',
              style: TextStyle(color: Colors.black87, fontSize: 14),
            ),
          ),
          Expanded(
            flex: 1,
            child: Text(
              '$dec',
              style: TextStyle(color: Colors.black87, fontSize: 14),
            ),
          )
        ],
      ),
    );
  }

  TextItem(this.title, this.dec);
}

当然android也能这么做，但是还要同时修改xml布局文件.

六：添加activity 不需要修改清单文件

总的总结下来，好像原生能干的flutter 都能做，一些flutter没有的可以通过plugin来做桥接，但是flutter能做到跨平台，并且性能和动画方面表现良好，
除了不能和ract native ，weex 一样实现动态化以外。现在app store 平台好像也在打击动态化，具体不是很清楚。

就目前来看除了一些基础设施不是太完善，不能动态化外，一些页面似乎完全可以使用flutter来替代了，原生er要不要颤抖。。。

image.png
image.png
image.png