flutter web初探

距离flutter正式发布已经有半年了。目前flutter发展如日中天,从新加qq群的朋友数量就可以看出来。flutter早已经支持了桌面版的开发,前一段时间又出来了web版。看来离flutter一统江湖,哦不,一统前端的时间已经不远了:)。现在就差小程序这么个前端领域没有被flutter触及到了,对于国人的diy能力,我是深信的。如果真有那么一天,相信flutter也能翻译成小程序的版本,看看taro就知道了。

好了闲话说完,下面正式进入主题:

环境

安装flutter

安装flutter的最新版本,还是建议直接从官网直接下载,目前地址:

https://storage.googleapis.co...

下载完毕后解压缩到一个目录中,并且配置一下环境变量,这个在我们的环境安装篇里面已经讲过了,这里不再重复。

完毕之后运行一下

flutter precache

配置web版环境

按照官方的要求:https://github.com/flutter/fl...

运行一下这个命令:

flutter pub global activate webdev

clipboard.png

这个步骤应该没有毛病,相当顺利。 不过出现了这么个警告:

clipboard.png

我们依照这里的指令,将export PATH="$PATH":"$HOME/working/flutter/.pub-cache/bin"加入配置。

我们把官方的demo clone下来,

git clone https://github.com/flutter/flutter_web.git

进入到example中的hello_world,运行下flutter pub upgrade

cd examples/hello_world
flutter pub upgrade

clipboard.png

然后运行webdev serve

clipboard.png

这里提示了dart: command not found

显然,这里是少了dart这个命令,之前没有将dart sdk加入环境变量中,经过一番搜索,发现原来在这里:

clipboard.png

flutter/bin/cache/dart-sdk/bin

我们将这个加入到环境变量

再次运行:

clipboard.png

显然需要运行:

pub get

clipboard.png

再次运行:

clipboard.png

效果:

clipboard.png

来个复杂点的例子:

进入examples/gallery

运行

pub get
webdev serve

效果:
clipboard.png


flutter探索之路
本专栏分享、收集flutter优秀中文资料,欢迎一起探索flutter。

A simple way to solving problems is using tools like docker/Spring boot/React Native/React/Vue… T...

1.2k 声望
335 粉丝
0 条评论
推荐阅读
CSplitterWnd动态分割
静态分割不提了,网上一大堆。关键是动态分割要怎么办?1、从未切分到切分2、从切分到未切分3、从切分状态m到切分状态n的转变比如这里要实现一个通达信的看盘窗口,分成主窗口和指标窗口。指标窗口可随时关闭,也...

jzoom阅读 1.1k

Flutter 让你的Dialog脱胎换骨吧!(Attach,Dialog,Loading,Toast)
4.0版本做了重大调整,迁移请参照: SmartDialog 3.x 迁移 4.0本文内容已更新,文中内容及其代码皆为4.0用法前言Q:你一生中闻过最臭的东西,是什么?A:我那早已腐烂的梦。兄弟萌!!!我又来了!这次,我能自信...

小呆呆6662阅读 2.3k

封面图
Flutter 这一年:2022 亮点时刻
2022 年,我们非常兴奋的看到 Flutter 社区持续发展壮大,也因此让更多人体验到了令人难以置信的体验。每天有超过 1000 款使用 Flutter 的新移动应用发布到 App Store 和 Google Play,Web 平台和桌面应用程序数...

Flutter阅读 1.1k

个推支持小程序消息推送,助力开发者实现用户高触达、高转化
随着小程序技术和应用场景的不断完善,越来越多的开发者搭建了小程序平台,为用户带来更“轻量”的服务。在小程序用户迅猛增长的同时,开发者对于小程序用户精细化触达的需求也愈加强烈。近日,个推消息推送上线了...

个推阅读 1.1k

封面图
远程 | 开源项目 AppFlowy | 招 Flutter / Rust 实习生
AppFlowy Inc 成立于 2022年1月,是一家初创开源软件厂商,我们致力打造一款无代码应用搭建协同办公类软件,同时提供安全可靠、开放灵活的解决方案。企业或个人能够在 AppFlowy 上轻松搭建贴合自己需求的应用,从...

annieappflowy阅读 927

Flutter异常监控 - 壹 | 从Zone说起
如果你正需要处理Flutter异常捕获,那么恭喜你,找对地了,这里从根源上给你准备了Flutter异常捕获需要是所有知识和原理,让你更深刻认识Flutter Zone概念。

听蝉阅读 895

大年初四,Flutter Forward 中国社区直播活动与你不见不散
之前我们预告过,2023 年 1 月 25 日 (年初四),Flutter 团队将在肯尼亚首都内罗毕举办 Flutter Forward 大会,并同时开启线上直播。本次活动将为展示最新的 Flutter 技术更新,包括一个主题演讲,以及多个技术演...

Flutter阅读 888

A simple way to solving problems is using tools like docker/Spring boot/React Native/React/Vue… T...

1.2k 声望
335 粉丝
宣传栏