搭建Flutter开发环境、从零基础到精通

简介: 搭建Flutter开发环境、从零基础到精通

搭建开发环境


Flutter可以跨平台运行在Windows、macOS、Linux等系统上。接下来介绍如何在Windows、macOS系统上搭建Flutter的开发环境,以及检查Flutter开发环境。

搭建开发环境分为以下 7 步。

(1)下载Flutter SDK。

(2)设置镜像地址及环境变量。

(3)安装与设置Android Studio。

(4)安装Visual Studio Code与Flutter开发插件。

(5)IDE的使用和配置。

(6)安装Xcode。

(7)检查Flutter开发环境。


1. 下载Flutter SDK

到Flutter官网下载最新的SDK,macOS版本下载界面如图所示。

Windows版本下载界面如图所示。

由于在国内访问Flutter官网有时会受到限制造成无法访问,因此可以去Flutter GitHub主页下载SDK,地址是https://github.com/flutter/flutter/releases,选择下载最新的ZIP包即可。

下载ZIP包后,把ZIP安装包解压到想要安装Flutter SDK的文件目录(如C:\src\flutter)下即可,切记不要把Flutter SDK安装到需要某些高级权限的路径上,如C:\Program Files\或C:\Program Files(x86)。


2. 设置镜像地址及环境变量

由于在国内访问Flutter官网有时会受到限制,Flutter官方为国内开发者搭建了临时镜像,需要添加如下环境变量。

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来获得有关镜像服务器的最新动态。

想要运行Flutter命令,还需要将Flutter SDK的全路径(如\flutter\bin)设置到环境变量PATH中,具体设置方法如下。

在macOS中设置镜像地址,具体步骤如下。

(1)打开macOS自带终端,并输入命令行vi./.bash_profile。

(2)添加下面的Flutter相关工具到PATH中。

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

(3)设置完上述变量后,输入使其生效的命令。

Source ./.bash_profile

(4)检查设置是否成功,输入以下命令行。

echo $PATH


3. 安装与设置Android Studio

安装与设置Android Studio的具体步骤如下。

(1)去Android开发者官网下载并安装Android Studio。安装完成后,启动Android Studio,根据安装向导的指示步骤安装最新的Android SDK及与Flutter相关的工具。

(2)进入Android Studio的设置界面,选择“Android Studio → Preferences... → Plugins”选项,安装Flutter Plugin和Dart Plugin。

(3)在Plugins设置界面中,搜索“flutter”,单击“Install”按钮进行安装。

(4)接着继续在Plugins设置界面中搜索“dart”,单击“Install”按钮进行安装。

(5)安装完成后,重启Android Studio,会出现一个“Create New Flutter Project”选项,说明已经安装成功了,可以直接创建Flutter项目了。


4. 安装Visual Studio Code与Flutter开发插件

安装与设置Visual Studio Code(简称VS Code)的具体步骤如下。

(1)去VS Code官网根据计算机系统下载并安装对应的VS Code,Windows和macOS的安装步骤大同小异,这里不再赘述。安装完成后,启动VS Code,打开的界面如图所示。

(2)进入VS Code的打开界面后,选择左侧的“Extensions → Search Extensions”选项,搜索“flutter”,单击“安装”(或“Install”)按钮安装Flutter开发插件。

(3)同理,继续在Search Extensions设置界面中搜索“dart”,单击“安装”(或“Install”)按钮进行安装。


5. IDE的使用和配置

Flutter官方推荐的编辑器有两个——VS Code和Android Studio,以便获得更好的开发体验。

通过IDE和插件可以实现代码补全、语法高亮、编辑辅助、运行和调试等功能,极大地提高了开发效率。

对于Flutter官方推荐的上述两个编辑器,根据程序调试及开发的便捷性,建议使用AndroidStudio编辑器。


6. 安装Xcode

如果要给iOS开发Flutter应用程序,需要一台macOS系统的计算机,并且安装Xcode。在macOS系统上安装Xcode的步骤很简单,直接在macOS系统自带的App Stroe上搜索“Xcode”,然后一键安装即可。


7. 检查Flutter开发环境

经过上述几节的安装操作,关于Flutter开发环境的搭建工作已经结束,但是在开启Flutter开发旅程前,需要检查一下Flutter开发环境是否正常。在终端中输入命令行flutter doctor,会在终端窗口中显示如下报告信息。

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!

输出结果显示没有缺少的环境,若出现红色叉号,就需要我们解决环境问题。

相关文章
|
5天前
|
开发工具 Android开发 git
鸿蒙Flutter实战:01-搭建开发环境
本文介绍了如何搭建鸿蒙 Flutter 开发环境,包括安装 DevEco Studio 等工具,并详细说明了 Mac 和 Windows 系统下的环境变量配置。此外,还介绍了如何使用 FVM 管理多个 Flutter 版本,并提供了一些常见问题的解决方案和交流群信息。
29 0
鸿蒙Flutter实战:01-搭建开发环境
|
1月前
|
Oracle Java 关系型数据库
Mac电脑上安装和配置Flutter开发环境
Mac电脑上安装和配置Flutter开发环境
42 3
|
5月前
|
Dart 前端开发 开发工具
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
【4月更文挑战第30天】本文介绍了Flutter SDK的安装和配置过程,以及如何创建并运行第一个Flutter应用。首先确保安装了Dart SDK和Flutter SDK,支持macOS、Linux和Windows。安装完成后,设置环境变量,然后通过`flutter doctor`验证安装。接着,使用`flutter create`命令创建新项目,进入项目目录并运行`flutter run`启动应用。在`main.dart`中修改代码以自定义应用。Flutter支持热重载和DevTools调试。本文为Flutter初学者提供了快速入门的指导。
92 0
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
|
3月前
|
Dart 开发工具 Android开发
flutter 搭建开发环境
flutter 搭建开发环境
33 1
|
3月前
|
Android开发 开发者
flutter 开发环境配置和生命周期学习
flutter 开发环境配置和生命周期学习
|
4月前
|
Dart 开发工具 Android开发
在 Windows 操作系统上安装和配置 Flutter 开发环境
在 Windows 操作系统上安装和配置 Flutter 开发环境
108 0
N..
|
5月前
|
开发框架 Dart 开发工具
搭建Flutter开发环境
搭建Flutter开发环境
N..
47 0
|
Web App开发 Dart 前端开发
flutter开发环境搭建
flutter开发环境搭建
164 0
|
Java 开发工具 Android开发
遇到的几个flutter开发环境问题
遇到的几个flutter开发环境问题