文档章节

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

汇智网教程
 汇智网教程
发布于 05/21 22:43
字数 785
阅读 316
收藏 2

最新的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开发的构建工具包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

2、克隆Flutter Web代码仓库

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

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

现在hubwiz目录组织如下:

~/hubwiz
  |- flutter     
  |- flutter_web

3、安装Flutter Web构建工具

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

~/hubwiz$ flutter pub global activate webdev

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

现在就可以使用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开发环境搭建 - 汇智网

© 著作权归作者所有

汇智网教程
粉丝 17
博文 244
码字总数 297642
作品 0
东城
私信 提问
Flutter开发环境搭建和调试

版权声明:本文为博主原创文章,转载需注明出处。 https://blog.csdn.net/jay100500/article/details/88386429 Flutter开发环境搭建和调试 开发环境的搭建 模拟器的安装与调试 Flutter开发工...

范特西_jay
03/10
0
0
Flutter与Dart 入门

Flutter简介 Flutter是google推出的,一个使用Dart语言开发的跨平台移动UI框架,通过自建绘制引擎,能高性能、高保真地进行Android和IOS开发。 Flutter是什么 Flutter是谷歌的移动UI框架,可...

JadePeng
2018/08/10
0
0
决胜Flutter 内容预告 第一部分 赛前准备

第一部分 赛前准备 第一章 熟悉战场 1.1 移动开发的现状 1.2 初识 Flutter 1.2.1 Flutter 的历史 1.2.2 Flutter 的特性 1.2.3 Flutter 的体系结构 1.3 搭建 Flutter 开发环境 1.3.1 Java 开发...

萧文翰
09/02
0
0
Flutter基础(二)Flutter最新开发环境搭建和Hello World

本文首发于微信公众号「刘望舒」 前言 最近的Google I/O大会上,Flutter1.5 预览版开始支持移动、Web、桌面和嵌入式设备,从不温不火的sky一直进化到如今热门的Flutter,Flutter的发展已经超...

刘望舒
05/16
0
0
如何在Windows、MacOS上搭建Flutter开发环境(详细篇)

特别说明:如果读者还不会科学上网!请先停止学习,因为读者不可能将Flutter开发环境搭建成功,所以先去学学科学上网,而且能打开谷歌了,再返回来学习效率会更高。 Flutter开发环境搭建(W...

zane
05/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

3_数组

3_数组

行者终成事
今天
7
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0
OpenJDK之CyclicBarrier

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CyclicBarrier是Doug Lea在JDK1.5中引入的,作用就不详细描述了,主要有如下俩个方法使用: await()方法,如果当前线...

克虏伯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部