今年google发布了Flutter 1.0版,并且咸鱼已经对Flutter进行了应用,所以自己最近研究了一下Flutter,讲解一下自己搭建过程
由于windows并不支持iOS的开发环境安装,所以目前只是针对Mac 系统进行安装(注意在环境搭建的过程中需要VPN,绕开那个大家都懂的东西)
镜像
Flutter官方为中国开发者搭建的临时镜像,可以将如下环境变量加入到环境变量中:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Linux用户组也提供了镜像站点,可以将如下环境变量加入到环境变量中:
export PUB_HOSTED_URL=https://mirrors.sjtug.sjtu.edu.cn/
export FLUTTER_STORAGE_BASE_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cn/
具体环境变量设置步骤如下:
1.打开或创建$HOME/.bash_profile文件
2.在文件中添加以上任一组的设置语句并保存
3.保存文件后执行如下命令:
source $HOME/.bash_profile
4.确定环境变量已经设置完成
echo $PATH
安装Android开发环境
安装最新Android Studio版本,下载地址:https://developer.android.google.cn/studio/
安装完成后启动Android Studio,执行“Android Studio安装向导”,开始安装最新的Android SDK,Android SDK平台工具和Android SDK构建工具
安装完之后需要配置Flutter SDK
安装Flutter SDK
1.在Flutter 官网下载最新的beta版SDK ,其他版本可在官网查看:
https://flutter.io/sdk-archive/#macos
2.解压下载的SDK zip包到指定目录,比如执行类似如下命令解压到~/desktop/目录下:
cd ~/desktop
解压相应的安装包
unzip ~/Downloads/flutter_macos_v0.9.4-beta.zip
3.添加flutter工具到PATH:
export PATH=`pwd`/flutter/bin:$PATH
以上命令只是临时的添加了PATH,如果想永久将flutter设置到PATH中,可采用如下方法:
export PATH=$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin
其中[PATH_TO_FLUTTER_GIT_DIRECTORY]替换为你真实的Flutter SDK解压缩后存放的目录
source $HOME/.bash_profile
echo $PATH
执行如下命令确定PATH已经设置完成
保存文件后执行如下命令:
打开或创建$HOME/.bash_profile文件
在文件中添加
这是添加PATH后的结果
执行如下命令查看是否需要安装其他依赖项
flutter doctor
这是执行的结果
[✓] Flutter (Channel beta, v0.9.4, on Mac OS X 10.14 18A391, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.0)
[✓] Android Studio (version 3.2)
[!] IntelliJ IDEA Ultimate Edition (version 2017.2.5)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected devices
! No devices available
! Doctor found issues in 2 categories.
根据内容说明在AndroidStudio中并未安装Dart 和Flutter插件,所以需要在AndroidStudio
命令行继续执行flutter doctor
可以根据执行的结果,判断Flutter安装过程中,哪一项没有安装完成,并继续安装下边的插件
在AndroidStudio中新建项目
选择Start a new Flutter Application
Flutter Application
关联现有项目
一、创建Flutter模块
假设你有一个iOS工程,路径为 /Users/userName/Desktop/flutterC(如下图)
说说如何创建my_flutter
首先用Xcode创建一个iOS工程,步骤不做介绍了。然后在项目的根目录(flutterC)执行一下命令:
flutter create -t module my_flutter
注意如果发现命令行结果:-bash: flutter: command not found,那么是因为PATH中的路径失效了,需要重新将flutter添加到PATH中。
如果命令行正常执行,那么有下图,表明创建Flutter模块成功,如上图中my_flutter即是
注:当前笔者是通过 Android Studio 开发Flutter,无法直接创建iOS的Flutter模块(如下图,后续可能会支持),所以建议用官方的方式,通过如上命令来创建
二、需要在项目中Enable Bitcode 设置为NO
1. 在Podfile文件中添加Flutter app
source'https://github.com/CocoaPods/Specs.git'
platform:ios,'9.0'
inhibit_all_warnings!
target 'flutterCeshi' do
end
flutter_application_path = '../my_flutter'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
其中flutter_application_path 是my_flutter 相对当前flutterCeshi项目中的地址
2.然后在命令行中 pod install
参考文档:https://www.jianshu.com/p/af085d4420fd
参考文档:https://mp.weixin.qq.com/s/chHTbP01O_mOCqzFYeWwCQ
欢迎关注我的公众号,专注iOS开发、大前端开发、跨平台技术分享。