Flutter を使用した Web アプリケーションの構築

コンテンツ

このページでは、Web サポートを開始するための次の手順について説明します。

を設定します。flutterWebサポート用のツールです。
Web サポートを使用して新しいプロジェクトを作成します。
Web サポートを使用して新しいプロジェクトを実行します。
Web サポートを備えたアプリを構築します。
既存のプロジェクトに Web サポートを追加します。

要件

Web サポートを備えた Flutter アプリを作成するには、次のソフトウェアが必要です。

flutterSDK。を参照してください。 flutterSDKインストール手順。
クロム; Web アプリのデバッグには必要なものがあります Chromeブラウザ。
オプション: Flutter をサポートする IDE。インストールできますVisual Studioコード、Androidスタジオ、インテリJアイデア。またFlutter プラグインと Dart プラグインをインストールする言語サポートとリファクタリング用ツールを有効にするため、 Web アプリの実行、デバッグ、リロードエディタ内で。見るエディターのセットアップ詳細については。

詳細については、「ウェブよくある質問。

Web サポートを使用して新しいプロジェクトを作成する

次の手順を使用できます Web サポートを使用して新しいプロジェクトを作成します。

設定

最新バージョンの Flutter SDK を使用するには、次のコマンドを実行します。

$ flutter channel stable
$ flutter upgrade

Chromeがインストールされている場合は、のflutter devicesコマンドの出力はChromeデバイスアプリを実行した状態で Chrome ブラウザを開きます。そしてWeb Serverアプリを提供する URL を提供します。

$ flutter devices
1 connected device:

Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150

IDE に次のように表示されるはずです。クロム（ウェブ）デバイスのプルダウンで。

作成して実行する

Web サポートを使用して新しいプロジェクトを作成することも同様ですよりも新しい Flutter プロジェクトの作成他のプラットフォームの場合。

IDE

IDE で新しいアプリを作成すると、自動的にアプリが作成されます iOS、Android、デスクトップ、アプリの Web バージョン。デバイスのプルダウンから選択しますクロム（ウェブ）アプリを実行して、Chrome で起動することを確認します。

コマンドライン

Web サポートを含む新しいアプリを作成するには (モバイルサポートに加えて)、次のコマンドを実行します。置き換えるmy_appプロジェクトの名前を付けて:

$ flutter create my_app
$ cd my_app

アプリを提供するにはlocalhostChromeでは、パッケージの先頭から次のように入力します。

$ flutter run -d chrome

のflutter runコマンドは、を使用してアプリケーションを起動します。開発コンパイラChrome ブラウザで。

建てる

次のコマンドを実行して、リリースビルドを生成します。

$ flutter build web

リリースビルドでは、ダーツ2js(の代わりに開発コンパイラ) 単一の JavaScript ファイルを作成するにはmain.dart.js。リリースモードを使用してリリースビルドを作成できます (flutter run --release) またはを使用してflutter build web。これにより、build/webディレクトリビルドされたファイルを含むassetsディレクトリ、一緒に提供する必要があります。

含めることもできます--web-renderer htmlまた--web-renderer canvaskitに HTML レンダラーまたは CanvasKit レンダラーをそれぞれ選択します。多くのための情報、参照Webレンダラー。

詳細については、を参照してください。Web アプリを構築してリリースする。

既存のアプリに Web サポートを追加する

既存のプロジェクトに Web サポートを追加するには以前のバージョンの Flutter を使用して作成された、次のコマンドを実行しますプロジェクトの最上位ディレクトリから:

$ flutter create --platforms web .