Zenn
📱

ふらっとFlutterをサワったー

2021/05/26に公開
Flutter
setup
tech

公式の Get Started を参考にしながら,セットアップから開発に至るまでの工程をさらっと書きます.

https://flutter.dev/docs/get-started/install/macos

FlutterSDK を入手する

https://flutter.dev/docs/get-started/install/macos#get-sdk

  1. 専用のディレクトリを作成

  2. そこで Zip ファイルを解凍

    unzip ~/Downloads/flutter_macos_2.2.0-stable.zip

    直下にflutterってフォルダができて,そこで解凍される

  3. パスを追加（一時的）

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

    できたflutterに対してパスを追加しているので,変更した場合は注意

    これで,flutter コマンドが使えるようになる

  4. 依存関係をインストール

    flutter doctor

GitHub から Clone してもできるみたい

https://flutter.dev/docs/get-started/install/macos#downloading-straight-from-github-instead-of-using-an-archive

パスを更新する

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

  1. VSCode で Flutter の拡張機能を入れる.Dart の拡張機能も自動で入る

    ここで FlutterSDK がないよと言われたりしたけど,VSCode 再起動でなんとかなった？

    もしくはLocate Path？みたいなので,インストールした SDK の場所を登録してあげる

    ようは,Path が通っていなかったみたい

  2. コマンドパレットでFlutter：New ApplicationProjectを選択

    どこに作るかとか,名前とか入力できるので,やる,今回は新規作成

  3. lib/main.dart を開く

    勝手に開いてくれるとか書いてあったけど開かないので,自分で開く

    ここのコード全部消して位置から学ぶって感じかな

  4. ちなみにflutter runで起動してみたらさっきと同じカウントアップのアプリだった

初めてのアプリ開発

https://flutter.dev/docs/get-started/codelab

公式に教材がある神

無事 Hello world できた

flutter runで起動し直さないと,反映されなかったことが気になっているが,なにか方法あるよね

感想

React Native を始めてさわったときより,円滑だった（自身の成長もある）

あとは,ネイティブアプリ開発ってもっさりしているイメージを持っていたけど,思ったよりサクサクだった

公式がめちゃくちゃ優しい

例えばこの別のプラットフォームの開発者向けに説明しているページとか

https://flutter.dev/docs/get-started/flutter-for/web-devs

Discussion