Flutter入门第一讲:环境搭建(mac os为例)

时间:2022-07-24
本文章向大家介绍Flutter入门第一讲:环境搭建(mac os为例),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

文:毛毛,版权归属https://maomao.ink,转载请注明出处!

《Flutter零基础入门》,从无到有构建Android、iOS双平台APP,更新中…

今天开始,我重新捡起之前中断的Flutter学习。在新的电脑上搭建新的环境,记录如下,希望可以帮助到你!

本文参考资料:

  1. 【Flutter中文网】
  2. 《Flutter实战》

步骤一:设置镜像

将下面两个镜像地址导入到环境变量中。

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

环境变量设置步骤:

  1. 打开终端,输入sudo vi ~/.bash_profile,按回车输入密码后会打开bash_profile文件。(一定要用sudo,否则没权限保存文件。)
  2. 在打开的vim编辑界面添加上述两行环境变量。添加步骤:按下键盘i进入编辑模式,编辑完成后按esc、再输入:wq,按下回车即可退出。如果不想保存,就输入:q退出。

步骤二:下载Flutter SDK

  1. Flutter官网下载最新可用的安装包,官网地址:https://flutter.io/sdk-archive/#macos
  2. 解压sdk,将sdk目录放在合适的位置

3.设置环境变量。将flutter所在目录设置到环境变量中,以我的配置为例:

export PATH=~/Documents/demo/flutter_src/flutter/bin:$PATH

其中/Documents/demo/flutter_src/是我flutter文件夹的根目录,需根据情况自行修改。

步骤三、运行flutter doctor命令

设置好环境变量以后可以在终端任何地方运行flutter doctor命令,如未设置,需跳转到flutter所在目录运行。

运行完之后会出现诊断结果,我初次运行结果如下:

maomaodeMacBook-Pro:demo maomao$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.13.6 17G2208,
    locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK  
    version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run:
      flutter doctor --android-licenses
[!] 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:
        brew install ios-deploy
    ✗ Brew can be used to install tools for iOS device development.
      Download brew at https://brew.sh/.
[!] Android Studio (version 3.2)
    ✗ Flutter plugin not installed; this adds Flutter specific
      functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.
maomaodeMacBook-Pro:demo maomao$ 

从诊断结果来看,我还有两个步骤没有完成。一个是Xcode配置,另一个是AndroidStudio配置,都是与Flutter相关的。如果你未安装Xcode或者AndroidStudio,应该会提示你安装。

步骤四、配置Xcode,安装 libimobiledevice 和 ideviceinstaller

网上查了一堆,发现这两个插件都是通过Homebrew命令来安装的,所以需要先安装Homebrew。Homebrew是一个Xcode的辅助工具,新安装的Xcode是不带的,需要自行安装。

Homebrew 安装步骤:

  1. 终端运行:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2.按提示进行安装,运行brew 命令检查是否安装成功。

安装 libimobiledevice

brew install libimobiledevice

安装 ideviceinstaller

brew install ideviceinstaller

安装完成之后,flutter doctor,发现报如下错误:

⣷Unhandled exception:
Exception: ideviceinfo returned an error:
ERROR: Could not connect to lockdownd, error code -8

解决办法:运行sudo chmod -R 777 /var/db/lockdown,输入密码。

再次运行flutter doctor,发现iOS部分还是报错如下:

iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is
      necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch
        /Applications/Xcode.app/Contents/Developer
    ✗ Verify that all connected devices have been paired with this
      computer in Xcode.
      If all devices have been paired, libimobiledevice and
      ideviceinstaller may require updating.
      To update with Brew, run:
        brew update
        brew uninstall --ignore-dependencies libimobiledevice
        brew uninstall --ignore-dependencies usbmuxd
        brew install --HEAD usbmuxd
        brew unlink usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        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

根据提示依次运行如下命令:

sudo xcode-select --switch
brew update
brew uninstall --ignore-dependencies libimobiledevice
brew uninstall --ignore-dependencies usbmuxd
brew install --HEAD usbmuxd
brew unlink usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup//这段下载要很久

上面是我遇到的情况,具体诊断结果会因人而异,不管怎样,你只要照着报错下面的提示做就行了(就是run:下面的命令)。

运行完所有上述命令,再运行flutter doctor,在iOS项里面还有如下错误: Xcode installation is incomplete; a full installation is necessary for iOS development.

[!] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

这里提示说Xcode没有完全安装,我去AppStore搜Xcode,发现我的Xcode需要更新了,按提示更新完毕。如果你的Xcode是安装的最新完整版,应该会少很多问题。

安装完成之后更具提示运行命令:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

如果运行命令报错,尝试重启一下终端。

折腾完上面的步骤,iOS的报错项基本解决了。

步骤五、配置AndroidStudio,安装 Dart 和 Flutter 插件

按照下图操作步骤,安装Dart和Flutter插件。

步骤六、最后运行flutter doctor命令

完成所有步骤之后,最后运行flutter doctor进行检查,这个命令可以随时运行检查。

maomaodeMacBook-Pro:~ maomao$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.13.6 17G2208, locale
    zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.2)
[✓] Connected device (2 available)

! Doctor found issues in 1 category.

以上就是环境搭建的整个过程,下一篇给大家讲如何用flutter运行最简单的应用“hello world”,敬请期待!

祝你成功!