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

Flutter 1.9でFlutter for Webが統合されたので再び軽く触ってみた

More than 1 year has passed since last update.

Flutterをmaster channelに変更する

master channelでないと動かないようなので、master channelに変更する。

$ flutter channel master

Flutterを1.9以上に上げる

flutterを1.9以上にする必要があるので、flutter upgradeで使っているflutterのバージョンを上げる。

$ flutter upgrade

Webサポートを有効にする

$ flutter config --enable-web

flutter config --enable-webの実行により下記のファイルに"enable-web": trueが追加されます。ファイルが存在しない場合には、ファイルが作成されて追記されます。

~/.flutter_settings
{
  "enable-web": true
}

プロジェクトを作成する

flutter createでも、Android Studio等からのGUI生成でも好きなやり方でプロジェクトを作成。

$ flutter create integrated_flutter_web

初めからwebディレクトリが追加されるようになります。
スクリーンショット 2019-09-11 21.49.42.png

deviceにchromeが追加されます。
スクリーンショット 2019-09-11 21.50.35.png

Web版を実行して表示する

$ flutter run -d chrome

スクリーンショット 2019-09-11 21.54.56.png

リリースビルドを実行する

$ flutter build web

注意点等

  • リポジトリが統合されただけでテクニカルプレビューである点は変わらないです。
  • flutter_webからのマイグレーションはこちら
  • ホットリロードは対応してない模様

参考

Flutter Web FAQ
Building a web application with Flutter

関連

最近試したもの

昔試したもの

統合されたのでwebdevコマンド使っている箇所はすべて読み替える必要があります。
諸々更新されているので、今も正しいやりかたか(当時も実験としてやっていたので正しかったか)はわかりません。

hiko1129
サーバサイド寄りの人
https://note.hiko1129.com/
game8
ゲーム攻略メディア「Game8」の運営をメイン事業に、ライフスタイルメディア運営、動画配信事業、広告事業を展開しています。
https://game8.co.jp
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