Flutterを少し動かしてみる

犬も歩くとFlutterに当たるご時世になってきました。
ので、Flutterを少し動かしてみました。
（デフォルトプロジェクトを起動させるまでのメモ記事です）

まずは公式に突撃します。
https://flutter.dev

だいたい、Get startedの文字を探すと良いです。

Macユーザならここですね。
https://flutter.dev/docs/get-started/install/macos

## Get the Flutter SDK

コマンドラインを使っているので、これぐらいの知識は必要そうです。
https://prog-8.com/lessons/commandline/study/1

> 3\. Add the flutter tool to your path
> `export PATH="$PATH:``pwd``/flutter/bin"`

ここが気持ち、慣れてないと難しいかもですね。

`~/.zshrc` というファイルに、以下の内容を書き足します。

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

ほかのケースでもよくありますが今回でいうと
次のステップの `flutter` コマンドを使うためにやっていることですね

## Run flutter doctor

```
% flutter doctor
```

こういう doctor 系は他のコマンドでも見ることがありますが
基本的には、インストール前提などなどをチェックしてくれるプログラムです。

実行すると...

```
 % flutter doctor


  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Running "flutter pub get" in flutter_tools...                      11.0s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.0, on macOS 11.5.2 20G95 darwin-arm, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.60.0)
[✓] Connected device (1 available)
    ! Error: yoneapp is not connected. Xcode will continue when yoneapp is connected. (code -13)

! Doctor found issues in 2 categories.
```

こんな感じで `[!] Android Studio (not installed)` がないですね。

私はiOSとWeb系のエンジニアなのでXcodeとVS Codeは入っていて、
Android Studio は入ってなかったみたいな感じですね。

## Downloading and installing with Homebrew

って brew もあるんか〜い！
こっちのほうが楽かもね

```
% brew install --cask flutter
```

brew コマンドを使うために
予め https://brew.sh をインストールしておく必要があります。

## Create and run a simple Flutter app

必要に応じて、ここまで章を飛ばして

```
% flutter create my_app
% cd my_app
% flutter run
```

するとブラウザが立ち上がります。

![スクリーンショット 2021-09-11 11.23.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6678/1410a262-9b86-064e-b320-b98e28842d0d.png)

なるほどね！

ブラウザでサクサク開発してから
後から Xcode や Android Studio　でビルドするような感じなのかな。

というわけで Hello world 的なものは拝んだので今日はここで。

---

＼プログラミング相談Slackコミュニティやってます／

Flutterは、素人ですが鍛え上げた直感力で相談にお答えします。
特に、環境構築は慣れてないと詰まりがちなので相談いただくとすごくお役に立てるかも。

https://codeqa.me/