简单的试了一下，完全用flutter现有的widget进行开发。github上面有说现在是preview版本，有些widget还不能用。但是最终是会支持整个的flutter现有的UI的。

跟用flutter开发原生app一样。flutter_web还有很长的一段路要走。希望年底能出个像样的版本。

不支持第三方库说明

目前pub.dartlang.org上的库如果引用了 flutter/material.dart, flutter/cupertinote.dart 等UI相关的库，在web里面都不能使用，因为目前flutter_web用到的widget有一个自己的命名空间。但是官方是说最终会合到flutter时面去。

之前写的代码全部用了flutter_redux. 目前在flutter_web里面就不能直接用了。要等flutter更新。

环境要求

要运行flutter_web要进行一些环境设置

• flutter版本：要用dev分支，且版本要在v1.5.4以上。如果还没有升级的话 flutter upgrade升级一下，flutter channel dev切换到dev分支。

flutter channel 查看当前分支

• clone flutter_web到本地

• 安装webdev

1pub global activate webdev
2or
3flutter 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 

出现Servingwebon [http://localhost:8080](http://localhost:8080`) 后就可以打开浏览器查看了。

上个简单的效果图：

企业微信截图_e751731e-ec91-4b6c-af0e-8fa718a742e5.png

代码简单如下：

1import 'package:flutter_web/material.dart';
2
3void main() {
4  runApp(new App());
5}
6
7class App extends StatelessWidget {
8  @override
9  Widget build(BuildContext context) {
10    return Center(child: test2());
11  }
12
13  Widget test2() {
14    return Column(
15      children: <Widget>[
16        createItem(),
17        createItem(),
18        createItem(),
19        createItem(),
20        createItem(),
21        createItem(),
22        createItem(),
23        createItem(),
24      ],
25    );
26  }
27
28  Widget createItem() {
29    return Container(
30      margin: const EdgeInsets.only(top: 10.0),
31      height: 80.0,
32      width: 300.0,
33      color: Color(0xff00ff00),
34      child: Center(
35        child: Text(
36          '这是一个列表',
37          textDirection: TextDirection.ltr,
38        ),
39      ),
40    );
41  }
42} 

本文转自 https://www.jianshu.com/p/6d1028e86bda，如有侵权，请联系删除。