Flutter开发--如何布局？

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

创新互联建站-专业网站定制、快速模板网站建设、高性价比玛纳斯网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式玛纳斯网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖玛纳斯地区。费用合理售后完善，10多年实体公司更值得信赖。

根据设计图，可以看出整体可以分成两部分，上面一部分是系统介绍模块，下面一部分是真正的登录内容，因为涉及到叠加，因此考虑用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开发--Pub包管理

在原生开发中， Android 使用 Gradle 来管理依赖， iOS 用 Cocoapods 来管理依赖，Node 中通过 npm来管理依赖。 Flutter 使用配置文件 pubspec.yaml （位于项目根目录）来管理第三方依赖包。

Pub 是Google官方的Dart Packages仓库，类似于node中的npm仓库，android中的jcenter，我们可以在上面查找我们需要的包和插件，也可以向pub发布我们的包和插件。

Pub工具 包含管理Package、部署Package和部署命令行应用的命令。

如果使用的是Flutter SDK，不要直接使用pub命令。而是使用flutter pub命令，如下：

命令pub get/upgrade/outdated 属于管理Package的依赖关系

用于检索当前 Package 所依赖的其它 Package。如果 pubspec.lock 文件已经存在，则根据该文件中保存的依赖项版本获取对应的依赖项。如有必要，将会创建或更新该文件。

更新 package 依赖

当你添加一个 package 后首次运行 flutter pub get， Flutter 将会保存在 pubspec.lock lockfile 中找到的具体 package 版本。这将确保当你或者团队中其他开发者运行 flutter pub get 后能得到相同版本的 package。

如果你想升级到 package 的最新版本，比如使用 package 的最新特性，请运行 flutter pub upgrade 。这将检索你在 pubspec.yaml 文件中指定的版本约束所允许的最高可用版本。

案例

在flutter项目中导入hive包，在pubspec.yaml文件中添加配置：

执行flutter pub get，可以在 pubspec.lock 中看到 hive 版本是2.1.0，这是因为目前hive的最新版本是2.1.0,配置“^”表示向最新版本兼容，具体可查看Package版本管理（ ），所以再执行flutter pub upgrade 可以看到版本还是2.1.0，这个时候会发现pub get和 pub upgrade 效果一样。

但是未来如果 hive 发布了2.2.0版本，这个时候使用flutter pub get在pubspec.lock中看到hive版本依旧是2.1.0，而执行flutter pub upgrade 后在pubspec.lock中看到hive版本就是2.2.0。

现在先在flutter 项目的pubspec.yaml文件添加配置，指定hive版本是2.0.5，如下：

这个时候执行flutter pub get后，可以在pubspec.lock的文件中看到hive版本是2.0.5，如果这个时候更改配置为 hive: ^2.0.5，再执行flutter pub get就会发现在pubspec.lock的文件中看到hive版本还是2.0.5，这个时候可以执行flutter pub outdated查看依赖的每个 package，如下图，

可以看到，Upgrable项hive版本号为2.1.0，执行flutter pub upgrade 后可以看到在pubspec.lock的文件中看到hive版本是2.1.0

在pubspec.yaml文件添加配置：

lxx_package_demo信息如下图：

执行flutter pub get后在pubspec.lock中看到flutter_log版本是0.0.1

现在修改lxx_package_demo版本号为0.0.2，再执行flutter pub get

会发现版本会及时更新为0.0.2，这个时候执行flutter pub get/upgrade效果一样

参考文档：

Flutter开发——Linux嵌入式应用开发

上文中 介绍了Linux平台下Flutter环境搭建和桌面应用开发，现在需要更深入了解如何将该应用运行在Linux系统的嵌入式设备上。

安装及示例

在 ~/.bashrc 中配置 export PATH=$PATH:/opt/flutter-elinux/bin

打开weston虚拟机，此时发现 flutter-elinux devices 连接设备变成两个，如下图

即可编译及运行基于wayland显示后端的demo

避坑

Flutter开发--视频播放器

目前Flutter平台主流的两个播放器是video_player和fijkplayer

pub

github

1、Flutter平台官方插件，作者是国外的，有问题沟通比较困难，只能通过提交issue

2、硬解码

4、UI封装： better_player

基于video_player和Chewie的高级视频播放器。它解决了许多典型的用例，并且易于运行。

5、播放器宽高比例与视频内容宽高比例不一致时，会出现图像压缩变形的问题

6、调用原生内核播放器：iOS--AVPlayer， Android--ExoPlayer

7、对于分段源 m3u8 的播放不友好，如果一个切片播放超时，会导致整个播放都失败

8、better_player可以缓存视频，但不能自定义缓存的地址，只能指定key，和缓存的最大内存量（还未研究超出最大的话是不能缓存新的，还是删除最旧的）

9、better_player不能完全自定义UI，只能修改类中的一些开放属性，比如说icon图标，文字颜色啥的

10、无网络有缓存时，封面可以正常展示

11、better_player播放失败有手动retry的设计

pub

github

1、fijkplayer 是一个 Flutter 生态的媒体播放器，是对 ijkplayer 的 Flutter 封装，支持 Android 和 iOS。 fijkplayer 使用 ijkplayer 作为播放器内核，ijkplayer 使用 ffmpeg 进行音视频解封装和解码，同时添加了 Android 和 iOS 平台特有的硬件加速解码能力。

2 、国内有QQ群，但是活跃度也是不高。

3、可以缓存视频，可以自定义缓存的地址，方便后续的内存维护。

4、可以通过FijkPanelWidgetBuilder较大程度上自定义UI。

5、无网络有缓存视频时，无法展示封面，因为内部是通过imageProvider去加载网络图片的。

7、播放失败无手动retry的设计

1、两种播放器都是通过外接纹理方案 (Texture)，将播放器视频画面渲染接入 flutter 中，性能上优于 PlatformView 的接入方法。

如何自己实现？

下面以video_palyer的iOS源码部分解释：

iOS用CVPixelBufferRef将渲染出来的数据存在内存中，Flutter engine会将Texture的数据在内存中直接进行映射无需通过Channel传输，然后Texture Widget就可以把你提供的这些数据显示出来。在我们传输数据的时候会需要将其与 TextureID 绑定，绑定的过程通过BasicMessageChannel实现数据流的传输，以做到实时展示的效果

标题名称：在线flutter开发,flutter开发网站
文章源于：http://ybzwz.com/article/hocepc.html