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

tablet版

この記事ですること

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

ポートフォリオサイト

AmpersandPortfolio

私の環境

バージョンの確認の仕方
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 ってどうなの？

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

画像とかフォントの置き方

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)
at web-responsive · ptyagicodecamp/x-flutter-landingpage

ホスティング

firebaseのhostingを利用しています。

firebase側の設定

firebaseからプロジェクトを作成します。

作成後、左上のセッテイングアイコンからSettingを開いて、webを作ります。

画面に従ってポチポチ進めて行きます。

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]);
    },