使用Flutter小部件跨平台开发移动端App组件 | 附代码

原创清华计算机学堂清华计算机学堂

使用Flutter小部件跨平台开发移动端App组件

根据平台的不同显示不同的小部件

Material Design不仅是为Android平台设计的，Material Design是一个设计体系，我们可以在任何时候使用它，iOS当然也可以使用。然而有时需要使用iOS特有的小部件，Flutter允许添加iOS原生的小部件。

在官网的小部件的分类中，可以看到Cupertino分类，如图1所示。

▍图1 官网中的Cupertino分类

Cupertino分类中提供了很多iOS原生的小部件，如图2所示。

▍图2 Cupertino小部件

这些Cupertino小部件可以在Flutter中使用。在编辑资讯页面中，提交按钮使用了加载条，代码如下：

加载条可以替换成iOS中加载条，可以使用CupertinoActivityIndicator小部件。在iOS设备上显示iOS的加载条，这意味着需要获取平台的信息，代码如下：

这样我们就完成了区分平台的编码。保持后，创建一条资讯，发现底部显示的是iOS的加载条，如图3所示。

▍图3 使用iOS加载条

我们可以使用区分平台的方法实现很多功能，而不只是显示不同的小部件。

根据不同的平台显示不同的主题

当前应用的主题在不同的设备上显示的效果几乎一样，我们可以根据不同的平台显示不同的主题。在main.dart文件中，我们使用了主题，代码如下：

可以根据不同的平台设置不同的主题，代码如下：

保持后发现在不同的平台显示的主题不同了。Android设备上的主题与之前一致，iOS设备上的主题显示如图4所示。

▍图4 iOS设备上的主题

我们学习了如何根据平台的不同执行不同的代码，通过Theme.of(context).platform找到平台信息，然后判断是iOS平台还是Android平台，再运行不同的代码。在官网中可以找到很多iOS风格的小部件，但并不是所有的material小部件都有对应的iOS小部件。

源代码下载

关注微信公众号，后台回复关键词 “Flutter小部件” 即可获得完整源代码。

参考书籍

《Flutter实战指南》

ISBN：978-7-302-55021-1

李楠编著

定价：79元

精彩文章回顾

电脑病毒木马的清除和防范方法 | 附视频