Flutter for WebでReactのアレをやってみる

はじめに

Flutter for Webが発表されましたね!!
今までモバイルを中心に活躍していたFlutterがWebに進出することになりました

これでフロントエンド界隈に新たな勢力が出てくることになりますね...

Reactのアレをやってみよう!

Reactだと、

create-react-app <アプリ名>

とした際にプロジェクトを作成すると、

のような初期プロジェクトが作成されます。

なんかかっこいい...
これをFlutterでできないだろうか...

とりあえずFlutter for Webをはじめてみる

GitHubに公式が上げてくれたものがあるので、とりあえずそれをCloneします。

Flutterのバージョン

どうやらFlutterのversionは1.5以上なので、

flutter --version

で確認して、もし古ければ

flutter upgrade

でflutter SDKごとUpgradeします。

flutter web用の環境設定

flutter pub global activate webdev

でbuild toolを入れていきます。

プロジェクトを開く

さっきCloneしたもののなかにexamplesディレクトリがあり、そこに簡単なサンプルがあります。
今回は、spinning_squareをベースにやっていきます。

コードを書いていく

packageまわり

プロジェクト内で

flutter pub upgrade

をして、packageの更新を行います。

一旦実行してみる

flutter pub global run webdev

を実行すると、http://localhost:8080/#/
で緑色の四角形が回っているのが確認できます。

こんなかんじになるはず!!

とりあえず、画像をとってくる!

公式のページにリンクがあります!
これです!
そこからロゴをとってきてください

画像をプロジェクトに取り込む

Qiita: Flutter Web: Tips集
を参考にしました。
ディレクトリは、

|--lib
|  |--main.dart
|--.packages
|--pubspec.lock
|--pubspec.yaml
|--web
|  |--index.html
|  |--main.dart

このようになっていますが、
web/assetsに入れるとのことです

実際に画像を表示させる

さて、画像も取り込めたのでコード上でロードして表示させましょう。

lib/main.dart

  @override
  Widget build(BuildContext context) {
    return new RotationTransition(
        turns: _animation,
        child: new Container(
          width: 200.0,
          height: 200.0,
          color: const Color(0xFF00FF00),
        ));
  }

という部分がありますが、ここを以下のように変更します。

lib/main.dart

  @override
  Widget build(BuildContext context) {
    return new RotationTransition(
        turns: _animation,
        child: Image.asset('<ここはファイル名>')
    );
  }

他にも、ネットワーク上から画像を取得する、といったこともImageを使ってできるようです。
ここまでやると、以下のようにFlutterのロゴが回転します。

ね、簡単でしょ

最後に

GitHub上にコードを上げてます。