いい加減Flutterに入門してみる (1)

はじめに

Flutter やってみたいな、と思いつつ手をつけられてなかったので、年末の駆け込みで入門してみます。

普段はWebサービスを開発していますが、ネイティブアプリの開発は素人です。

やること

公式(https://docs.flutter.dev/codelabs) で初心者向けに紹介されている Codelab があったのでそれをやってみます。

Codelab の実施

以下の Codelab を進めていきます。
https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ja#0

本記事には個人的に実施したメモを残します。
個人の環境に依存する部分が多いため、実施される場合は codelab のページを直接ご参照ください。

1. はじめに

これから作るアプリの説明。ランダムで名前を生成するアプリのようです。

2. Flutter 環境をセットアップする

VisualStudio Code は既に入っているので、Flutter SDK をインストールします。

Mac で iOS 開発のため、以下の手順でセットアップ
https://docs.flutter.dev/get-started/install/macos/mobile-ios

Rosetta 2 のインストール

Apple silicon の場合、Rosetta 2 が必要ということなのでインストール

sudo softwareupdate --install-rosetta --agree-to-license

XCode のインストール

https://docs.flutter.dev/get-started/install/macos/mobile-ios#install-and-configure-xcode
https://apps.apple.com/us/app/xcode/id497799835?mt=12/

インストール後以下を実行

# コマンドラインで使うxcodeを設定
sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

# ライセンス同意
sudo xcodebuild -license

Git のインストール

導入済みのため省略

CocoaPods のインストール

Flutter Plugins をネイティブコードにビルドするために必要なようです。
https://cocoapods.org

# ruby: バージョン管理のインストール + セットアップ
brew install rbenv
eval "$(rbenv init - zsh)"
# rbenv install -l で最新バージョンを確認しインストール
# ruby: 本体のインストール
rbenv install 3.3.6
# ruby: 利用バージョンをセット
rbenv global 3.3.6

# cocoa podsのインストール
sudo gem install cocoapods

VisualStudio Code の Flutterプラグイン インストール

iOS デバイスを使うための設定

Apple ID と Apple Developer account の作成

Apple ID はすでにあるため省略。
Apple Developer account も現時点では不要 (ストアに公開する場合は $99 で加入する必要あり)

iPhone の Developer Mode を有効化

1. Mac に iPhone を接続し、「Trust」をクリック
2. 設定から「Developer Mode」を有効にする

開発用の証明書を有効化

この辺りはプロジェクトがないとできないため、一旦スキップ

3. プロジェクトを作成する

手順に沿ってプロジェクトを作成していきます。

変更箇所は PullRequest に残しています。
https://github.com/tgrhg/flutter_sample/pull/1

flutter_sampleという名前で新規作成

変更箇所が分かるようにするため、この時点で変更前のプロジェクトをGitHubに上げる。
gitignoreも作ってくれているので、そのままpushでok
https://github.com/tgrhg/flutter_sample

必要な変更を加える

詳しくは追々みていくとして、現時点ではコピペ(アプリ名称は修正要)で作成します。

• ./pubspec.yaml #アプリの基本情報
• ./analysis_options.yaml #linterの設定等
• ./lib/main.dart #アプリのコード

一度起動してみる

良かった。ちゃんと動いているようです。

おわり

インストールまわりで結構時間が掛かってしまったため、続きは次回にしたいと思います。
次回で終わらせたい。

つづき