Flutter菜鸟教程：开发环境如何搭建？

2023-09-0810:19:23APP与小程序开发Comments1,947 views字数 2492阅读模式

Flutter可以跨平台运行在Windows、macOS、Linux等系统上。接下来介绍如何在Windows、macOS系统上搭建Flutter的开发环境，以及检查Flutter开发环境。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

1 下载Flutter SDK文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

到Flutter官网下载最新的SDK，macOS版本下载界面如图所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

Flutter菜鸟教程：开发环境如何搭建？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

Windows版本下载界面如图所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

Flutter菜鸟教程：开发环境如何搭建？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

由于在国内访问Flutter官网有时会受到限制造成无法访问，因此可以去Flutter GitHub主页下载SDK，地址是https://github.com/flutter/flutter/releases，选择下载最新的ZIP包即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

Flutter菜鸟教程：开发环境如何搭建？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

下载ZIP包后，把ZIP安装包解压到想要安装Flutter SDK的文件目录（如C:\src\flutter）下即可，切记不要把Flutter SDK安装到需要某些高级权限的路径上，如C:\Program Files\或C:\Program Files（x86）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

2 设置镜像地址及环境变量文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

由于在国内访问Flutter官网有时会受到限制，Flutter官方为国内开发者搭建了临时镜像，需要添加如下环境变量。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

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

注意，此镜像为临时镜像，不能保证一直可用，读者可以参考Flutter GitHub主页https://github.com/flutter/flutter/wiki来获得有关镜像服务器的最新动态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

想要运行Flutter命令，还需要将Flutter SDK的全路径（如\flutter\bin）设置到环境变量PATH中，具体设置方法如下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

在macOS中设置镜像地址，具体步骤如下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

（1）打开macOS自带终端，并输入命令行vi./.bash_profile。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

（2）添加下面的Flutter相关工具到PATH中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

export PATH=$PATH: [ 你计算机本地安装 Flutter 的路径 ]/flutter/bin

（3）设置完上述变量后，输入使其生效的命令。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

Source ./.bash_profile

（4）检查设置是否成功，输入以下命令行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

echo $PATH

3 安装与设置Android Studio文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

安装与设置Android Studio的具体步骤如下。（1）去Android开发者官网下载并安装Android Studio。安装完成后，启动Android Studio，根据安装向导的指示步骤安装最新的Android SDK及与Flutter相关的工具。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

（2）进入Android Studio的设置界面，选择“Android Studio → Preferences... → Plugins”选项，安装Flutter Plugin和Dart Plugin。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

Flutter菜鸟教程：开发环境如何搭建？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

（3）在Plugins设置界面中，搜索“flutter”，单击“Install”按钮进行安装。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

Flutter菜鸟教程：开发环境如何搭建？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

（4）接着继续在Plugins设置界面中搜索“dart”，单击“Install”按钮进行安装。（5）安装完成后，重启Android Studio，会出现一个“Create New Flutter Project”选项，说明已经安装成功了，可以直接创建Flutter项目了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

Flutter菜鸟教程：开发环境如何搭建？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

4 安装Visual Studio Code与Flutter开发插件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

安装与设置Visual Studio Code（简称VS Code）的具体步骤如下。（1）去VS Code官网根据计算机系统下载并安装对应的VS Code，Windows和macOS的安装步骤大同小异，这里不再赘述。安装完成后，启动VS Code，打开的界面如图所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

Flutter菜鸟教程：开发环境如何搭建？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

（2）进入VS Code的打开界面后，选择左侧的“Extensions → Search Extensions”选项，搜索“flutter”，单击“安装”（或“Install”）按钮安装Flutter开发插件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

Flutter菜鸟教程：开发环境如何搭建？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

（3）同理，继续在Search Extensions设置界面中搜索“dart”，单击“安装”（或“Install”）按钮进行安装。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

5 IDE的使用和配置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

Flutter官方推荐的编辑器有两个——VS Code和Android Studio，以便获得更好的开发体验。通过IDE和插件可以实现代码补全、语法高亮、编辑辅助、运行和调试等功能，极大地提高了开发效率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

对于Flutter官方推荐的上述两个编辑器，根据程序调试及开发的便捷性，建议使用AndroidStudio编辑器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

6 安装Xcode文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

如果要给iOS开发Flutter应用程序，需要一台macOS系统的计算机，并且安装Xcode。在macOS系统上安装Xcode的步骤很简单，直接在macOS系统自带的App Stroe上搜索“Xcode”，然后一键安装即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

7 检查Flutter开发环境文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

经过上述几节的安装操作，关于Flutter开发环境的搭建工作已经结束，但是在开启Flutter开发旅程前，需要检查一下Flutter开发环境是否正常。在终端中输入命令行flutter doctor，会在终端窗口中显示如下报告信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

Doctor summary (to see all details, run flutter doctor -v):[√] Flutter (Channel stable, 2.0.4, on macOS 11.2.3 20D91 darwin-x64, localezh-Hans-CN)[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)[√] Xcode - develop for iOS and macOS[√] Chrome - develop for the web[√] Android Studio (version 4.1)[√] VS Code (version 1.57.1)[√] Connected device (1 available)·No issues found!

输出结果显示没有缺少的环境，若出现红色叉号，就需要我们解决环境问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/56005.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/xcx/56005.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定