Contents
Building a web application with Flutter
This page covers the following steps for getting started with web support:
このページはwebサポートをスタートするための次のステップをカバーします。
- webサポートのためのflutterツールを設定します。
- webサポートのある新しいプロジェクトを作ります。
- webサポートのある新しいプロジェクトを実行します。
- webサポートのあるアプリを作ります。
- 既存のプロジェクトにwebサポートを追加します。
Requirements
webサポートのあるFlutterアプリを作るには、下記のソフトウェアが必要です。
Flutter SDK。Flutter SDKインストールページをご覧ください。
Chrome;webアプリをデバッグするのにChromeブラウザが必要です。
FlutterをサポートしているIDE(統合開発環境)(無くても可能)。
You can install Android Studio, IntelliJ IDEA, or Visual Studio Code and install the Flutter and Dart plugins to enable language support and tools for refactoring, running, debugging, and reloading your web app within an editor. See setting up an editor for more details.
さらなる情報はweb FAQをご覧ください。
Create a new project with web support
You can use the following steps to create a new project with web support.
webサポート有りの新しいプロジェクトを作るために以下のステップでやっていきます。
Set up
Run the following commands to use the latest version of the Flutter SDK:
最新バージョンのFlutter SDKを使うために以下のコマンドを実行します。
flutter channel stable
flutter upgrade
If Chrome is installed, the flutter devices command outputs a Chrome device that opens the Chrome browser with your app running, and a Web Server that provides the URL serving the app.
Chromeがインストールされている場合、flutter devicesコマンドは、アプリが実行されている状態でChromeブラウザーを開くChromeデバイスと、アプリを提供するURLを提供するWebサーバーを出力します。
In your IDE, you should see Chrome (web) in the device pulldown.
IDEでは、デバイスのプルダウンにChrome（web）が表示されます。
Create and run
Creating a new project with web support is no different than creating a new Flutter project for other platforms.
webサポート有りの新しいプロジェクトの作り方は、アプリ版のFlutterプロジェクトの作り方と違いはありません。
IDE
Create a new app in your IDE and it automatically creates iOS, Android, and web versions of your app.
IDEで新しいアプリを作りましょう。そうすれば自動的にiOS、Android、そしてwebバージョンのアプリが生成されます。
(And macOS, too, if you’ve enabled desktop support.)
(desktop supportをできるようにしていればmacOSアプリも自動的に生成されます。)
From the device pulldown, select Chrome (web) and run your app to see it launch in Chrome.
デバイスのプルダウンからChrome (web) を選択して、Chromeブラウザでアプリが起動されるのを確認しましょう。
Command line
工事中🏗
❗️warning:Hot reload(ホットリロード)は現時点(2021年3月時点)ではweb browserではサポートされていません。hot restart(ホットリスタート)はサポートしています。
Build
Run the following command to generate a release build:
下記のコマンドを実行してリリースビルドを生成します。
flutter build webA release build uses dart2js (instead of the development compiler) to produce a single JavaScript file main.dart.js.
リリースビルドは、一つのJavaScriptファイル「main.dart.js」ファイルを生成するために、(development compilerの代わりに)dart2jsを使います。
You can create a release build using release mode (flutter run --release) or by using flutter build web.
リリースモード（flutter run –release）を使用するか、flutter build webを使用して、リリースビルドを作成できます。
This populates a build/web directory with built files, including an assets directory, which need to be served together.
これにより、build/ webディレクトリに、一緒に提供する必要のあるassetsディレクトリを含むビルドファイルが入力されます。
–web-renderer html
または
–web-renderer canvaskit
を含めて、それぞれHTMLまたはCanvasKitレンダラーから選択することもできます。 詳細については、Webレンダラーを参照してください。
詳しい情報は、Build and release a web appをご覧ください。
Add web support to an existing app
最新ではないFlutterバージョンを使って作られた既存のプロジェクトに対してwebサポートを追加するには、下記のコマンドをあなたのプロジェクトのディレクトリで実行してください。
flutter create .
参考