【5分で分かる】Flutterの導入手順 | Flutter入門

この記事ではmacOSにおけるFlutterの始め方及び導入手順について説明します。

こちらの導入手順については前提として以下のシステム要件が満たされていることを前提としています。

FlutterのSDKを取得する

SDKをダウンロードする

以下のリンクよりmacOSに対応するファイルをダウンロードします。

「Stable channel (macOS)」の最新版をダウンロードしてください。

Flutter SDK releases

All current Flutter SDK releases, stable, beta, and master.

SDKファイルを任意の場所で解凍する

ダウンロードファイルを任意の場所に置いて解凍してください。

 cd ~/development
 unzip ~/Downloads/flutter_macos_2.0.6-stable.zip

パスを通す

解凍したFlutterが使用できるようにパスを通します。

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

Flutterの実行

以下のコマンドでFlutterのパスが通っているかを確認できます。

flutter doctor

ちなみに上記のコマンドは、あなたの環境がFlutterを使って開発できる環境かどうかを診断してくれるツールになります。

例えば以下のような診断結果が表示されます。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.5, on macOS 11.1 20C69 darwin-x64, locale
    en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.56.0)
[✓] Connected device (1 available)

• No issues found!

私の環境ではすでにAndroid Studio,Xcode,Chrome,VS Codeがすでに導入されているため全ての項目において問題ないことが上記で示されています。

おそらく現状ではなにかしらの項目でチェックがつかない状況かと思いますので、この後の手順で解決していきましょう。

開発環境のセットアップ

FlutterはiOS、Androidの両方の開発をサポートしています。

したがってFlutterで作ったアプリの最終的な動作確認は、各OSをサポートした開発ツールで確認することになりますのでxcodeとAndroid Studioをインストールする必要があります。

Xcodeをインスールする

最新バージョンのxcodeをインストールする

MacのApp Store、もしくはXcodeのWebページより最新バージョンのXcodeをインストールします。

新しいバージョンのXcodeを使用するようにパスを変更する

以下のコマンドを実行してXcodeコマンドラインツールが必ず新しいバージョンのXcodeを使用するようにします。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

ライセンスの締結をする

Xcodeを一度開いてライセンス規約に同意するかコマンドラインで以下を実行してライセンスを確認してください。

 sudo xcodebuild -license 

iOSシュミレーターのセットアップ

シュミレーターを起動する

以下のコマンドを実行してシュミレーターを起動します。

open -a Simulator

以下のようにシュミレーターが起動します。

シュミレーターのデバイス状況を確認する

シュミレーターの上部に端末の情報が書かれていますので、「iPhone 5s以降のものであるか」を確認します。

シンプルなFlutterアプリを作成して実行する

Flutterプロジェクトの作成

以下のコマンドでFlutterプロジェクトを作成する

flutter create my_app

以下のようなメッセージが表示されたら成功です。

All done!
In order to run your application, type:

  $ cd my_app
  $ flutter run

To enable null safety, type:

  $ cd my_app
  $ dart migrate --apply-changes

Your application code is in my_app/lib/main.dart.

Flutterプロジェクトのディレクトリに移動する

以下のコマンドでFlutterプロジェクトのディレクトリTOPに移動します。

cd my_app

Flutterの実行

以下のコマンドよりFlutterを実行できます。

flutter run

以下のようにアプリが立ち上がれば成功です。

IOSの実機で動作確認をしたい場合

実機の端末でFlutterアプリの動作確認を行いたい場合、Apple Developer accountの登録が必要になります。（※実機での動作確認であれば無料）

またFlutterアプリのプラグインによっては、iOSのネイティブ言語であるObjective-C,Swiftのバージョン依存が発生する可能性があるため依存関係を管理するためにCocoaPodsを導入する必要があります。

CocoaPodsの導入

以下のコマンドでCocoaPodsの導入が可能です。

※もし、ネイティブ言語の依存関係が発生しないようであればこちらのプロセスはスキップしても問題ありません。

sudo gem install cocoapods

実機でFlutterアプリを実行する

以下のコマンドで接続されているiPhoneのデバイスIDを取得します。

flutter devices

以下のコマンドでアプリを実行します。

flutter run -d <デバイスID>

初回はエラーになりますので、表示されている案内にしたがって登録を続けることにより実機での実行が可能です。

Androidシュミレーターのセットアップ

Android Studioをインストールする

以下のリンクよりAndroid Studioをダウンロードしてください。

Download Android Studio & App Tools - Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

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

Preferences->PluginsからFlutterをインストール

1. Preferences->Pluginsを選択
2. 検索ボックスにFlutterと入力
3. 出てきたFlutterをインストール

デバイスのエミュレーターを導入する

Create New Flutter projectを選択

Flutter Applicationを選択してNextを押下

Project nameは任意の名前で入力しNextを押下

Company domainは任意の名前で入力しFinishを押下

エディタが表示されるのでメニューバーのTools->AVD Managerを選択

Create Virtual Deviceを押下

任意のDeviceを選択してNextを押下

任意のOSをDownloadを押下し、ダウンロードが完了したらFinishを押下

エミュレーターを実行する

エディタの▶︎ボタンを押下することでエミュレーターが起動します。

以上でFlutterの環境構築は全て完了しました！お疲れ様でした！

Flutterの勉強方法を公開しています！

Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。

この機会に是非ご参考ください！

2022年 Flutterの学習方法(学習サイト5選) ども、木村です。本業はデータサイエンティスト。副業でアプリ開発をしています。 本記事では、効率的なFlutterの学習方法につい...