環境
Mac OS X ver10.14.5
参考URL
- Flutter for web 環境構築手順 -- https://qiita.com/snyt45/items/e1b1e6d1d74cb006237e
- flutter公式 -- https://flutter.dev/docs/get-started/install/macos
- Flutter for web公式 -- https://github.com/flutter/flutter_web#getting-started
- Flutter Webを動かしたときにつまづいたこと -- https://qiita.com/Nkzn/items/402a29fe9bb517ce78aa
基本的に、flutter公式を元に対応。
自分の行った手順を記述します。
Flutter SDKを入手する
https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.12.13+hotfix.9-stable.zip
※2020年4月21日現在 flutter_macos_v1.12.13+hotfix.9-stable
ダウンロード後、以下を実施
$ mkdir ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.12.13+hotfix.9-stable.zip
Flutterのパスを通す
Flutterのパスを通すために、展開したflutterを移動します
$ mv development/flutter /usr/local/var/
bash_profileに以下を追記
$ vi ~/.bash_profile
===以下追記===
export PATH=$PATH:/usr/local/var/flutter/bin
以下で更新
$ source ~/.bash_profile
無事Flutterがインストールできました
$ flutter --version
Flutter 1.12.13+hotfix.9 • channel stable •
https://github.com/flutter/flutter.git
Framework • revision f139b11009 (3 weeks ago) • 2020-03-30 13:57:30 -0700
Engine • revision af51afceb8
Tools • Dart 2.7.2
Flutter for webを試す
参考サイト様の通り行おうと思ったのですが、すでにFlutter for webのgitはold扱い。
以下のreadmeを参考に進めてみます。
https://github.com/flutter/flutter_web/blob/master/OLD_README.md
flutter_webビルドツールをインストールする
以下コマンドでインストールを実施
$ flutter pub global activate webdev
で、インストール後、私は以下の表示が出ました。
export PATH="$PATH:/usr/local/var/flutter/.pub-cache/bin"
ので、例のごとく、パスを通します。
あと、このままreadmeの通り続けてしまうとこのあと詰まったので、２つのパスを通しておきます。
$ vi ~/.bash_profile
===以下追記===
export PATH=$PATH:/usr/local/var/flutter/.pub-cache/bin
export PATH=$PATH:/usr/local/var/flutter/bin/cache/dart-sdk/bin
以下で更新
$ source ~/.bash_profile
hello worldを実行する
まず、任意のディレクトリでgitをcloneしましょう
私は、先程作成したdevelopmentの配下にクローンしました。
$ cd ~/development
$ git clone git@github.com:flutter/flutter_web.git
クローンが成功すると、以下のようになりましたね。
$ ls
flutter_web
hello_worldのディレクトリへ移動します
$ cd flutter_web/examples/hello_world/
移動したら、以下を実行
$ flutter pub upgrade
以下も実行します。
$ pub get
最後に、以下を実行してサーバを起動
$ webdev serve
私の場合は、http://127.0.0.1:8080 へアクセスし、Hello Worldが赤文字で出力されれば成功です。
以上です。