Flutter for Web开发环境搭建与验证是怎样的，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
创新互联建站是一家集网站建设,土默特左旗企业网站建设,土默特左旗品牌网站建设,网站定制,土默特左旗网站建设报价,网络营销,网络优化,土默特左旗网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
最新的Flutter 1.5.4已经支持Web开发，这个教程将介绍如何在Linux、windows和Mac下 安装Flutter web开发环境：安装Flutter SDK和Flutter Web构建工具，并利用Flutter Web 演示代码来验证开发环境搭建成功。
首先安装最新版的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是作为一个单独分支预览，我们将其克隆到本地：
~/hubwiz$ git clone https://github.com/flutter/flutter_web.git
现在hubwiz目录组织如下：
~/hubwiz |- flutter |- flutter_web
执行下面的命令安装webdev包，它提供了用于Flutter Web开发的构建工具集：
~/hubwiz$ flutter pub global activate webdev
我们进入~/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
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。
