当前位置: 首页 > 工具软件 > Flutter > 使用案例 >

Mac系统下Flutter安装教程

潘宝
2023-12-01

一、下载Flutter

1、第一种方式git repo方式:

执行下列命令下载最新的flutter代码(系统请先安装Git)

git clone -b beta https://github.com/flutter/flutter.git

2、第二种方式Flutter官网下载:

https://docs.flutter.dev/development/tools/sdk/releases?tab=macos

二、安装:android Studio

下载地址:https://developer.android.google.cn/studio

三、安装Xcode,直接前往App Store下载安装即可。

四、安装flutter,环境配置,依赖项检查

1、永久的将flutter添加到path中:

1.1、在用户文件夹下找到.bash_profile文件,如果没有就创建一个(如果有 1.1.1此步骤忽略);

     1.1.1、.bash_profile文件创建方法如下:

       (1)终端执行:touch .bash_profile

       (2)打开文件:open .bash_profile

       (3)更新配置,文件才能生效:source .bash_profile

1.2、将下面三个export拷贝到.bash_profile文件中:

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

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

        export PATH=/Users/chengxinsong/Desktop/Tool/flutter/bin:$PATH

        // 备注:chengxinsong是你电脑的名称(记得替换);/Users/chengxinsong/Desktop/Tool/是Flutter的安装路径

1.3、添加保存后,执行下列命令刷新终端:

        source $HOME/.bash_profile

1.4、如果你的系统使用的是zsh(即终端最顶部显示的-zsh),却用了.bash_profile文件,终端启动时.bash_profile文件 将不会被加载,

      解决办法就是修改 .zshrc文件(终端打开方式:open ~/.zshrc) ,在其中添加:source ~/.bash_profile

1.5、运行下列命令检查flutter是否已经安装成功:

        flutter -v

1.6、检查flutter的依赖项命令

        flutter doctor

1.7、前边所有步骤均没问题话,运行flutter doctor后会出现如下输出:

╔════════════════════════════════════════════════════════════════════════════╗
║                 Welcome to Flutter! - https://flutter.dev                  ║
║                                                                            ║
║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
║ statistics and basic crash reports. This data is used to help improve      ║
║ Flutter tools over time.                                                   ║
║                                                                            ║
║ Flutter tool analytics are not sent on the very first run. To disable      ║
║ reporting, type 'flutter config --no-analytics'. To display the current    ║
║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
║ event will be sent, and then no further information will be sent by the    ║
║ Flutter tool.                                                              ║
║                                                                            ║
║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
║ Note: The Google Privacy Policy describes how data is handled in this      ║
║ service.                                                                   ║
║                                                                            ║
║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
║ crash reports to Google.                                                   ║
║                                                                            ║
║ Read about data we send with crash reports:                                ║
║ https://flutter.dev/docs/reference/crash-reporting                         ║
║                                                                            ║
║ See Google's privacy policy:                                               ║
║ https://policies.google.com/privacy                                        ║
╚════════════════════════════════════════════════════════════════════════════╝
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure
you trust this source!
Running "flutter pub get" in flutter_tools...                       8.9s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.8, on macOS 12.2.1 21D62 darwin-x64, 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, please use
      `flutter config --android-sdk` to update to that location.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] Connected device (3 available)
    ! Error: lwy is busy: Fetching debug symbols for lwy. Xcode will continue
      when lwy is finished. (code -10)
[✓] HTTP Host Availability
! Doctor found issues in 2 categories.

 

1.7.1、如果出现:Flutter 环境配置提示 cmdline-tools component is missing

        解决办法:启动 android studio工具

                -> 在一开始打开的右下角找到Configure

                -> 进入SDK Manager

                -> 取消右下角的 Hide Obselete Packages的勾选

                -> 选择SDK Tools,在这里把缺少的tool勾选上一并安装上

1.7.2、如果出现:Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

       解决办法:终端直接输入 flutter doctor --android-licenses

1.7.3、如果以上均没有问题后,则只需根据终端的提示输入 y 即可

1.7.4、以上步骤都走完后:检测Flutter的安装情况:flutter doctor

1.7.5、如果以上均没有问题会有如下输出:

mr.lv@MrlvdeMacBook-Pro ~ % flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel stable, 3.3.8, on macOS 12.2.1 21D62 darwin-x64, locale zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)

[✓] Chrome - develop for the web

[✓] Android Studio (version 4.1)

[✓] Connected device (3 available)

[✓] HTTP Host Availability

• No issues found!

2、如果习惯使用VSCode开发Flutter的话,需要再安装VSCode工具

   下载地址:https://code.visualstudio.com/ 【此安装包会自动弹出汉化安装】

          或者:https://code.visualstudio.com/download

    2.1、Dart官网:https://dart.dev/

    2.2、Dart环境官方文档:https://dart.dev/get-dart

    2.3、安装 Homebrew 检测是否安装brew,执行命令 brew -v,

        如果安装了,就执行 2.4,

        如果没安装先安装:https://brew.sh

        即:将 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

        复制到终端执行。

    2.4、Dart SDK 安装: 打开终端 依次执行:

            brew tap dart-lang/dart

            brew install dart

            brew info dart

            输出:==> Caveats

                     Please note the path to the Dart SDK:

                     /usr/local/opt/dart/libexec

    备注:dart sdk安装亦可参照此文:https://www.cnblogs.com/strengthen/p/16305014.html

    2.5、在VSCode安装 Dart 插件(dart语言提示)

    2.6、安装 code runner 插件(可以运行我们的文件)

    2.7、安装 Code Spell Checker 插件(拼写检查)

    2.7、检测 Dart插件情况:

         在终端上输入 dart --version 命令来检测dart是否安装成功,如果出现如下内容则安装成功:

         输出:Dart SDK version: 2.18.4 (stable) (Tue Nov 1 15:15:07 2022 +0000) on "macos_x64"

                则代表安装成功。

    到此,就可以用Dart语言正常进行开发了!

 类似资料: