一、在Windows上搭建Flutter开发环境

系统要求
要安装和运行Flutter,您的开发环境必须满足以下最低要求:

	操作系统Windows 7 SP1或更高版本(64位)
	磁盘空间::400 MB(不包括IDE/Tools的磁盘空间)。
	工具颤振取决于您的环境中可用的这些工具。
	Windows PowerShell 5.0或者更新(这是与Windows 10一起预装的)
	Git for Windows2.x,与从Windows命令提示符中使用Git选择。
	
	如果GitforWindows已经安装,请确保可以运行git命令提示符或PowerShell中的命令。

获取Flutter SDK
1.去flutter官网下载其最新可用的安装包,下载地址:
https://flutter.dev/docs/development/tools/sdk/releases,如图:可选择平台及版本
在这里插入图片描述
注意:Flutter的渠道版本会不停变动,请以Flutter官网为准。另外,在中国大陆地区,要想正常获取安装包列表或下载安装包,可能需要翻墙,读者也可以去Flutter github项目下去下载安装包,地址:https://github.com/flutter/flutter/releases 。

将安装包zip解压到你想安装Flutter SDK的路径(如:C:\src\flutter;注意,不要将flutter安装到需要一些高权限的路径如C:\Program Files\)。

在Flutter安装目录的flutter文件下找到flutter_console.bat,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了。如图:
在这里插入图片描述
更新环境变量
如果你想在Windows系统自带命令行运行flutter命令,需要添加以下环境变量到用户PATH:
在这里插入图片描述
将 …\flutter\bin 的全路径加入path
在这里插入图片描述
测试是否生效:
win+r:cmd
输入flutter -h查看是否生效

Android设置
Flutter依赖于Android Studio的全量安装。Android Studio不仅可以管理Android 平台依赖、SDK版本等,而且它也是Flutter开发推荐的IDE之一(当然,你也可以使用其它编辑器或IDE,vscode,IntelliJ IDEA等)。

安装Android Studio
下载并安装 Android Studio,下载地址:https://developer.android.com/studio/index.html
打不开请自行翻墙。下载完毕傻瓜式安装及可。

二、在macOS上搭建Flutter开发环境

在masOS下可以同时进行Android和iOS设备的测试。

系统要求
要安装并运行Flutter,您的开发环境必须满足以下最低要求:

操作系统: macOS (64-bit)
磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间).
工具: Flutter 依赖下面这些命令行工具.
bash、mkdir、rm、git、curl、unzip、which

获取Flutter SDK
1.去flutter官网下载其最新可用的安装包,官网地址:https://flutter.io/sdk-archive/#macos

注意,Flutter的渠道版本会不停变动,请以Flutter官网为准。另外,在中国大陆地区,要想正常获取安装包列表或下载安装包,可能需要翻墙,读者也可以去Flutter github项目下去下载安装包,地址:https://github.com/flutter/flutter/releases 。

2.解压安装包到你想安装的目录,如:

cd ~/development
unzip ~/Downloads/flutter_macos_v1.21.13-beta.zip

3.添加flutter相关工具到path中:

export PATH=`pwd`/flutter/bin:$PATH

此代码只能暂时针对当前命令行窗口设置PATH环境变量,要想永久将Flutter添加到PATH中请参考下面更新环境变量部分。

更新环境变量
将Flutter添加到PATH中,可以在任何终端会话中运行flutter命令。

对于所有终端会话永久修改此变量的步骤是和特定计算机系统相关的。通常,您会在打开新窗口时将设置环境变量的命令添加到执行的文件中。例如

1.确定您Flutter SDK的目录记为“FLUTTER_INSTALL_PATH”,您将在步骤3中用到。
2.打开(或创建) $HOME/.bash_profile。文件路径和文件名可能在你的电脑上不同.
3.添加以下路径:

export PATH=[FLUTTER_INSTALL_PATH]/flutter/bin:$PATH

例如Flutter 安装目录是“~/code/flutter_dir”,那么代码为:

export PATH=~/code/flutter_dir/flutter/bin:$PATH

4.运行 source $HOME/.bash_profile 刷新当前终端窗口。

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

5.验证“flutter/bin”是否已在PATH中:

echo $PATH

安装 Xcode
要为iOS开发Flutter应用程序,您需要Xcode 9.0或更高版本:

1.安装Xcode 9.0或更新版本(通过链接下载或苹果应用商店)。

2.配置Xcode命令行工具以使用新安装的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 对于大多数情况,当您想要使用最新版本的Xcode时,这是正确的路径。如果您需要使用不同的版本,请指定相应路径。

3.确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license同意过了.
使用Xcode,您可以在iOS设备或模拟器上运行Flutter应用程序。

安装Android Studio
和Window一样,要在Android设备上构建并运行Flutter程序都需要先安装Android Studio,在此不再赘述。

升级 Flutter

Flutter SDK分支
Flutter SDK有多个分支,如beta、dev、master、stable,其中stable分支为稳定分支,dev和master为开发分支,安装flutter后,你可以运行flutter channel查看所有分支,本地运行后,结果如下:

Flutter channels:
  beta
  dev
* master

带"*"号的分支即你本地的Flutter SDK 跟踪的分支,要切换分支,可以使用flutter channel beta 或 flutter channel master,Flutter官方建议跟踪稳定分支,但你也可以跟踪master分支,这样可以查看最新的变化,但这样稳定性要低的多。

升级Flutter SDK和依赖包
要升级flutter sdk,只需一句命令:

flutter upgrade

该命令会同时更新Flutter SDK和你的flutter项目依赖包。如果你只想更新项目依赖包(不包括Flutter SDK),可以使用如下命令:
fl

utter packages get获取项目所有的依赖包。
flutter packages upgrade 获取项目所有依赖包的最新版本。

三、IDE配置与使用

理论上可以使用任何文本编辑器与命令行工具来构建Flutter应用程序。 不过,Flutter官方建议使用Android Studio和VS Code之一以获得更好的开发体验。Flutter官方提供了这两款编辑器插件,通过IDE和插件可获得代码补全、语法高亮、widget编辑辅助、运行和调试支持等功能,可以帮助我们极大的提高开发效率。

Android Studio 配置与使用
由于Android Studio是基于IntelliJ IDEA开发的,所以读者也可以使用IntelliJ IDEA。

安装Flutter和Dart插件
安装步骤:

启动Android Studio。
打开插件首选项 (macOS:Preferences>Plugins, Windows:File>Settings>Plugins)。
选择 Browse repositories…,选择 flutter 插件并点击 install。
重启Android Studio后插件生效。

若第一次运行Android Studio,步骤如下:
在这里插入图片描述
在这里插入图片描述
取消即可
在这里插入图片描述
默认即可
选择自己喜欢的风格
在这里插入图片描述
在这里插入图片描述
启动Android Studio后,打开插件首选项 (macOS:Preferences>Plugins, Windows:File>Settings>Plugins)。
直接搜索flutter,选择 flutter 插件并点击 install。重启Android Studio后插件生效。如图:
在这里插入图片描述

flutter插件安装好之后,Dart插件随之自动安装,我们可以搜索dart插件测试,看是否装好。

运行 flutter doctor 命令
在Flutter命令行运行如下命令来查看是否还需要安装其它依赖,如果需要,安装它们:
flutter doctor -v(显示详细信息)

flutter doctor

该命令检查你的环境并在命令行窗口中显示报告。Dart SDK已经在打包在Flutter SDK里了,没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务。
例如:
在这里插入图片描述
检测到前面打对勾的都是没问题的(我这因为电脑问题会乱码),如果出现感叹号,就是依赖没装好,按照提示运行指令即可。

创建Flutter应用
1.选择 File>New Flutter Project
2.选择 Flutter application 作为 project 类型, 然后点击 Next
3.如图:
在这里插入图片描述
4.点击 Finish。
5.等待Android Studio安装SDK并创建项目。
6.创建好如图:
在这里插入图片描述
此时没有可用设备,我们创建一个虚拟设备,步骤如下:
1.Tools–>AVD Manager
2.如图:双击红框框中选项
在这里插入图片描述
3.根据实际情况选择,点击Next
在这里插入图片描述
4.选择系统并下载,下载完成后点击Next在这里插入图片描述
5.确定好后点击Finish
在这里插入图片描述
6.点击运行
在这里插入图片描述
7.运行完成如图:
在这里插入图片描述
8.点击绿框中按钮,以Debug方式运行
在这里插入图片描述
9.完成后如图,我们可以修改代码测试,至此Android Studio 搭建Flutter开发环境完成
在这里插入图片描述
VS Code的配置与使用
VS Code是一个轻量级编辑器,支持Flutter运行和调试

安装 Flutter 和 Dart 插件
打开 VS Code。
点击左侧栏Extensions
在扩展搜索输入框中输入 “flutter”,然后在列表中选择 Flutter 并单击 安装。此过程中会自动安装必需的 Dart 插件。
点击 重新加载 以重新启动 VS Code。

创建Flutter应用
启动 VS Code
调用 View>Command Palette…
输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
输入 Project 名称 (如myapp), 然后按回车键
指定放置项目的位置,然后选择目录并确定
等待项目创建继续,并显示main.dart文件

运行程序
1.找到 VS Code 的状态栏(窗口底部蓝色的条),点击 No Devices 然后打开一个模拟器。
在这里插入图片描述
2.创建
在这里插入图片描述
3.创建完成
在这里插入图片描述
4.点击Run and Debug或者按F5,当应用启动以后— 处理进度会出现在 Debug Console 页面中。
当应用编译完成后,就可以在设备上运行这个起步应用了。
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐