第一个Flutter应用

224 阅读7分钟

首先搭建Flutter开发环境

由于flutter会同时构建Android和ios两个平台的发布包,所以Flutter同时依赖Android SDK和IOS SDK,在安装Flutter时也需要安装相应平台的构建工具和SDK,先介绍一些分别搭建window和macOS下的开发环境;

在window上搭建Flutter开发环境: 系统要求:

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

操作系统: Windows 7 或更高版本 (64-bit)

磁盘空间: 400 MB (不包括Android Studio的磁盘空间).

工具: Flutter 依赖下面这些命令行工具.

PowerShell 5.0 或更新的版本

Git for Windows  (Git命令行工具)

如果已安装Git for Windows,请确保可以在命令提示符或PowerShell中运行 git 命令

去flutter官网下载其最新可用的安装包,官网地址:flutter.io/sdk-archive…

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

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

3.在Flutter安装目录的flutter文件下找到flutter_console.bat,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了。

更新环境变量

如果你想在Windows系统自带命令行(而不是)运行flutter命令,需要添加以下环境变量到用户PATH:

转到 “控制面板>用户帐户>用户帐户>更改我的环境变量”

在“用户变量”下检查是否有名为“Path”的条目:如果该条目存在, 追加 flutter\bin的全路径,使用 ; 作为分隔符. 如果该条目不存在,创建一个新用户变量 Path ,然后将 flutter\bin 的全路径作为它的值.

重启Windows以应用此更改.

运行 flutter doctor命令

在Flutter命令行运行如下命令来查看是否还需要安装其它依赖,如果需要,安装它们:

flutter doctor

该命令检查你的环境并在命令行窗口中显示报告。Dart SDK已经在打包在Flutter SDK里了,没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务。

Android设置

Flutter依赖于Android Studio的全量安装。Android Studio不仅可以管理Android 平台依赖、SDK版本等,而且它也是Flutter开发推荐的IDE之一(当然,你也可以使用其它编辑器或IDE,我们将会在后面讨论)。

安装Android Studio

1.下载并安装 Android Studio,下载地址:developer.android.com/studio/inde…

2.启动Android Studio,然后执行“Android Studio安装向导”。这将安装最新的Android SDK、Android SDK平台工具和Android SDK构建工具,这些是用Flutter进行Android开发所需要的。

在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官网下载其最新可用的安装包,官网地址:flutter.io/sdk-archive…

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

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

cd ~/development unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

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

export PATH=pwd/flutter/bin:$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,读者可以先自行下载并安装Android Studio,在此不再赘述。

升级 Flutter

Flutter SDK分支

Flutter SDK有多个分支,如beta、dev、master,其中beta分支为稳定分支(日后有新的稳定版本发布后可能也会有新的稳定分支,如1.0.0),dev和master为开发分支,安装flutter后,你可以运行flutter channel查看所有分支,如笔者本地运行后,结果如下:

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

升级Flutter SDK和依赖包

要升级flutter sdk,只需一句命令:flutter upgrade

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

1)flutter packages get获取项目所有的依赖包。

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

IDE配置与使用

理论上可以使用任何文本编辑器与命令行工具来构建Flutter应用程序。 不过,Flutter官方建议使用Android Studio和VS Code之一以获得更好的开发体验。Flutter官方提供了这两款编辑器插件,通过IDE和插件可获得代码补全、语法高亮、widget编辑辅助、运行和调试支持等功能,可以帮助我们极大的提高开发效率。下面我们分别介绍一下Android Studio和VS Code的配置及使用(Android Studio和VS Code读者可以在其官网获得最新的安装,由于安装比较简单,故不再赘述)。

Android Studio 配置与使用

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

安装Flutter和Dart插件

需要安装两个插件:

1).Flutter插件: 支持Flutter开发工作流 (运行、调试、热重载等)。

2).Dart插件: 提供代码分析 (输入代码时进行验证、代码补全等)。

安装步骤:

1).启动Android Studio。

2).打开插件首选项 (macOS:Preferences>Plugins, Windows:File>Settings>Plugins)。

3).选择 Browse repositories…,选择 flutter 插件并点击 install。

4).重启Android Studio后插件生效。

接下来,让我们用Android Studio创建一个Flutter项目,然后运行它,并体验“热重载”。

1).选择 File>New Flutter Project 。

2).选择 Flutter application 作为 project 类型, 然后点击 Next。

3).输入项目名称 (如 myapp),然后点击 Next。

4).点击 Finish。

5).等待Android Studio安装SDK并创建项目。

上述命令创建一个Flutter项目,项目名为myapp,其中包含一个使用Material 组件的简单演示应用程序。

在项目目录中,您应用程序的代码位于 lib/main.dart。

创建Flutter工程的方法创建一个新的Flutter工程,命名为"first_flutter_app"。创建好后,就会得到一个计数器应用的Demo。

该计数器示例中,每点击一次右下角带“➕”号的悬浮按钮,屏幕中央的数字就会加1。

如有错误,还望各位大佬指正!!