便宜VPS网Flutter开发--如何布局？
相对于iOS开发，Flutter的布局更具有灵活性，每个页面设计都不一样，相同页面可选择的布局方式也不一样，如果单纯的说应该如何去布局，我觉得不现实，大家可以参考下 Flutter官方的布局教程 。接下来，笔者，通过项目中的一个页面，来一步一步的拆解布局的流程。整个过程，基本上按照拆解、组件封装、具体布局这三步来的。
根据设计图，可以看出整体可以分成两部分，上面一部分是系统介绍模块，下面一部分是真正的登录内容，因为涉及到叠加，因此考虑用Stack；
系统介绍模块部分：整体也是涉及到叠加，考虑用Stack，分为四部分。最底部渐变色背景用一个contanier，无须指定位置，全视图扩展；载放logo图标在上一层，用Image。最后两个Text同级放在最上层。Image，Text各用Positioned包裹去指定位置。
登录内容模块是最外层是一个Contanier容器，去控制背景色和圆角。然后是一个Column元素，逐行排列。
第一行为Image，
第二行为Text，
第三行可以看成一个小Column，分两块进行布局
第四行可以看成一个小Column，分两块进行布局
第五行可以看作一个TextButton，
第六行可以看作一个Row，分三块进行布局
通过上面这样一步一步的分析后，基本上对大致的布局有了一个了解，最外层的控件大致选对（只要能实现的话，就是复杂度以及效率的问题），然后一步一步的拆解每一行的元素，如果有重复的或者觉得可以封装出来的部分，则进行下一步。
每一行的拆解，大致也是按照这个思路来进行，因此笔者在这里就不做讲解了。
在做到第三第四行的时候，发现这两个很相似，而且设计到一些交互逻辑，笔者就想对第三第四行的这种展示进行封装，觉得今后的布局可能会用到，因此在这一步，可以先把这一块儿抽离出一个控件。利用TextField来实现这种输入操作，具体的实现笔者不再详细的描述了。
经过这一步，整体的规划设计图已经有了，各个组件也都有了，接下来的工作就是组装了。
具体布局设计到一些细节的地方，例如整体Column的居中对齐（crossAxisAlignment）、间隔（Padding或Container包裹，笔者更喜欢用SizedBox占位）、居左居右居中（Align）、点击事件（GestureDetector）以及圆角（BorderRadius）等一些特殊情况。
像第六行row是放在底部的，就可以在第六行前面增加一个Spacer()去填充空白区域。
对文字颜色大小等，可以用TextStyle直接设置。
对于输入框的删除按钮，可以用Offstage这种Flutter特有的控制显示隐藏的控件。
Flutter混合开发实战
之前开发了一个纯Flutter的项目，结果接到个新的需求需要使用Flutter单独开一个模块集成到原有的android项目中
下面分享一下如何集成现有的项目和如何继承以及碰到的问题
1.首先第一步 修改gradle
因为 Flutter 当前仅支持为 x86_64，armeabi-v7a 和 arm64-v8a 构建预编（AOT）的库 所以我们需要修改gradle的文件限制 APK 中支持的架构，从而避免 libflutter.so找不到引起的崩溃
2.新建一个FlutterModel的工程
2.使用aar文件 因为所有工程统一使用jenkins打包所以我们放在本地肯定是不合适的
说以我们需要 打包aar并上传服务器
上传完成后在android中引用
在开发中遇到的问题
1.关于android和Ios中的跳转传参问题
这个问题在android端还是比较方便的 但是的在Ios端并不怎么好实现
最终决定使用flutter_boost来完成android和Ios与Flutter的通信操作
flutter_boost github地址：
集成文档：
集成文档给出了 但是没有android的 尴尬
下满分享下android的集成
（1）在flutter的 pubspec.yaml工程中添加
（2）修改android工程
使用本地工程的时候需要在工程共添加
使用aar的时候不需要添加
（3）在android工程中添加对应的条状路由配置
（4）在使用默认的flutter_boost启动界面的时候可能碰到状态栏丢失的情况
所以最好集成BoostFlutterActivity写一个新的activity方便处理状态栏和activity进出动画
（5）跳转并传参
//params 传多个参数可以使用json的形式
2.在flutter中的网络框架使用的dio结果在ios的弹出loading的时候出现卡顿现象
解决方式：1.服务换证书 （但是后台太忙暂时没有支持的人员）
2.ios使用原生的loading解决
3.在使用dio的时候出现ios部分手机 网络请求缓慢问题
解决方法：请求的时候使用http 2.0协议
插件地址：
4. VS Code创建flutter项目
如果和我一样，用惯了VS Code来开发项目的话，那就跟我一起来配置一下如何在VS Code里运行flutter项目。
1.在VS Code里安装扩展：
2.在VScode上打开打开终端，快捷键：Ctrl+~（Tab上一个键），在终端上输入：flutter create flutter_app02，即可创建完成！
也可以把之前的项目放到工作区
3.在终端中运行命令：flutter run
运行的时候你会发现手机提示你安装个app，点击安装完成，项目就在手机上显示了，下图是运行成功的提示。
下图是手机效果：
如果报错的话，运行下清缓存的命令：flutter clean，把文件夹.gradle删掉，然后flutter run重新跑下项目。
