Flutter for WebをGithubのProject Pagesで公開する

Flutterのバージョン1.9からFlutter for Webを正式にサポートしたのでGithubのProject Pagesで公開してみたい。Flutterのexamplesに含まれるFlutter galleryをそのまま公開する手順です。

環境

1
2
3
4
5


flutter --version
Flutter 1.10.8-pre.21 • channel master • https://github.com/flutter/flutter.git
Framework • revision fa7340a328 (6 days ago) • 2019-10-02 19:04:50 -0400
Engine • revision 73dd5a33d9
Tools • Dart 2.6.0 (build 2.6.0-dev.4.0 eaf1c308ab)

Flutter galleryのビルド

Flutter galleryのパスへ移動

1

cd [:flutterのパス]/examples/flutter_gallery

依存ライブラリの取得

1

flutter pub get

Flutter for Webのビルド

1

flutter build web

成果物をdocsフォルダへ移動

1

mv build/web docs

Githubのリポジトリの作成とpush

Githubにflutter_galleryリポジトリをpublicで作成

リポジトリ作成

リポジトリの初期化

1

git init

.gitignoreの作成

1
2
3
4


echo .dart_tool/ >> .gitignore
echo build/ >> .gitignore
echo .flutter-plugins >> .gitignore
echo .packages >> .gitignore

コミット

1
2


git add .
git commit -m "init"

リモートリポジトリの追加とpush

1
2


git remote add origin https://github.com/seiichi3141/flutter_gallery.git
git push origin master

Github Procject Pagesの公開

GithubのリポジトリのSettingsから、下のほうにあるGithub Pages設定を変更する。

設定変更

ページを開いて公開できているかを確認する。

https://blog.seiichirou.jp/flutter_gallery/

iframeのsrcとして指定するとウェブサイトに埋め込むことも可能になる。

1

<iframe src="http://blog.seiichirou.jp/flutter_gallery/"></iframe>

Flutterを使ったアプリをリリースしてます。良ければ使ってみてください。

環境

Flutter galleryのビルド

Githubのリポジトリの作成とpush

Github Procject Pagesの公開

Yom!青空文庫