Flutter开发--如何布局？

相对于iOS开发，Flutter的布局更具有灵活性，每个页面设计都不一样，相同页面可选择的布局方式也不一样，如果单纯的说应该如何去布局，我觉得不现实，大家可以参考下 Flutter官方的布局教程 。接下来，笔者，通过项目中的一个页面，来一步一步的拆解布局的流程。整个过程，基本上按照拆解、组件封装、具体布局这三步来的。

成都创新互联主要从事成都网站制作、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务孟村,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

根据设计图，可以看出整体可以分成两部分，上面一部分是系统介绍模块，下面一部分是真正的登录内容，因为涉及到叠加，因此考虑用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之旅 02 - 创建第一个项目

Flutter项目可以用三种方式开发：

可以根据自己的需求选择，由于之前一直做iOS开发，也做过RN项目开发，Mac上装过Android Studio 和 其他安卓模拟器 Genymotion ，所以我选择Android Studio开发工具，之前装的版本 3.0.1 比较老了，所以进行了升级 3.4 。

体验Flutter

PS：第一次创建项目可以成功，之后再执行这一步操作创建新的Flutter项目时，一直卡住，重启过很多次Android Studio一直都是这样，后面查询资料，发现自己没有同意使用 android-licenses ，可以通过下列命令验证，第一步，先验证：

第一步检测结果，发现是需要同意 android-licenses ：

第二步执行同意命令，操作时会有很多个 android-licenses 需要同意：

第二步检测结果：

第三步再次验证，当得到以下截图中结果时，代表所有环境配置已经完成：

上述命令创建一个Flutter项目，项目名为 myapp ，在项目目录中，有安卓和iOS两个项目目录。

Android Studio中会列出所有已经连接了电脑的设备，包括安卓和iPhone。如果想在模拟器上运行，下面可以选择对应的模拟器，如图：

PS：如果想在模拟器上运行，需要先安装一个模拟器，选择Tools AVD Manager，如图：

然后选择Create Virtual Device，根据提示一步一步操作即可（建议翻墙条件下操作），添加完成后就可以在这个界面看到自己已经添加的模拟器，点击绿色的运行按钮，即可打开该模拟器：

新建一个flutter项目，可以在ios上运行，四步搞定！

1. 建立一个flutter项目的命令

2. 在ios文件夹下，生成pods文件夹

3. Xcode环境签名设置；

把错误的版本删除再添加，可解决签名错误问题；必须先删除再添加，直接修改可能不起作用。团队开发，必须使用团队的签名。

4.运行创建的flutter项目；

选择真机、模拟机，点击运行按钮，或使用命令运行：

下面两步是赠送的：

5.新加一款插件，所涉及的命令；

ios 端所涉及的命令

6. 刚更新的插件和已有的插件有冲突怎么办？

可以试一试以下步骤：

Flutter初学 —— 常用控件使用

在编写几个 Flutter 项目后，发现 Flutter 的强大之处在于业务中所有用到的控件以及场景都有对应的处理方案；而 Dart 语言也与 Java 、 Kotlin 类似，所以对 Android 开发者来说门槛非常低；特意记录一下常用的控件及其使用：

StatelessWidget 不需要额外的创建 State

StatefulWidget 创建 State 类，并可以在其中保存一些状态

only 可以单独设置每个方向的内边距

类似于 LinearLayout 中的 orientation 设置为 vertical ， mainAxisAlignment 表示竖向的一个对齐方式， crossAxisAlignment 表示横向的对齐方式

与 Column 相反，主轴是横向，对齐方式类似， crossAxisAlignment 表示竖向的对齐方式

类似 SizedBox ，一个容器，但是主要功能是有一个 decoration —— 装饰器，作用是绘制背景，或者使用 item 中的阴影

栈，先入后出，类似于 Android 上的 FrameLayout

通常配合 Stack 使用，固定显示在某一个位置

配合多 child 使用，会填充剩余的空间

Image 功能强大，使用不同的方法可以加载不同来源的图片

看到这些方法，突然觉得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形状的图片，无论是圆形还是五角星都不在话下，然而 Android 要实现不规则的形状，可是要下不少功夫的。

名字和 Android 的一模一样，但是用法却比 Android 的简单很多：

主要就是 itemCount 与 itemBuilder ,其余就是配置样式， itemBuilder 需要返回一个 widget ，当然了，每个 ListView 都有其对应的 item ，在里面的方法中编写 widget 即可

与 ListView 类似，但是需要有一个 delegate 类，作用是设置有多少列，每一列之间的间距是多少

GridView 没有 build ， children 表示所有的子 view

最常用的控件之一，有非常多的样式， Flutter 中通常是使用装饰器来处理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下

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重新跑下项目。

2018.11月Flutter优质开源项目

项目描述： A Tricky Solution for Implementing Inline-Image-In-Text Feature in Flutter.

项目描述：Widgets for creating Hero-like animations between two widgets within the same screen.

项目描述：How to build a Match-3 game, like Candy Crush, Bejeweled, FishDom… in Flutter.

项目描述：A flutter ui challenge .... building a planets app

项目描述：Clip your widgets with custom shapes provided.

项目描述：A widget that displays a collection of dispersed and non-overlapping children

项目描述：Whatsapp UI clone in flutter. ????

项目描述：A guillotine menu for Flutter

项目描述：Library for RAD development in Flutter

项目描述：juejin client ui power by flutter

项目描述：Platform-adapting flutter widgets.

项目描述：A simple navigator assistant that allows for passing data to named routes

项目描述：Periodic callbacks in the background for both IOS and Android. Includes Android Headless mechanism

项目描述：My profile in flutter ????????♂️

项目描述：flutter checkbox

项目描述：Code for Cakes Catalog screen created using Flutter

项目描述：Fimber is Flutter logger inspired by Timber (logger API for Android)

项目描述：a pure dart flutter ocr project.inlude picture corper and invoke api from baidu to ocr.

更多精彩内容