FlutterアプリケーションをWebブラウザーで起動する flutter for web

Flutterというフレームワークを使うと、iOS、android両方で動作するアプリケーション（ネイティブアプリ）が作れます。

さらにさらに、Webブラウザーでも動作する優れものなんです。

今回は、Webブラウザーで動作させるための手順(MacOS)を説明します。

環境

Mac OS Big Sur 11.2.2

Flutter 1.26.0

Dart 2.12.0

このページでできるようになること

Flutterの初期アプリケーションをChromeで起動できるようにする。

手順

１、Channelをbetaに切り替える。

現在のChannelを確認するには、下記のコマンドを実行しchannelのあとが何かを確認します。

Flutter --version

Channelには

• • stable
  • beta

• dev
• master

が存在し、それぞれ機能に違いがあります。

参考：https://flutter.dev/docs/development/tools/sdk/releases

flutter channel beta

エラー発生

git: error: Your local changes to the following files would be overwritten by checkout:
git: 	packages/flutter/lib/src/material/dropdown.dart
git: Please commit your changes or stash them before you switch branches.
git: Aborting
Switching channels failed with error code 1.

コミットしていないものがあると発生するようですが、特にコミットしていないものもなく解決にかなり時間を要しましたが、

結果的には下記のファイルを一旦コメントアウトして再度実行すると新しくdropdown.dartが作成されてうまくbetaに切り替えできました。

packages/flutter/lib/src/material/dropdown.dart

２、SDKの最新化

flutter upgrade

3、Webブラウザを使用可能にする

flutter config --enable-web

これによりChromeが使用可能になります。

確認コマンド

flutter devices

４、Webサポート有効化

flutter create --org package_name .

５、Chromeで実行

flutter run -d chrome

無事、Webブラウザで起動できました。