Flutter for Web 开发环境搭建与验证

最新的Flutter 1.5.4已经支持Web开发，这个教程将介绍如何在Linux、windows和Mac下 安装Flutter web开发环境：安装Flutter SDK和Flutter Web构建工具，并利用Flutter Web 演示代码来验证开发环境搭建成功。

要快速掌握软件开发技能，推荐汇智网的在线互动编程课程

一、安装Flutter SDK

首先安装最新版的Flutter SDK，目前支持Linux、Windows和MacOS。

• Linux下Flutter SDK安装

首先下载最新的Flutter SDK 1.5.4 for Linux。

而后解压到指定目录，例如~/hubwiz：

~$ cd ~/hubwiz
~/hubwiz$ tar xf ~/downloads/flutter_linux_v1.5.4-hotfix.2-stable.tar.xz

接下来把flutter sdk、dart sdk和webhubwiz执行文件目录加入PATH环境变量：

~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/bin
~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/bin/cache/dart-sdk/bin
~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/.pub-cache/bin

注意flutter sdk内置了dart sdk，上面第二条命令就是将dart-sdk的执行文件加入PATH 环境变量。用于Flutter Web开发的构建工具包webdev在.pub-cache/bin目录下，咱们 先添加此路径，稍后安装。

• windows下Flutter SDK安装

首先下载最新的Flutter SDK 1.5.4 for Windows

而后解压到指定目录，例如c:\hubwiz。

双击flutter目录下的flutter_console.bat文件，便可进入Flutter SDK控制台环境。 也能够将Flutter SDK执行文件路径加入Path环境变量，例如c:\hubwiz\flutter\bin。

• MacOS下Flutter SDK安装

首先下载最新的Flutter SDK 1.5.4 for MacOS。

而后解压到指定目录，例如~/hubwiz：

~$ cd ~/hubwiz
~/hubwiz$ tar xf ~/downloads/flutter_linux_v1.5.4-hotfix.2-stable.tar.xz

接下来把flutter sdk、dart sdk和webdev执行文件目录加入PATH环境变量：

~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/bin
~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/bin/cache/dart-sdk/bin
~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/.pub-cache/bin

二、克隆Flutter Web代码仓库

目前Flutter Web是做为一个单独分支预览，咱们将其克隆到本地：

~/hubwiz$ git clone https://github.com/flutter/flutter_web.git

如今hubwiz目录组织以下：

~/hubwiz
  |- flutter     
  |- flutter_web

三、安装Flutter Web构建工具

执行下面的命令安装webdev包，它提供了用于Flutter Web开发的构建工具集：

~/hubwiz$ flutter pub global activate webdev

四、验证Flutter Web开发环境的安装

咱们进入~/hubwiz/flutter_web/examples/hello_world目录，来验证Flutter Web 开发环境是否搭建成功：

~$ cd ~/hubwiz/flutter_web/examples/hello_world

而后安装项目依赖包：

~/hubwiz/flutter_web/examples/hello_world$ flutter packages upgrade

如今就能够使用webdev启动开发服务器了：

~/hubwiz/flutter_web/examples/hello_world$ webdev serve

如今使用浏览器打开http://localhost:8080，你就能够看到页面中的Hello,world!了。

默认状况下，webdev serve命令仅监听本地8080端口，若是你须要从其余机器访问web服务， 能够使用--hostname参数来绑定全部网络接口： ?>

~/hubwiz/flutter_web/examples/hello_world$ webdev serve --hostname 0.0.0.0

---

原文：Flutter Web开发环境搭建 - 汇智网