Flutter Web开发环境搭建

栏目: IOS · Android · 发布时间: 4年前

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

最新的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

~$ 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开发的构建 工具 包webhubwiz在 .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和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

2、克隆Flutter Web代码仓库

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

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

现在hubwiz目录组织如下:

~/hubwiz
  |- flutter     
  |- flutter_web

3、安装Flutter Web构建工具

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

~/hubwiz$ flutter pub global activate webhubwiz

4、验证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

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

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

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

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

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

汇智网原创,转载请标明出处。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Head First Python(中文版)

Head First Python(中文版)

巴里(Barry.P.) / 林琪 等 / 中国电力出版社 / 2012-3-1 / 68.00元

你想过可以通过一本书就学会Python吗?《Head First Python(中文版)》超越枯燥的语法和甩法手册,通过一种独特的方法教你学习这种语言。你会迅速掌握Python的基础知识,然后转向持久存储、异常处理、Web开发、SQLite、数据加工和lGoogle App Engine。你还将学习如何为Android编写移动应用,这都要归功于Python为你赋予的强大能力。本书会提供充分并且完备......一起来看看 《Head First Python(中文版)》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试