美文网首页
iOS集成flutter 环境搭建 以及webstorm编辑器支

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

作者: 思绪飘零ing | 来源:发表于2020-08-12 11:22 被阅读0次

    第一步:集成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

    相关文章

      网友评论

          本文标题:iOS集成flutter 环境搭建 以及webstorm编辑器支

          本文链接:https://www.haomeiwen.com/subject/tcupdktx.html