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で起動できるようにする。

 

手順

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

 

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

Flutter --version

 

Channelには

    • stable
    • beta
  • dev
  • master

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

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

Channelをbetaに切り替えるコマンドは下記です。

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

 

2、SDKの最新化

flutter upgrade

 

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

flutter config --enable-web

 

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

確認コマンド

flutter devices

 

4、Webサポート有効化

flutter create --org package_name .

 

5、Chromeで実行

flutter run -d chrome

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

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

仕事以外でも収入が欲しい方

まずは、こちらを読んでみてください。読むのはもちろんタダです。自分にあったものがきっと見つかるはず。



無在庫販売でお小遣い稼ぎしませんか?






初心者も多数使っているので安心して始められます。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

モットーはスティーブ・ジョブズのStay hungry Stay Foolish. 野心を持って正しい方法を身につければ誰でも成功できることを証明していきます。 本職以外で収入を得たい方の手助けができればと思います。