ふらっとFlutterをサワったー
公式の Get Started を参考にしながら,セットアップから開発に至るまでの工程をさらっと書きます.
FlutterSDK を入手する
https://flutter.dev/docs/get-started/install/macos#get-sdk
-
専用のディレクトリを作成
-
そこで Zip ファイルを解凍
unzip ~/Downloads/flutter_macos_2.2.0-stable.zip直下に
flutterってフォルダができて,そこで解凍される -
パスを追加（一時的）
export PATH="$PATH:`pwd`/flutter/bin"できた
flutterに対してパスを追加しているので,変更した場合は注意これで,flutter コマンドが使えるようになる
-
依存関係をインストール
flutter doctor
GitHub から Clone してもできるみたい
パスを更新する
https://flutter.dev/docs/get-started/install/macos#update-your-path
さっきは一時的にパスを追加しただけったので,いつでも,flutter コマンドを使えるようにしておこうな的なやつだと思う
echo $SHELL
で自分のシェルの種類を確認して,zsh なら,.zshrcに,bash なら.bashrcにパスを追加する
zsh だったので,ホームディレクトリに隠しファイルとしてある.zshrcの末尾に
export PATH="$PATH:$HOME/dev/flutter/bin"
を追記した.（これは,ホームディレクトリの dev の中に flutter を解凍した場合）
ここまでできるようになっていたことは,エンジニアとしての成長を感じる...
こんな感じで確認できれば OK
nob@nobMac ~ % echo $PATH
/Users/nob/dev/flutter/bin
nob@nobMac ~ % which flutter
/Users/nob/dev/flutter/bin/flutter
nob@nobMac ~ %
Xcode のインストール
https://flutter.dev/docs/get-started/install/macos#install-xcode
Mac なんで,Xcode があれば,
open -a Simulator
でシュミレーターが起動しました
いざ、Flutter
https://flutter.dev/docs/get-started/install/macos#create-and-run-a-simple-flutter-app
create-react-appみたいな呪文がある
flutter create first-fluter-app
でアプリを作成できるぜええええええええええええええ
って,ハイフン使えないんかい！
改めて
flutter create first_fluter_app
できたね
All done!
In order to run your application, type:
$ cd first_flutter_app
$ flutter run
Your application code is in first_flutter_app/lib/main.dart.
cd first_flutter_appしてflutter run
気がついたら起動してた.感動
スクショデカすぎな
コードをサワりたい
https://flutter.dev/docs/get-started/editor?tab=vscode
-
VSCode で Flutter の拡張機能を入れる.Dart の拡張機能も自動で入る
ここで FlutterSDK がないよと言われたりしたけど,VSCode 再起動でなんとかなった？
もしくは
Locate Path？みたいなので,インストールした SDK の場所を登録してあげるようは,Path が通っていなかったみたい
-
コマンドパレットで
Flutter：New ApplicationProjectを選択どこに作るかとか,名前とか入力できるので,やる,今回は
新規作成 -
lib/main.dart を開く
勝手に開いてくれるとか書いてあったけど開かないので,自分で開く
ここのコード全部消して位置から学ぶって感じかな
-
ちなみに
flutter runで起動してみたらさっきと同じカウントアップのアプリだった
初めてのアプリ開発
https://flutter.dev/docs/get-started/codelab
公式に教材がある神
無事 Hello world できた
flutter runで起動し直さないと,反映されなかったことが気になっているが,なにか方法あるよね
感想
React Native を始めてさわったときより,円滑だった（自身の成長もある）
あとは,ネイティブアプリ開発ってもっさりしているイメージを持っていたけど,思ったよりサクサクだった
公式がめちゃくちゃ優しい
例えばこの別のプラットフォームの開発者向けに説明しているページとか
Discussion