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も公開されました。