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_web1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/c7db9fd0-a7a9-596a-f49c-6adb51757424.png)

#### Flutter Web Appを選択
左メニューからDart > Flutter Web Appを選択して Next
ここに見えるFlutterは罠で、Webアプリは作成できない。
<img width="929" alt="スクリーンショット 2019-08-06 23.09.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/7585dd3d-1c77-2554-0b72-0c9c49a419cf.png">

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

### プロジェクトの作成

プロジェクト名はお好みで入力
<img width="829" alt="スクリーンショット 2019-08-06 23.14.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/486a6054-513d-a025-2558-b86dbe3a9f64.png">

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

<img width="950" alt="スクリーンショット 2019-08-06 23.20.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/d7ae1b1a-4bac-8111-5afe-14a950ef9127.png">


<details><summary>初回起動のログ</summary>
<p>

#### 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
```
色んなパッケージがダウンロードされてますなぁ
</p>
</details>

### プロジェクトの実行

index.htmlが選択されつつ、RunボタンがactiveになっていればOK
![flutter_web_run.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/313ffefd-f754-89f3-1e19-779a48e82521.png)

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

#### いよいよ実行

Runボタンをクリック

<img width="1031" alt="スクリーンショット 2019-08-06 23.27.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/71f524e6-57d2-1f0f-d021-9e23b385084a.png">

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

![スクリーンショット 2019-08-06 23.30.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/ab04f6fd-9585-bb1e-8afd-1a780f6d2eb5.png)

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

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

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

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

```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サイトを作ってこようっと。