FlutterでiOS, Androidアプリ開発入門
本記事はmacOSユーザーを想定しています。
なぜFlutterなのか
- 技術的資産性が高い
- メンテナンスされている
- 学習コストが低い
Googleによるメンテナンス、発展の余地、クロスプラットフォーム、ホットリロードなど様々な要素から技術的な資産性が高いな〜と感じています
またβ版のFlutter for Webも気になります…！
【第一部】 環境構築編
環境
macOS 10.15 Catalina <- Xcode11をインストールするためにCatalina以上必須🔥
Xcode 11.4 <- Flutterで開発するためにXcode11以上必須🔥
Android Studio 4.0.1
iOS 13.3
Flutter 1.18
こちらのドキュメントに従ってインストールしていきます
https://flutter.dev/docs/get-started/install/macos
Flutterをインストール
ターミナルを開いてホームディレクトリに移動
$ cd ~
次のステップ 1. と 2. はgitからcloneすることで省略可能です。
$ git clone https://github.com/flutter/flutter.git
1. Download the Flutter SDK
Get the Flutter SDKからSDKをダウンロードします
https://flutter.dev/docs/get-started/install/macos
2. Locate the file
解凍したファイルを任意のディレクトリに置きます(とりあえずホームディレクトリにポンと置いておきます。)
$ unzip ~/Downloads/[flutter_macos_hoge.zip]
3. Add the flutter tool to your path
.zshrcに以下を記載
export PATH=＄HOME/flutter/bin:$PATH
sourceで反映
source .zshrc
4. (Optional) Pre-download development binaries
一応ダウンロードしておきます。
$ flutter precache
5. Run flutter doctor
Flutterがインストールされていることを確認します。
$ flutter doctor
Flutterのインストールが確認できました。
💡Tips ルートディレクトリ以外でflutterコマンドが認識されなかったりする場合はターミナルを再起動してみよう
iOS setup
1. Install Xcode
まだXcodeがインストールされていない場合は、Mac App Storeから事前にインストールしてください。
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
2. Set up the simulator
iOSデバイスのシュミレーターを立ち上げます
$ open -a Simulator
3. Create a simple Flutter app
いよいよアプリを作成！
作業用ディレクトリに移動
$ flutter create sample_app
$ cd sample_app
$ flutter run
💣 Error シミュレーターを起動していなかった場合
$ flutter run
No supported devices connected.
事前に立ち上げておく
$ open -a Simulator
💣 Error iPhoneを接続していた場合
実機で動かすにはセットアップが必要なので一旦はシミュレーターに頼ります
$ flutter run
More than one device connected; please specify a device with the '-d <deviceId>' flag, or use '-d all' to act on all devices.
k3ntar0-iPhoneXs • 00008020-001E1DAA26------ • ios • iOS 13.3
iPhone 11 Pro Max • 3B03E8AB-04A8-4CED-A35F-523900------ • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-3 (simulator)
$ flutter run -d <deviceId>
無事立ち上がりました！
4. Android Studioでビルド
先ほどはシミュレーターで動かしましたが、次は実機で動かせるようにします
iOSアプリをビルドするためにcocoapodsをインストールします
$ sudo gem install cocoapods
$ pod setup
基本的にIDEはAndroid Studioを選んでおけば間違い無いです
$ open . -a Android\ Studio
5. Xcodeでビルドする場合
（Android Studioの場合は不要）
a. pod setup
$ sudo gem install cocoapods
$ pod setup
b. Open Runner
RunnerのプロジェクトがXcodeで開きます
open ios/Runner.xcworkspace
c. Setup Xcode
XcodeはUIがめちゃくちゃわかりにくいので気を強く持ってください
- Runnerを選択
- Signing & Capabilitiesを選択
- Teamを設定
- Bundle Identifierを設定
このあたりは他の記事に説明を譲ります
d. Launch app in real iPhone
sample_app が追加されています！
第二部に続く👉
(coming soon)