Google Flutter 跨平台框架初探

Posted by Guofeng Blog on March 12, 2018

Google Flutter 跨平台框架初探

参见 Flutter 官网,

环境配置

下载 Flutter SDK

在当前用户目录clone flutter SDK 代码:

1
2
git clone -b beta https://github.com/flutter/flutter.git

配置 Flutter 环境

下载后的路径:Users/your-name/Flutter/flutter/ 。

在命令行下,进入用户目录

1
2
cd $HOME

配置环境变量.bash_profile文件

执行命令打开文件:

1
2
 vi .bash_profile

打开文件后,添加 Flutter SDK 安装的路径:

1
2
3
4
5
export PATH=${PATH}:/Users/your-name/Flutter/flutter/bin:$PATH
# 在天朝需要配置如下朝内地址
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

应用环境变量

1
2
source .bash_profile

检查当前工具链是否完整

输入 flutter,没有提示该命令找不到,则配置成功。

flutter doctor

flutter doctor,安装 Futter 剩余依赖项,不符合条件的工具都有提示,按照提示安装剩余工具和插件。

安装 Flutter 和 Dart 插件

启动 Android Studio, preference->plugin,搜索 flutter并点击安装,同时系统会系统提示安装 Dart 插件,点击 Yes 安装即可。

如何导入 Flutter 项目

打开 Flutter 项目

下载完 Flutter 项目,直接 Android Studio - Open,可以先打开 ~/flutter/examples/flutter-gallary 等示例项目。 注意:天朝内无法下载 flutter-gallary 的依赖 gallart-asset (git 托管在 googlesource 上面),所以很多同学可能用起来不方面,我弄了一份,放在百度云 链接:https://pan.baidu.com/s/1GHG9T4AudIoPHkubzVv3Fg 密码:y7ce,,大家下载之后,解压,然后配置一下 flutter-gallary/pubspec.yaml 中 git 地址为解压路径即可。

配置 Flutter SDK

img

如图,点击 Open Flutter setting,点击下拉按钮,选择 Flutter SDK 路径,点击 OK,会自动配置 Dart SDK 路径。

导入 Flutter 官方 example

官方 demo 在在 flutter/examples 目录下 demo 对应的功能描述如下:

  • Hello, world Hello World 程序。
  • Flutter gallery flutter 所有组件示例,material design (Android Design)风格组件示例,Cupertino (iOS)风格组件示例。
  • Platform Channel dart 如何调用系统原生能力,个人理解类似 安卓webview 中 js 调用原生能力的JsBridge,参见: https://flutter.io/platform-channels/ 。
  • Platform Channel Swift 同上,只有 iOS swift版本(上面包含 Android Java & iOS Object C)。
  • Flutter View dart 如何调用原生界面,和 Platform Channel 类似,只是请求到 native 之后跳转页面,可以认为是保持原生和 flutter 混合开发的策略。
  • Layers 如何使用 Layer。
  • Stocks 多页面程序示例。

导入 github 上他人示例

这里推荐大家看一下 https://github.com/WuXiaolong/flutter_movie 这个,作者也写了博客记录自己学习 flutter 的心路历程,很赞。