看到Google出flutter_web的technical preview版本了。趕忙clone下來試了一下。

簡(jiǎn)單的試了一下，完全用flutter現(xiàn)有的widget進(jìn)行開發(fā)。github上面有說現(xiàn)在是preview版本，有些widget還不能用。但是最終是會(huì)支持整個(gè)的flutter現(xiàn)有的UI的。

跟用flutter開發(fā)原生app一樣。flutter_web還有很長(zhǎng)的一段路要走。希望年底能出個(gè)像樣的版本。

不支持第三方庫說明

目前pub.dartlang.org上的庫如果引用了 flutter/material.dart, flutter/cupertinote.dart 等UI相關(guān)的庫，在web里面都不能使用，因?yàn)槟壳癴lutter_web用到的widget有一個(gè)自己的命名空間。但是官方是說最終會(huì)合到flutter時(shí)面去。

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

環(huán)境要求

要運(yùn)行flutter_web要進(jìn)行一些環(huán)境設(shè)置

• flutter版本：要用dev分支，且版本要在v1.5.4以上。如果還沒有升級(jí)的話 flutter upgrade升級(jí)一下，flutter channel dev切換到dev分支。

flutter channel 查看當(dāng)前分支

• clone flutter_web到本地

• 安裝webdev

pub global activate webdev
or
flutter packages pub global activate webdev</pre>

• 確保$HOME/.pub-cache/bin這個(gè)環(huán)境變量存在

運(yùn)行demo

• 進(jìn)入demo目錄

$ cd flutter_web/examples/hello_word

• 更新依賴

$ flutter packages upgrade  或者 pub get

• 運(yùn)行本地web

$ webdev serve

出現(xiàn)Servingwebon [http://localhost:8080](http://localhost:8080`) 后就可以打開瀏覽器查看了。

上個(gè)簡(jiǎn)單的效果圖：

企業(yè)微信截圖_e751731e-ec91-4b6c-af0e-8fa718a742e5.png

代碼簡(jiǎn)單如下：

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(
          '這是一個(gè)列表',
          textDirection: TextDirection.ltr,
        ),
      ),
    );
  }
}