flutter web + firebase(hosting)でポートフォリオサイトをつくったよ

tablet版
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/8b042ed9-5664-78b7-aeb3-21be3cf2b3bf.png)


# この記事ですること
flutter web を使用して静的サイトをつくるにあたって、いくつか躓いたので、記憶の整理も兼ねて記事を書きます。
特に躓いたこと、flutter webを使用するにあたって気をつけたほうがいいことを書きます。

# ポートフォリオサイト
[AmpersandPortfolio](https://portfolio-ampersand.web.app/#/)

# 私の環境
バージョンの確認の仕方
`flutter --version`

```
Flutter 1.10.15 • channel dev • https://github.com/flutter/flutter.git
Framework • revision fbabb264e0 (3 weeks ago) • 2019-11-02 01:36:07 +0300
Engine • revision 8ea19b1c76
Tools • Dart 2.6.0 (build 2.6.0-dev.8.2 bbe2ac28c9)
```

# flutter web ってどうなの？
「公式は(本番環境)使用を勧めてないし、始まったばかりで知見も少ないから止めておけ」が正直な感想です。
兎にも角にも情報が少なすぎる！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/c126f752-8809-93e4-3ce8-5038abf18f2d.png)


# 画像とかフォントの置き方
flutter for web が統合されたflutter1.9以上の場合、モバイルと同様のフォルダ構成で問題ありません。
× `web/assets/images/〇〇.png`
◯ `assets/images/〇〇.png`

pubspec.yamlもモバイル同様に記述します。
``` pubspec.yaml
  assets:
    - assets/images/〇〇.png
```



# レスポンシブ対応
`LayoutBuilder`と`MediaQuery.of(context).size.width`を使ってresponsive対応します。resisonsiveに対応したものは色々ありますが、私は以下のサイトを参考にして使用しています。
[techLog – Making Cross-platform Flutter Landing Page Responsive (Web-Hummingbird, Android, iOS)](https://ptyagicodecamp.github.io/making-cross-platform-flutter-landing-page-responsive-web-hummingbird-android-ios.html#making-cross-platform-flutter-landing-page-responsive-web-hummingbird-android-ios )
[at web-responsive · ptyagicodecamp/x-flutter-landingpage](https://github.com/ptyagicodecamp/x-flutter-landingpage/blob/web-responsive/landingpage/lib/utils/responsive_widget.dart)


# ホスティング
firebaseのhostingを利用しています。


## firebase側の設定
firebaseからプロジェクトを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/739c4aad-c150-ad85-53ab-ccfe1e8e8f70.png)

作成後、左上のセッテイングアイコンからSettingを開いて、webを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/73403eec-9929-3785-b02f-b102e65d4c31.png)

画面に従ってポチポチ進めて行きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/8dce1e89-8591-defa-0381-ccd067f4fa56.png)


## firebaseログイン
ここからはIDEの設定
`firebase login`でログイン


### init
`firebase init`コマンド
initコマンドを打つと出てくるこの画面では、hostingに合わせてスペースキーを打ちます。そうすると◯が●に変わります。で、エンター


```
❯◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
 ◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features
```


`What do you want to use as your public directory?`では、`build/web`を指定します。`build`じゃないよ！

```
    ? What do you want to use as your public directory? build/web
    ? Configure as a single-page app (rewrite all urls to /index.html)? No 
    ? File build/web/404.html already exists. Overwrite? No
    i  Skipping write of build/web/404.html
    ? File build/web/index.html already exists. Overwrite? No
```

### hosting
- `flutter build web`コマンドでビルドします。
  - `build`フォルダにファイルが出来ます。
- `firebase deploy`コマンドでデプロイします。
  - 一回目、二回目はすぐに反映されますが、それ以上やると途端に反映速度が落ちます。(体感10分後ぐらいに反映)


# 外部リンク
url_luncherｈがweb対応していないで以下を使います。


```
import 'dart:js' as js;

    onTap: () {
        js.context.callMethod("open", [twitterUrl]);
    },
```