iOS集成flutter 环境搭建 以及webstorm编辑器支

2020-08-12  本文已影响0人  思绪飘零ing

第一步:集成flutter环境。

flutter中文集成官网:官网地址

详细讲解

1.获取Flutter SDK

去flutter官网下载其最新可用的安装包
),
选择 Stable channel (macOS) 最新版本 。下载下来。
如果下载失败 去GitHub下载安装包
然后将下载的安装包 放到mac 一个位置。解压下来是flutter文件夹(可以放到mac任何位置)

2 .打开终端 直接执行下面两行替换环境变量(可以理解为实现终端翻墙 **)。

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

3. 将之前下载的flutter安装包解压。

然后执行下面语句

 export PATH=`pwd`/flutter/bin:$PATH

pwd 是 路径,你安装包所在的路径 (例如/Users/Jam/Desktop/工作 是我的路径) 我这里就该写为

export PATH=/Users/Jam/Desktop/flutter/bin:$PATH

4 终端执行

flutter doctor

稍等一下 执行完毕爆红色的 是你缺少的环境。 例如iOS 就缺少安卓的相关page iOS开发的电脑 应该不会缺少xcode的

这一步执行完毕 flutter的环境 已经搭建完成。

第二步 编辑器的选择 以及编辑器支持flutter的page工作

官方推荐 有两种方式

1 Android Sstudio

2 VS Code

以上两种 page工作去 逛网查看 我这边 说的是 webstorm 开发flutter的环境page工作。

3 webstorm

下载下来安装使用 这里先不说破解版本的办法

3.1 安装 dart ,移驾官网 dart 下载

因flutter是谷歌的所以flutter选择的开发语言是dart 所以要想webstorm具备flutter编译能力 需要本地搭建dart语言 开发环境

mac 电脑可以采用homebrew 安装 如果你已经安装过了 homebrew 可以直接忽略这一行

在终端运行命令安装homebrew:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
3.2安装dart

依次终端执行 (乳沟失败 请使用翻墙软件实现终端翻墙)

brew tap dart-lang/dart
 brew install dart --devel

3.3 webstorm 中 在 plugins 中下载 Dart 插件,如下图: 20190731134759491.png

3.4配置 sdk 路径:在设置中 => 语言&框架 => dart 配置 Dart SDK path: 20190731134820312.png

/usr/local/opt/dart/libexec 是我本地默认安装的 dart sdk 路径,查看自己本机的 dart 信息如下
在终端执行

 brew info dart

执行结果为

JamdeMac-mini:~ jamwang$ brew info dart
dart-lang/dart/dart: stable 2.9.0, HEAD
The Dart SDK
https://dart.dev
Conflicts with:
  dart-beta (because dart-beta ships the same binaries)
Not installed
From: https://github.com/dart-lang/homebrew-dart/blob/master/dart.rb
==> Options
--HEAD
    Install HEAD version
==> Caveats
Please note the path to the Dart SDK:
  /usr/local/opt/dart/libexec
JamdeMac-mini:~ jamwang$ 

这个Please note the path to the Dart SDK: 下边的就是 dart sdk 路径 大功告成

4 flutter升级 终端执行 flutter upgrade 后面跟着版本号 默认是最新的 channel stable (最新正式版正式版)

5 使用flutter doctor 最后验证 是否安装正确。

总结 如果全部都按照好了。 现在整体总结一下。 我们以后想使用 flutter 语句 每次都需要执行

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/Jam/Desktop/flutter/bin:$PATH  

很麻烦 所以这里提供一个简便方法 打开你的 .bash_profile 文件 将 这三行复制到这个文件夹下
然后 以后每次打开终端 只需要 在终端执行

source ~/.bash_profile

就可以使用 flutter 了 ****** 至于.bash_profile是什么 百度一下吧 很简单的。

这里说一下 我在升级flutter 的时候 升级成功后报一个黄色警告

JamdeMac-mini:~ jamwang$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.20.1, on Mac OS X 10.15.5 19F101, locale zh-Hans-CN)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
[!] Android Studio (not installed)
[!] Proxy Configuration
    ! NO_PROXY is not set
[✓] Connected device (2 available)

! Doctor found issues in 3 categories.
Proxy Configuration
! NO_PROXY is not set

此错误 可以 在上一步的 .bash_profile 里面加上一行export NO_PROXY=localhost,127.0.0.1 在执行解决。

flutter创建OC项目 执行语句

flutter create -i objc name

name 是工程名字
参考文章:1. Mac下Dart环境安装
2.mac webstorm 配置 dart 插件
3 flutter中文集成官网:官网地址
https://www.jianshu.com/p/87e09543cedf

上一篇下一篇

猜你喜欢

热点阅读