[Flutter] ずぼらアプリ開発者の味方!Flutter導入方法! [mac]

普通に作るとiosandroidのそれぞれのアプリを作らなきゃいけないのがアプリ開発の辛いところ。

企業ならまだしも、個人で二つも作るなんてめんどくさ過ぎます!!!

そんなずぼら開発者にオススメのクロスプラットフォームフレームワーク、Flutterをオススメします。

Flutterは2018年6月に正式リリースがされた新しいアプリ制作のフレームワークです。

注意
この情報は2018年11月23日時点のものになります。日にちがたち過ぎていると情報が古く役に立たない恐れがあることをご了承ください!!!

Flutter導入方法

Get Started: Install on macOS – Flutter

上記サイトの通りに導入していきます。

推奨環境

Flutterをインストールして実行するには、開発環境が次の最小要件を満たしている必要があります。

  • OS:macOS(64ビット)
  • ディスク容量:700 MB(IDE /ツールのディスク容量は含まれません)。
  • Tools:Flutterは、ご使用の環境で使用可能なこれらのコマンドラインツールに依存します。
    bash、mkdir、rm、git、curl、unzip、which

見たことのないツールところに見たことのないコマンドがあって、難しそうと思うかもしれませんが、コピペでいけるので大丈夫です(^^)

Flutter SDKを入手

Flutter SDKの最新ベータ版を入手するには、こちらからZIPファイルをダウンロードしてください。(verの数値は画像と違うこともあります)

次にZIPファイルをコマンドで解凍します。

下のサンプルコマンドは、

/Users/homepc/development に先ほどダウンロードしたZIPファイルを展開します。

cd ~/development
unzip ~/Downloads/flutter_macos_v0.11.9-beta.zip

特にこだわりがないならターミナルにコピペでOKです!

解凍が終わったらパスを通します。

パスを更新する

(パスやbash_profileに関してはこちらをご覧ください。bash_profileは10回くらい使ってだんだんと理解する所のような気がします。)

Flutterの存在をパソコンに認識させましょう!

ターミナルに次のコマンドを実行します。

(パスワードを聞かれるので入力します。入力してないように見えるのがデフォルト。パスワードはログインのと同じことがほとんど)

sudo vi $HOME/.bash_profile

するとエディタのようになるので下の記述を追加します。

export PATH=$PATH:`pwd`/flutter/bin

`pwd`はそのまま入力するのではなく、例えばcd ~/developmentを実行していれば、 `pwd`=/Users/homepc/development になります。

pwdコマンドは今いるディレクトリの位置を知るときに使うコマンドです。

こういうことですね〜

export PATH=$PATH:/Users/homepc/development/flutter/bin

では、追加が終わったらファイルを閉じます。

ESCキー ▶️ :(セミコロンだけ入力)⏩ wq (左下にでる) ➡︎ Enter

でファイルを上書き保存できます。(詳しくはviで検索!!)

それでは、下のコマンドをターミナルで実行して、ファイルを読み込ませます。

source $HOME/.bash_profile

確認のため、下のコマンドをターミナルで実行します。

echo $PATH

たくさん文字が出るかもしれませんが、Flutterの文字を見つけられればOKです。

iOS setup

では、続いてios開発の環境構築していきましょ〜

Install Xcode

iOS用のFlutterアプリケーションを開発するには、Xcode 9.0以上のMacが必要です。

  • Xcode 9.0以降をインストール
  • 新しくインストールしたXcodeのバージョンとXcodeのコマンドラインツールを同バージョンに設定するには、ターミナルから次のコマンドを実行します。
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

これは、Xcodeの最新バージョンを使用する場合、ほとんどの場合の正しいパスです。異なるバージョンを使用する必要がある場合は、代わりにそのパスを指定してください。

  • Xcodeを一度開き、コマンドラインから次のコマンドを実行し、Xcodeライセンス契約が署名されていることを確認してください。
sudo xcodebuild -license

スペースを押しまくるとスクロールして、次のメッセージが出ます。

By typing 'agree' you are agreeing to the terms of the software license agreements. Type 'print' to print them or anything else to cancel, [agree, print, cancel] agree

agree を入力して、署名を確認したことになります。

(読まなくても、読んでも結局、確認する必要があるので、、、)

さて、これでXcodeを使用し、シミュレータでFlutterアプリケーションを実行できます。

iOSシミュレータを設定する

iOSシミュレータでFlutterアプリケーションを実行してテストするには、次の手順に従います。

  • Macでは、Spotlight経由でSimulatorを検索するか、次のコマンドを使用します。
open -a Simulator
  • シミュレータのHardware > Deviceメニューの設定を確認して、シミュレータが64ビットデバイス(iPhone 5s以降)を使用していることを確認します
  • あなたの開発マシンの画面サイズによっては、シミュレートされた高密度のiOSデバイスが画面をオーバーフローさせる可能性があります

Android setup

Android Studioのインストール

  1. Android Studioをダウンロードしてインストールします。
  2. Android Studioを起動し、「Android Studioセットアップウィザード」を実行します。 Android向けに開発する際にFlutterが必要とする最新のAndroid SDK、Android SDK Platform-Tools、Android SDK Build-Toolsがインストールされます。

Androidエミュレータを設定する

AndroidエミュレータでFlutterアプリケーションを実行してテストするには、次の手順を実行します。

  1. VMアクセラレーションを有効にします。
  2. Android Studio > Tools > Android > AVD Managerを起動し、Create Virtual Deviceを選択します。
  3. デバイス定義を選択し、[次へ]を選択します。
  4. エミュレートするAndroidバージョンのシステムイメージを1つ以上選択し、[次へ]を選択します。 x86またはx86_64イメージを推奨します。
  5. エミュレートされたパフォーマンスで、ハードウェアアクセラレーションを有効にするには、Hardware – GLES 2.0を選択します。
  6. AVDの設定が正しいことを確認し、[終了]を選択します。上記の手順の詳細については、「AVDの管理」を参照してください。
  7. Android仮想デバイスマネージャで、ツールバーの[実行]をクリックします。エミュレータが起動し、選択したOSバージョンとデバイスのデフォルトキャンバスが表示されます。

これでiosとandroidのシュミレーターでアプリを動かす準備が整いました!

では、両方のシュミレータでアプリを動かしてみます!

vsCodeでFlutterを管理する

Flutterでアプリケーションを構築するには、コマンドラインツールと組み合わせたテキストエディタを使用します。ただし、エディタプラグインを使用することをお勧めします。これらのプラグインは、コード補完、構文ハイライト、ウィジェット編集アシスト、実行とデバッグのサポートなどを提供します。

Android Studio、IntelliJ、またはVS Codeのエディタプラグインを追加するには、以下の手順に従ってください。

ここではvsCodeを使っていきます。(Android Studio / IntelliJはこちら)

Install VS Code

VSコードはFlutterアプリケーションの実行とデバッグをサポートする軽量エディタです。

こちらからインストールしてください。

FlutterとDartのプラグインをインストールする

  1. VSコードを開始します。
  2. 表示>コマンドパレット…を呼び出します。
  3. 「インストール」と入力し、下の方の「拡張機能:拡張機能をインストール」を選択します。
  4. 表示された拡張機能の検索フィールドに「flutter」と入力し、リストで「Flutter」を選択し、「インストール」をクリックします。これにより、必要なDartプラグインもインストールされます。
  5. [再ロード]をクリックして[アクティブ化]をクリックし、VSコードを再起動します。

Flutter Doctorで設定を検証する

  1.  [表示]> [コマンドパレット]を呼び出します。
  2. ‘doctor’と入力し、Flutter:Run Flutter Doctorを選択します。
  3. OUTPUTの出力を見直してください。

このようになれば問題ありません。

[flutter] flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.11.9, on Mac OS X 10.13.6 17G3025, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.2)
[✓] VS Code (version 1.29.1)
[✓] Connected device (1 available)

• No issues found!
exit code 0

Flutterプロジェクトの作成

新しいプロジェクトを作成する

Flutterテンプレを新しいFlutterプロジェクトを作成するには:

  1. コマンドパレットを開きます(Ctrl + Shift + P(MacOSではCmd + Shift + P))。
  2. Flutter:New Projectコマンドを選択し、Enterを押します。
  3. プロジェクト名を入力します。
  4. プロジェクトの場所を選択します。

ちなみに、テンプレプロジェクトができるのめちゃめちゃ早いです!(^ ^)

コードの編集と問題の表示

Flutter拡張機能は、次のことを可能にするコード解析を実行します。

  • シンタックスハイライト
  • 豊富な型分析に基づくコード補完。
  • すべての現在のソースコードの問題を表示する(View> ProblemsまたはCtrl + Shift + M(MacOSではCmd + Shift + M))。該当の問題が表示されます。

シュミレーターで動かす

では、サンプルプロジェクトを作成できたので、実際にシュミレーターで動かしてみます。

Flutterは最近使ったデバイスを自動的開くようです。

ここでiOSとandroidどちらのシュミレーターでも動かしたいなら先に起動しておく必要があります。

vsCodeを先ほどプロジェクトを作成したフォルダにカレントディレクトリを移してからflutter run -d all 実行してください。

(-d all は全てのデバイスで実行するというオプションコマンドです)

こんな風に出れば成功です!

プラスボタンをタップすると真ん中の数字が増えていきます!

ホットリロード

実行したら、ターミナルにこんなメッセージが出ているかもしれません。

To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on iPhone XR is available at: http://127.0.0.1:60335/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

running実行中にホットリロードするには、 “r”をターミナルに入力します。 ホットリスタート(およびリビルド)するには、 “R”を入力します。iPhone XR上のObservatoryデバッガとプロファイラは、http://127.0.0.1:60335/で利用できます。より詳細なヘルプメッセージを表示するには、”h”を押します。 デタッチするには、 “d”を押します。 終了するには、”q”を押します。

要するに変更をシミュレーターに反映したいならターミナルで r を入力すればOKということです。

rをいちいち入力しなくても更新する方法があるので詳しくはこちら

ざっくりFlutterのホットリロードについてより詳しく!
  • ファイル更新のタイミングでホットリロードしたいならデバックモードにする
  • 状態が保持されるため、変更によりおかしくなることがある。大きな変更はホットリロードに向かないが、細かい変更にはありがたい機能

Angularやreactのホットリロードは状態を保持しないため、このようなホットリロードは新鮮な気がします。まあ、いいことばかりではない気がしますね。

Summary

Flutterをシュミレーターで実行するところまで見てきました!

アプリ開発に興味がある皆さんのお役に立てていれば良いんですがぁ

ここまでお疲れ様でした!🎉🎉🎉

シェアする

  • このエントリーをはてなブックマークに追加

フォローする