Flutter安装--Mac

2019-12-30  本文已影响0人  Eyes_cc
前言

Dart SDK包含开发Dart Web,命令行和服务器应用程序所需的库和命令行工具。如果仅开发移动应用程序,则不需要Dart SDK;只需安装Flutter。
Flutter中文网

1、步骤一:选择操作系统
2、步骤二:获取Flutter SDK和安装

(1)
去flutter官网下载其最新可用的安装包,转到下载页

去Flutter github项目下去下载安装包,转到下载页
(2)在应用程序中新建文件夹:Flutter,并将文件提取到该位置

cd 到文件夹:Flutter
unzip ~/Downloads/flutter_macos_v1.12.13+hotfix.5-stable.zip

或者:

将下载的文件压缩包直接解压到文件夹:Flutter

(3)设置环境变量,将Flutter永久添加到您的路径

终端输入:open ~/.bash_profile,打开环境配置文件
如果没有该文件,则终端输入:touch .bash_profile或vim ~/.bash_profile,创建一份。
如果有该文件,则会打开该文件,接着往下看
把下面代码复制进去
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=$PATH:/Applications/Flutter/flutter/bin
例如我的:export PATH=$PATH:/Applications/Flutter/flutter/bin
/Applications/Flutter是我创建的文件夹
:wq退出并保存(如果是直接在打开的文件中编辑的,可以直接关闭)
然后执行:source ~/.bash_profile(可有可无)

注意(很重要): 如果你使用的是zsh,终端启动时 ~/.bash_profile 将不会被加载,解决办法就是修改 ~/.zshrc ,在其中添加:source ~/.bash_profile

open ~/.zshrc

(4)通过运行以下命令来验证该目录现在位于您的PATH中:

echo $PATH
此时终端会出现如下结果:
/Users/mac/.rvm/gems/ruby-2.3.3/bin:/Users/mac/.rvm/gems/ruby-2.3.3@global/bin:/Users/mac/.rvm/rubies/ruby-2.3.3/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Applications/Flutter/flutter/bin:/Users/mac/.rvm/bin

(5)通过运行以下命令来验证该命令是否可用:

which flutter
此时终端会出现如下结果:
/Applications/Flutter/flutter/bin/flutter

(6)运行flutter doctor命令查看是否需要安装其它依赖项来完成安装,这一步需要的时间稍长:

MacdeMacBook-Pro:~ mac$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.14.6 18G3020, 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/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME to that
      location.
      You may also want to add it to your PATH environment variable.

[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[!] Android Studio (not installed)
[✓] IntelliJ IDEA Ultimate Edition (version 2019.3.4)
[!] VS Code (version 1.43.2)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

(7)如果你的电脑已经安装xcode,可以直接运行open -a Simulator 启动一个模拟器:

3、步骤三:平台设定[macOS支持在iOS,Android和Web(技术预览版)中开发Flutter应用。现在至少完成一个平台设置步骤,以便能够构建和运行您的第一个Flutter应用。]
ios设置

(1)安装Xcode

要开发适用于iOS的Flutter应用,您需要一台具有Xcode的Mac。
~. 安装最新的Xcode稳定版本(使用Web下载Mac App Store)。
~. 通过从命令行运行以下命令,将Xcode命令行工具配置为使用新安装的Xcode版本:

 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
 sudo xcodebuild -runFirstLaunch
当您要使用最新版本的Xcode时,这是大多数情况下的正确路径。如果需要使用其他版本,请改为指定该路径。

~. 通过一次打开Xcode并sudo xcodebuild -license从命令行确认或运行来确保Xcode许可协议已签署
早于最新稳定版本的版本仍然可以使用,但不建议在Flutter开发中使用。不支持使用旧版本的Xcode定位目标位代码,并且可能无法正常工作。

使用Xcode,您将能够在iOS设备或模拟器上运行Flutter应用。

(2)设置iOS模拟器
要准备在iOS模拟器上运行和测试您的Flutter应用,请执行以下步骤:

open -a Simulator
4、小试牛刀,命令行:创建并运行一个简单的Flutter应用

要创建第一个Flutter应用并测试设置,请按照以下步骤操作:
通过从命令行运行以下命令来创建新的Flutter应用程序:

flutter create my_app

将创建一个my_app目录,其中包含Flutter的入门应用程序。输入此目录:

cd my_app

要在模拟器中启动应用程序,请确保模拟器正在运行,然后输入:

flutter run
5、配置编辑器

官方文档看这里
目前官方推荐的编辑器有Android Studio、VS Code、IntelliJ,我选择的是VS Code:
1、在编辑器“Extensions”中搜索“flutter”安装flutter插件,然后重启编辑器!!!
2、再次终端运行flutter doctor命令查看是否需要安装其它依赖项来完成安装。或者在编辑器“命令面板”中搜索“doctor”回车

MacdeMacBook-Pro:~ mac$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.14.6 18G3020, 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/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME to that
      location.
      You may also want to add it to your PATH environment variable.

[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[!] Android Studio (not installed)
[✓] IntelliJ IDEA Ultimate Edition (version 2019.3.4)
[✓] VS Code (version 1.43.2)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.
6、使用编辑器创建应用

在编辑器“命令面板”中搜索“flutter”回车即可

7、打开模拟器运行

“运行” -> "启动调试"

8、更新Flutter
flutter upgrade
  ╔══════════════════════════════════════════════╗
  ║ A new version of Flutter is available!                                     ║
  ║                                                                            ║
  ║ To update to the latest version, run "flutter upgrade".                    ║
  ╚══════════════════════════════════════════════╝

上一篇下一篇

猜你喜欢

热点阅读