Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
55
Help us understand the problem. What are the problem?

posted at

updated at

Flutter for Webの環境構築手順

1. はじめに

Flutterでwebアプリを作れる、Flutter webがベータ版に昇格すると発表がありました。これにより、従来こちらで管理されていたコード類がメインラインにマージされ、仕組みも変わっています。来年あたりに正式版リリースという感じでしょうか。

2021/3/4

Flutter Engage (2021)で正式版にアップデートされました! Flutter 2.0以降はstableチャンネルでも利用できます!

2. 環境構築の手順

2021/3/4時点の最新手順です、LinuxとmacOSの両方で試しています。

※webdevを使うやり方はα版までの古いやり方です!

2.1 Flutter SDKインストール

リポジトリからcloneした後は、適当なパスに配置します。

$ git clone https://github.com/flutter/flutter
$ sudo mv flutter /usr/local/

パスを通します。

$ sudo nano /etc/paths
上記の例だと、/usr/local/flutter/binをファイルに追記

2.2 Flutter for webを使う設定

$ flutter config --enable-web

2.2.1 補足

flutter configコマンドで~/. flutter_settingsファイルの内容が書き換わります。

$ cat ~/.flutter_settings 
{
  "enable-linux-desktop": true,
  "enable-macos-desktop": true,
  "enable-web": true
}

2.3 実行可能なデバイスを調べる

Chromeブラウザをインストール済みであれば、以下のようにchromeとweb-serverの2つが見えるはずです。

$ flutter devices
Downloading package sky_engine...                                   0.2s
Downloading common tools...                                         0.6s
Downloading common tools...                                         0.6s
Downloading linux-x64 tools...                                      2.0s
2 connected devices:

Chrome     • chrome     • web-javascript • Google Chrome 78.0.3904.108
Web Server • web-server • web-javascript • Flutter Tools

3. サンプルプログラムの実行

$ cp -rf /usr/local/flutter/examples/flutter_gallery .
$ cd flutter_gallery

3.1 Chromeで表示する場合

$ flutter run -d chrome

Launching lib/main.dart on Chrome in debug mode...
Building application for the web...                                14.0s
Attempting to connect to browser instance..                         4.1s

Warning: Flutter's support for web development is not stable yet and hasn't
been thoroughly tested in production environments.
For more information see https://flutter.dev/web

🔥  To hot restart changes while running, press "r". To hot restart (and refresh the browser), press "R".
For a more detailed help message, press "h". To quit, press "q".
Debug service listening on ws://127.0.0.1:51377/ZKlc4siyG-g=

スクリーンショット 2019-12-17 22.52.09.png

3.2 webサーバーを立ち上げる場合

$ flutter run -d web-server
Running "flutter pub get" in flutter_gallery...                    24.1s

Launching lib/main.dart on Web Server in debug mode...
Building application for the web...                                36.5s
lib/main.dart is being served at http://localhost:51281/

Warning: Flutter's support for web development is not stable yet and hasn't
been thoroughly tested in production environments.
For more information see https://flutter.dev/web

🔥  To hot restart changes while running, press "r". To hot restart (and refresh the browser), press "R".
For a more detailed help message, press "h". To quit, press "q".

その後、任意のブラウザでhttp://localhost:51281/を開く

3.3 Chromiumブラウザを利用する場合

Chromeブラウザの代わりに、そのベースであるChromiumブラウザを利用することも可能です。その場合、以下のようにブラウザ実行の環境変数を設定します。あとはChromeブラウザの場合と同じ手順です。

$ export CHROME_EXECUTABLE=${chromiumブラウザのバイナリのインストールパスを指定}
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
55
Help us understand the problem. What are the problem?