搭建 Flutter 开发环境

作者: 不知名bzm | 来源:发表于2018-12-25 22:57 被阅读39次

    本文是以在 Mac 电脑上搭建为例,其他环境请参考官方文档

    开始搭建

    1. 下载 Flutter SDK,可以选择 git clone (可以切换 channel)或下载 .zip 文件(Stable 版)进行解压缩。
      但是无论使用哪儿种方式下载 SDK,都最好放到一个指定的目录(本文路径为 /User/xx/workspace/),因为后面配置环境变量和设置sdk都需要这个目录的路径。

      • .zip 文件下载 ,下载后解压缩至 /User/xx/workspace/
      • 本文主要说下使用 git clone 进行下载
        /User/xx/workspace/目录中执行下面 git 命令进行下载:
        git clone -b master https://github.com/flutter/flutter.git
        针对国内的网络问题,官方提供了镜像,在命令行执行:
      export PUB_HOSTED_URL=https://pub.flutter-io.cn
      export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
      
    2. 配置环境变量
      在命令行直接执行:export PATH=$PATH:‘pwd’/flutter/bin
      或在 ~/.bash_profile 中添加👆的语句,保存退出后执行 source ~/.bash_profileflutter 命令就生效了,pwd 就是上面下载 SDK 时指定的目录的路径。
      查看 flutter 的版本信息:
      flutter --version // 第一次执行可能会看到下载东西的输出信息,等待下载完成就可以了

      本文安装的版本信息:

      ➜ flutter flutter --version
      Flutter 1.0.0 • channel stable • https://github.com/flutter/flutter.git
      Framework • revision 5391447fae (4 weeks ago) • 2018-11-29 19:41:26 -0800
      Engine • revision 7375a0f414
      Tools • Dart 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)
      
    3. 上面也说了本文是使用 git 进行下载 SDK,那么如何改变 channels呢,首先查看当前所使用的channel:
      flutter channel // 如果是第一次运行仍然会看到输出了一堆下载信息
      最后可以看到以下输出信息:

      Flutter channels:
      beta
      dev
      * master
      stable 
      

      接下来切换到stable,使用修改 channel 命令:
      flutter channel stable
      然后执行:
      flutter upgrade

    4. 使用 flutter doctor 命令来检查当前环境搭建情况,包括 SDK、编辑器、可以运行工程的 device 等信息。下面是本文安装时候的最终输出:

      Doctor summary (to see all details, run flutter doctor -v):
      [✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.13.6 17G4015, locale zh-Hans-CN)
      [✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
      [!] iOS toolchain - develop for iOS devices (Xcode 9.2)
        ! CocoaPods out of date (1.5.0 is recommended).
        CocoaPods is used to retrieve the iOS platform side's plugin code that
        responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on
        iOS.
        For more info, see https://flutter.io/platform-plugins
        To upgrade:
        brew upgrade cocoapods
        pod setup
      [✓] Android Studio (version 3.2)
      [✓] IntelliJ IDEA Community Edition (version 2018.3.2)
      [✓] VS Code (version 1.30.1)
      [✓] Connected device (1 available)
      ​
      ! Doctor found issues in 1 category.
      

      CocoaPods 推荐使用 1.5.0,但是1.5.3版本也可以用。
      到此步骤时如果遇到问题注意看提示信息。

    5. 新建工程
      flutter 工程可以使用的编辑器有:Android Studio、VS Code、IntelliJ。
      从中选择自己常用的或喜欢的编辑器,然后安装 flutter 插件,Android Studio 还需要安装 Dart 插件。
      以 IntelliJ 为例,新建 flutter 工程,菜单中点击:File、New、Project…,选择 flutter,配置下sdk的路径,点击下一步就是工程名、工程存储路径、描述、Android 和 iOS 语言的选择,点击 finish 等待工程被创建。

    6. 运行工程
      上面工程创建成功后,在 Intellij 中点击工具栏的运行按钮就看到了下面成功运行起来的页面。


      first_flutter_app_home_page.png

    搭建中问题总结:

    1. andrid/mulutor/bin 找不到
      解决办法: Flutter 安装搭建报错 Android sdkmanager tool not found
    2. Android licenses 不被允许
      解决办法:按提示输入命令 flutter doctor --android-licenses
    3. 下载安装Xcode后,然后报错:
      [!] iOS toolchain - develop for iOS devices (Xcode 10.1)
        ✗ libimobiledevice and ideviceinstaller are not installed. To install
        with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
        ✗ ios-deploy not installed. To install with Brew:
        brew install ios-deploy
        ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code
        that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not
        work on iOS.
        For more info, see https://flutter.io/platform-plugins
        To install:
        brew install cocoapods
        pod setup
      
      解决办法:按以上的输出提示一个个执行命令
    4. 提示:Waiting for another flutter command to release the startup lock...
      解决办法:删除flutter安装目录 /bin/cache 中的 lockfile
    5. 提示无可用 device
      解决办法:启动 iOS 模拟器(真心比 Android 模拟器方便好使😂),启动命令:
      open -a Simulator
    6. 编辑器一开始打算使用 VS Code,可以创建成功,创建后什么都没修改但是没运行起来,不知道哪儿个环节出了问题
      解决办法:还是改用了自己比较熟悉的IntelliJ,最后成功运行起来😄

    ㊗️🎅

    相关文章

      网友评论

        本文标题:搭建 Flutter 开发环境

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