flutter get started

アプリ開発の選択肢としてflutterも考慮できるようにしておきたい。いい機会なのでこれからしばらく学んでみようと思います。
今回は公式ドキュメントに従ってflutterのインストールからテストドライブまでをやってみます。

flutterのインストール

最近はmacOSに慣れてしまったのでこれでインストールします。windows, chromeOS...etcは割愛

1. ダウンロード

ここからSDKを選んでダウンロード&解凍

Users/{ユーザ名}/flutter

おそらくどこでもいいと思うがユーザ直下に配置しました。

２. パスを通す

flutterツールをパスに追加。ダウンロード確認のためバージョンコマンドを叩きます。

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

いけてそう！

3. 依存関係の確認

インストールする必要がある依存関係があるか確認するためにフラッタードクターを実行する。doctorなどコマンドラインツールの詳細はこちら

flutter doctor　-v

ios, abdroid開発のためのツールが入ってなさそうなので追加しましょう

ios環境のインストール

こちらの手順通りに実行してみる。

1. xcodeをインストール

MacAppStoreよりインストール。その後新しくインストールされたバージョンのXcodeを使用するようにする。

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

2. iOSシミュレータをセットアップする

open -a Simulator

「シミュレータが 64 ビットデバイス (iPhone 5s 以降) を使用していることを確認してください」とのこと。iPhone14ProMaxだった。問題なさそうなのでok

3. iOS デバイスに展開する

iosデバイスは持っていないので割愛します...

4. cocoapodsのインストール

公式

sudo gem install cocoapods

エラーになった...アクティブサポートのバージョンをインストールしてからもっかい実効しろとのことなのでやってみる。

gem install activesupport -v 6.1.7.4

エラーになった...システムのrubyを利用しているため、権限不足でgemのインストールができないとのこと。こちらを参考に解決しました。

アクティブサポートのバージョンをインストールを再実行。

gem install activesupport -v 6.1.7.4

いけた。cocoapodsのインストールを再実行。

sudo gem install cocoapods

いけた。確認。

flutter doctor -v

Xcode周りは完了！！

android環境のインストール

こちらの手順通りに実行してみる。

1. Android Studioをインストールする

Android Studio セットアップウィザードに従ってからdoctorコマンドで確認。

Android toolchainがいくつかつつかれてる...

2. cmdline-tools component is missing

こちらで解決。Anroid SDK Command-line Toolsを追加する。

3. ライセンスに同意する

コマンドを叩いてyesをしていく

flutter doctor --android-licenses
flutter doctor -v

Android Studio周りは完了！！

エディターをセットアップする

こちらの手順通りに実行してみる。

flutterライブラリをインストール。確認のためにコマンドパレットから「Flutter: Run Flutter Doctor」を選択すると

Could not find a Flutter SDK. Please ensure flutter is installed and in your PATH (you may need to restart).

と怒られるので、flutter/binをフォルダを指定すればOK。

Test drive

コマンドパレットから　Flutter: New Project > Applicationを選択。ディレクトリとアプリは以下に作成しました。

Users/{ユーザ名}/flutter_dev/my_app

VSCode右下のデバイスセレクターを選択

実行とデバッグからデバック開始を押すと数分ビルドに要したのちデモアプリが立ち上がる。

ホットリロードを試してみる。

文字列を変更して保存すると即時で反映されます。今回の目的はこれで達成。お疲れ様でした！！

NEXT STEP

https://docs.flutter.dev/get-started/codelab
公式だと「初めての Flutter アプリを作成する」に続くようです。どこか時間を見つけてやってみようと思います。

最後に運動通信社について

運動通信社は「日本を世界が憧れるスポーツ大国にする」というビジョンを達成するべく、一緒に働く仲間を募集しています！
PMやアプリエンジニア、Webエンジニアなど色んな職種を募集しておりカジュアル面談大歓迎なので是非採用フォームよりご連絡ください！
ぜひ一緒に、自分たちも世の中もワクワクするサービスを作りましょう！

最近Greenも公開されました。