国风

Google Flutter 跨平台框架初探

2018/03/12 Blog

Google Flutter 跨平台框架初探

参见 Flutter 官网,

环境配置

下载 Flutter SDK

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

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

配置 Flutter 环境

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

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

cd $HOME

配置环境变量.bash_profile文件

执行命令打开文件：

 vi .bash_profile

打开文件后，添加 Flutter SDK 安装的路径：

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

应用环境变量

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 的心路历程，很赞。

Search

    Table of Contents