前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter for Web 开发环境搭建与验证

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

作者头像
用户1408045
发布2019-05-23 11:04:18
2.2K0
发布2019-05-23 11:04:18
举报
文章被收录于专栏:汇智网教程汇智网教程

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

1、安装Flutter SDK

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

  • Linux下Flutter SDK安装

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

然后解压到指定目录,例如~/hubwiz

代码语言:javascript
复制
~$ cd ~/hubwiz
~/hubwiz$ tar xf ~/downloads/flutter_linux_v1.5.4-hotfix.2-stable.tar.xz

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

代码语言:javascript
复制
~/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

代码语言:javascript
复制
~$ cd ~/hubwiz
~/hubwiz$ tar xf ~/downloads/flutter_linux_v1.5.4-hotfix.2-stable.tar.xz

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

代码语言:javascript
复制
~/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

2、克隆Flutter Web代码仓库

目前Flutter Web是作为一个单独分支预览,我们将其克隆到本地:

代码语言:javascript
复制
~/hubwiz$ git clone https://github.com/flutter/flutter_web.git

现在hubwiz目录组织如下:

代码语言:javascript
复制
~/hubwiz
  |- flutter     
  |- flutter_web

3、安装Flutter Web构建工具

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

代码语言:javascript
复制
~/hubwiz$ flutter pub global activate webdev

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

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

代码语言:javascript
复制
~$ cd ~/hubwiz/flutter_web/examples/hello_world

然后安装项目依赖包:

代码语言:javascript
复制
~/hubwiz/flutter_web/examples/hello_world$ flutter packages upgrade

现在就可以使用webdev启动开发服务器了:

代码语言:javascript
复制
~/hubwiz/flutter_web/examples/hello_world$ webdev serve

现在使用浏览器打开http://localhost:8080,你就可以看到页面中的Hello,world!了。

默认情况下,webdev serve命令仅监听本地8080端口,如果你需要从其他机器访问web服务, 可以使用--hostname参数来绑定所有网络接口: ?>

代码语言:javascript
复制
~/hubwiz/flutter_web/examples/hello_world$ webdev serve --hostname 0.0.0.0

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、安装Flutter SDK
  • 2、克隆Flutter Web代码仓库
  • 3、安装Flutter Web构建工具
  • 4、验证Flutter Web开发环境的安装
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档