用flutter愉快的开发一波web

看到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 查看当前分支

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

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

上个简单的效果图:67449-c65e1f2a9aee5dea.png

代码简单如下:

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

本博客所有文章如无特别注明均为原创。作者:flutter教程网复制或转载请以超链接形式注明转自 Flutter教程网
原文地址《用flutter愉快的开发一波web
分享到:更多

相关推荐


Flutter教程网 官方QQ群:874592746

扫描下面二维码 加入Flutter教程网微信群:


发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)