Help us understand the problem. What is going on with this article?

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

tablet版
image.png

この記事ですること

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 ってどうなの?

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

image.png

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

flutter for web が統合されたflutter1.9以上の場合、モバイルと同様のフォルダ構成で問題ありません。
× web/assets/images/〇〇.png
assets/images/〇〇.png

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

レスポンシブ対応

LayoutBuilderMediaQuery.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からプロジェクトを作成します。
image.png

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

画面に従ってポチポチ進めて行きます。
image.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_luncherhがweb対応していないで以下を使います。

import 'dart:js' as js;

    onTap: () {
        js.context.callMethod("open", [twitterUrl]);
    },
ampersand-dev
エンジニア / 個人開発者 https://twitter.com/ampersand000
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした