Flutter开发-环境搭建

搭建Flutter开发环境

  • 1.安装Flutter SDK
  • 2.配置环境变量
    • 镜像
    • window
    • Mac
  • 3.运行flutter doctor
  • 4.Flutter for web

1.安装Flutter SDK

使用git命令行

git clone https://github.com/flutter/flutter.git

2.配置环境变量

镜像

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:

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

window

  1. 转到 “控制面板>用户帐户>用户帐户>更改我的环境变量”
  2. 在“用户变量”下检查是否有名为“Path”的条目:
    如果该条目存在, 追加 flutter\bin的全路径,使用 ; 作为分隔符.
    如果条目不存在, 创建一个新用户变量 Path ,然后将 flutter\bin的全路径作为它的值.
    在“用户变量”下检查是否有名为”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的条目,如果没有,也添加它们。
  3. 重启Windows以应用此更改

Mac

终端里输入

open .bash_profile

打开配置文件,加上变量

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

我的配置

3.运行flutter doctor

在windows的cmd命令行或Mac的终端下输入命令:

flutter doctor

将会自动安装Dart,安装完后会展示你需要安装的开发工具。
Flutter开发-环境搭建_第1张图片
按照提示安装自己开发所需要的工具。

现在我们可以创建自己的Flutter项目了,运行命令

flutter create [name]

运行
Flutter开发-环境搭建_第2张图片

4.Flutter for web

版本1.9开始,Flutter web 支持已合并到 Flutter 的主 repo,也就是说Flutter正式支持Web开发。
如果本地已安装Flutter,版本低于1.9,可以使用

flutter upgrade

命令升级。
第二步,我们需要打开flutter web支持,运行

flutter config --enable-web

命令打开。再次运行命令

flutter doctor

可以看到多了个chrome,必须安装。不然运行web项目会提示:No devices found with name or id matching ‘chrome’

Flutter开发-环境搭建_第3张图片

相对之前,项目多了个web文件夹。
Flutter开发-环境搭建_第4张图片

以前的项目可以执行命令

flutter create .

创建

执行命令

flutter run -d chrome

运行项目
Flutter开发-环境搭建_第5张图片

你可能感兴趣的:(Flutter)