IntelliJでFlutter Webに入門してHello World

「FlutterはアプリだけでなくWebも作れるらしい、作ってみよう！」
という訳でまずはプロジェクト作成→実行してHello Worldを表示してみる。

環境

Flutter 1.7.8+hotfix.3
Dart 2.4.0
IntelliJ IDEA 2019.2 (Ultimate Edition)
macOS 10.14.6

中の人はFlutter歴数週間のポンコツ

公式ドキュメント

公式リンク

概念とか仕組みとか
https://flutter.dev/web

GitHub

flutter/flutter_web: Bring your Flutter code to web browsers
https://github.com/flutter/flutter_web#using-from-intellij

プロジェクト作成の手順

上記の公式READMEから抜粋して日本語訳すると

• Flutter SDKをインストール
• IntelliJまたはAndroid Studioのコピーをセットアップ
• ローカルのFlutter SDKを指すようにIntelliJまたはAndroid Studioを構成する
• 新しいDartプロジェクトを作成します。WebアプリのFlutterの場合、Flutterプロジェクトウィザードではなく、Dartプロジェクトウィザードから開始することに注意してください。
• Dartプロジェクトウィザードから、アプリケーションテンプレートの[Webのフラッター]オプションを選択します
• プロジェクトを作成します。pub get自動的に実行されます
• プロジェクトが作成されたら、runメインツールバーのボタンを押します
• IntelliJはwebdevコマンドラインツールを使用してアプリをビルドおよび実行します。新しいChromeウィンドウが開き、実行中のアプリが表示されます

以下の環境構築についてはスキップする。

• Flutter SDKインストール
• IntelliJセットアップ
• Flutter/Dartプラグインのインストール

新しいDartプロジェクトを作成

Create New Projectをクリック

Flutter Web Appを選択

左メニューからDart > Flutter Web Appを選択して Next
ここに見えるFlutterは罠で、Webアプリは作成できない。

興味深いのがこのsample contentの一覧のメニュー。
Console Application や Web Server も作れるらしい。
2Dゲームという文字も見える、面白そう！（いつか試してみたい）

プロジェクトの作成

プロジェクト名はお好みで入力

Finishをクリックするとプロジェクトが自動で読み込まれ、IntelliJにコードが表示された。
自動で pub get が走っているらしい。

初回起動のログ

Pub Getログ

Working dir: /Users/k_ikemura/dev/Flutter_web_first_app
/usr/local/opt/dart/libexec/bin/pub get
Resolving dependencies...
+ analyzer 0.37.0
+ archive 2.0.10
+ args 1.5.2
+ async 2.3.0
+ bazel_worker 0.1.21
+ build 1.1.5
+ build_config 0.4.1
+ build_daemon 2.0.0
+ build_modules 2.4.1
+ build_resolvers 1.0.6
+ build_runner 1.6.5
+ build_runner_core 3.0.7
+ build_web_compilers 2.1.4
+ built_collection 4.2.2
+ built_value 6.7.0
+ charcode 1.1.2
+ checked_yaml 1.0.1
+ code_builder 3.2.0
+ collection 1.14.11
+ convert 2.1.1
+ crypto 2.1.1
+ csslib 0.16.1
+ dart_style 1.2.9
+ fixnum 0.10.9
+ front_end 0.1.20
+ glob 1.1.7
+ graphs 0.2.0
+ html 0.14.0+2
+ http 0.12.0+2
+ http_multi_server 2.1.0
+ http_parser 3.1.3
+ intl 0.15.8
+ io 0.3.3
+ js 0.6.1+1
+ json_annotation 2.4.0
+ kernel 0.3.20
+ logging 0.11.3+2
+ matcher 0.12.5
+ meta 1.1.7
+ mime 0.9.6+3
+ package_config 1.0.5
+ package_resolver 1.0.10
+ path 1.6.4
+ pedantic 1.8.0+1
+ pool 1.4.0
+ protobuf 0.13.15
+ pub_semver 1.4.2
+ pubspec_parse 0.1.4
+ quiver 2.0.4
+ scratch_space 0.0.4
+ shelf 0.7.5
+ shelf_web_socket 0.2.3
+ source_maps 0.10.8
+ source_span 1.5.5
+ stack_trace 1.9.3
+ stream_channel 2.0.0
+ stream_transform 0.0.19
+ string_scanner 1.0.5
+ term_glyph 1.1.0
+ timing 0.1.1+1
+ typed_data 1.1.6
+ vector_math 2.0.8
+ watcher 0.9.7+12
+ web_socket_channel 1.0.14
+ yaml 2.1.16
Warning: You are using these overridden dependencies:
! flutter_web 0.0.0 from git https://github.com/flutter/flutter_web at 88a632 in packages/flutter_web
! flutter_web_ui 0.0.0 from git https://github.com/flutter/flutter_web at 88a632 in packages/flutter_web_ui
Changed 67 dependencies!
Precompiling executables...
Precompiled build_runner:graph_inspector.
Precompiled build_runner:build_runner.
Process finished with exit code 0

色んなパッケージがダウンロードされてますなぁ

プロジェクトの実行

index.htmlが選択されつつ、RunボタンがactiveになっていればOK

自分の場合はなぜか main.dart が初期選択かつRunボタンが無効になっていた。
index.htmlを選択するとRunできるようになった。（なんだったんだろうか）

いよいよ実行

Runボタンをクリック

自動でChromeにHello Worldが表示された！

あっけないくらい簡単にできてしまった。

感想

ものすごく簡単にFlutter Webの開発環境が作成できた。
（Qiitaに書く必要がないレベル）

驚いたのが、lib/main.dart を眺めると、Android/iOSのFlutterアプリのDartコードと全く同じだった！

Flutter_webのdartコードはこんな感じ

lib/main.dart

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

ということは、Flutterでネイティブアプリを作った場合、Webサイトも同じコードで作成できてしまう。
これはすごいなー、Dartコードが使い回せるじゃん。

では、さっそくFlutter Webサイトを作ってこようっと。