看到Google出flutter_web的technical preview版本了。赶忙clone下来试了一下。
简单的试了一下,完全用flutter现有的widget进行开发。github上面有说现在是preview版本,有些widget还不能用。但是最终是会支持整个的flutter现有的UI的。
跟用flutter开发原生app一样。flutter_web还有很长的一段路要走。希望年底能出个像样的版本。
环境要求
要运行flutter_web要进行一些环境设置
- flutter版本:要用dev分支,且版本要在v1.5.4以上。如果还没有升级的话 flutter upgrade升级一下,flutter channel dev切换到dev分支。
flutter channel 查看当前分支
-
clone flutter_web到本地
-
安装webdev
pub global activate webdev or flutter packages pub global activate webdev</pre>
-
确保
$HOME/.pub-cache/bin
这个环境变量存在
运行demo
- 进入demo目录
$ cd flutter_web/examples/hello_word
- 更新依赖
$ flutter packages upgrade 或者 pub get
- 运行本地web
$ webdev serve
出现Serving
webon [http://localhost:8080
](http://localhost:8080`) 后就可以打开浏览器查看了。
代码简单如下:
import 'package:flutter_web/material.dart'; void main() { runApp(new App()); } class App extends StatelessWidget { @override Widget build(BuildContext context) { return Center(child: test2()); } Widget test2() { return Column( children: <Widget>[ createItem(), createItem(), createItem(), createItem(), createItem(), createItem(), createItem(), createItem(), ], ); } Widget createItem() { return Container( margin: const EdgeInsets.only(top: 10.0), height: 80.0, width: 300.0, color: Color(0xff00ff00), child: Center( child: Text( '这是一个列表', textDirection: TextDirection.ltr, ), ), ); } }原文:https://www.jianshu.com/p/6d1028e86bda
发表评论