2023/9/23

Flutterとは？インストール〜開発環境構築までの手順！プロジェクト作成

この記事からわかること

Flutterとは？
インストール方法と開発環境構築までの手順

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Flamingo
Xcode：14.3.1
Flutter：3.13.5
Mac M1：Ventura 13.5.2

Flutterとは？

FlutterとはiOS、Android、Webなどクロスプラットフォームで動作するアプリケーションを開発するためのフレームワークです。Googleが開発し、オープンソースなフレームワークになっています。

本来ならiOSならSwift、AndroidならKotlin、WebならPHPなどそれぞれ言語を習得する必要がありますが、Flutterでは「Dart(ダート)」と呼ばれる統一の言語を使用してそれぞれの環境で動作させることが可能です。

そのため開発コストを大幅に削減することができ、開発自体もビューを構築するためにウィジェットと呼ばれる単位で豊富に用意されているためデザインに富んだUI構築がスムーズに行うことができます。

デメリット

メリットが多く感じるFlutterですがデメリットも存在します。

ネイティブ機能を使いにくい

iOSやAndroidがそれぞれOSごとに持っている機能(カメラやBluetooth、位置情報など)を使用したい際にネイティブのコードを呼び出す必要がある場合があり、flutterとの統合が複雑になることがあります。

UIカスタマイズ

FlutterではGoogleが推奨するマテリアルデザインを活用することが可能ですが、プロジェクトに依存するようなデザインやアニメーションの実装が複雑になることがあります。

インストールする方法

FlutterをMacで利用できるようにするにはFlutter SDKをインストールする必要があります。公式サイトからダウンロードできるので自分のMacのCPUにあった方をダウンロードします。

公式リファレンス：macOSのインストール

※CPUを確認するには上部メニューの「」＞「このMacについて」＞「プロセッサ」か「チップ」の項目が「Intel Core i5」または「Apple M1」であるか確認する

「flutter」フォルダの移動

ダウンロードできた「flutter_macos_arm64_3.13.5-stable.zip」を解凍すると「flutter」フォルダが生成されます。現時点ではダウンロードフォルダの中にあるかと思いますので[ユーザー]/developmentディレクトリを作成してその中で管理するようにしていきます。

// developmentディレクトリの作成
$ mkdir ../development
// flutterを../development/.へ移動
$ mv flutter ../development/.

パスを通す

flutterコマンドが実行できるようにパスを通していきます。

$ vi ~/.zshrc
// viで開いた中に記述
export PATH=~/development/flutter/bin:$PATH

// 保存して閉じる
:wq

// 現在開いているターミナルに反映
$ source ~/.zshrc

これでインストール作業は完了です。正常にコマンドが実行できるか確かめてみます。

$ flutter --version 
Flutter 3.13.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 12fccda598 (3 days ago) • 2023-09-19 13:56:11 -0700
Engine • revision bd986c5ed2
Tools • Dart 3.1.2 • DevTools 2.25.0

開発環境の構築方法

flutterで両OSのアプリを開発できるようにするためにはそれぞれのIDE(統合開発環境)やライブラリなどをインストール、セットアップする必要があります。

必要になるもの

Xcode：Apple製アプリ用開発環境(IDE)
Android Studio：Android製アプリ用開発環境(IDE)
Cocoa Pods：Swiftライブラリ管理ツール
VS Code：エディタ
Chrome：ブラウザ

現時点で環境が整えられていないものはflutter doctorコマンドを実行すると教えてくれます。チェックマークが全てついていれば環境が整っていますが、ビックリマークやバツマークがついている場合は環境が整えられていないので別途インストール、セットアップが必要です。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.5, on macOS 13.5.2 22G91 darwin-arm64, locale
    ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.82.2)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

Android toolchain

後述するAndroid Studioがインストール済みなのに「Android toolchain」でエラーが起きた場合は以下の記事を参考に解消してください。

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.

「cmdline-tools component is missing」の解決法

「Android license status unknown」の解決法

Xcode：Apple製アプリ用開発環境(IDE)

XcodeはApple製のアプリ開発を行うための統合開発環境(IDE)です。アプリとして提供されているためApp Storeから簡単にインストールするこtが可能です。容量が大きくインストールに時間もかかるので注意してください。

おすすめ記事：Xcodeのインストール方法と使い方！終わらない時の対処法！

Android Studio：Android製アプリ用開発環境(IDE)

Android StudioはAndroid製のアプリ開発を行うための統合開発環境(IDE)です。公式サイトよりインストールすることが可能です。

Cocoa Pods：Swiftライブラリ管理ツール

Cocoa PodsはSwiftライブラリ管理ツールです。こちらはコマンドラインツールになるのでMacであればHomebrewなどを利用してインストールします。以下記事でHomebrewを使用したインストール方法を紹介しています。

VS Code：エディタ

VS Codeはプログラミング言語を記述するエディターツールです。公式サイトよりインストールすることが可能です。

プロジェクトの作成方法

ここまででFlutterの導入から開発環境の構築まで完了したので実際にプロジェクトを立ち上げてみます。作成したい階層に移動したらflutter create [アプリ名]コマンドを実行します。

$ flutter create testapp

無事コマンドが成功したら、Flutterプロジェクトが作成されているので階層プロジェクトルートに合わせます。

$ cd testapp

プロジェクトを起動させるにはflutter runコマンドを実行します。実行するとプロジェクトを起動する環境を問われる(mac or Chrome)ので該当の番号を入力します。

$ flutter run
// 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
No wireless devices were found.

[1]: macOS (macos)
[2]: Chrome (chrome)
Please choose one (or "q" to quit):

例えばMacで進めてみると1を入力後しばらくすると以下のようにデモプロジェクトが立ち上がります。起動中にターミナルにコマンドを入力することで特定の操作を行うことが可能です。

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

終了したい場合はqを入力すればプロジェクトを終了させることが可能です。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。