Flutter Mac(M1)インストールからHello Worldするまで

FlutterでiOSとAndroidのアプリが同時に開発

iOSとAndroidのアプリが同時に開発できる
FlutterをM1チップのマックにインストールしました。

スムーズに入れられないのが開発ツールです。
案の定いくつかのエラーに見舞われたのでその対処方法
とHello Worldをするまでの手順

参考までに私の環境です

macOS Monterey
Mac mini(M1, 2020)
メモリ：8GB

Flutterのインストール　パッケージの入手先

Flutterのインストールパッケージの入手は
下記のリンクから可能です

: Install | Flutter

Install Flutter and get started. Downloads available for Windows, macOS, Linux, and ChromeOS operati ...

docs.flutter.dev

MacでチップがM1の場合
Apple Siliconを選択します。

黄色い枠の注意書きのように
コンソールで下記コードを流す必要があります

sudo softwareupdate --install-rosetta --agree-to-license

基本的に、

zipを解凍、

cd ~/development
unzip ~/Downloads/flutter_macos_3.3.5-stable.zip

そしてPATHを通すだけです。

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

コマンドラインでの操作に慣れているのであれば、
特に問題や迷うこともありません。

本家の手順書にしっかりとかかれているので
参考にしてみてください

: macOS | Flutter

Configure your system to develop Flutter on macOS.

docs.flutter.dev

Flutterのインストール後は「flutter doctor」

Flutterのインストール後は「flutter doctor」を実行します。

flutter doctor

ここでエラーが２箇所ありました。

まず
iOSアプリの開発用にXCodeのインストール、
アンドロイドの開発用にAndroid Studioが必要です

XCodeは既に入れていたのですが
Android Studioはまだでしたのでインストールしました
リンクは下記です。

: Download Android Studio & App Tools - Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for ...

developer.android.com

インストールはGUIの指示に従うだけで特に迷うことはないと思います。

さて、Android Studioのインストール終了後
flutter doctorをすると
まだエラーが起きています。1つ1つ対処していきます。

英文ですが、
何が原因でエラーになっているかの
ヒントが書いていますのでその通りに従うと良いです

まず一つ目です。Android Studioのエラーです。
cmdline-tools component is missing（cmdline-toolsのコンポーネントがありません）と
記載されているので入れます。

ご丁寧に下記リンクをみてくださいと書いていますので
指示に従って入れます。

: Command-line tools | Android Studio | Android Developers

Find out about the most important command-line tools that are available, organized by the packages i ...

developer.android.com

簡単にいえばAndroid StudioのGUIからインストール可能です
トップ画面のMore ActionsのSDK Managerを選択します

赤線部分の「Android SDK Command-line Tools」にチェックを入れて
Appyをすればインストールされます。

コマンドラインツールがインストールされたら
Finishを押します。

さて、再度flutter Doctorを流すと
ライセンス系のエラーが出ているので対応します。

下記コマンドを流せと言っているので実行して、
ライセンス関係に同意（Y）していきます

flutter doctor --android-licenses

コマンドを実行し、全てにyesと回答したら
Android関連のエラーは消えました。

お次はXCodeです。

下記図のように
CocoaPods not installed（CocoaPodsがインストールされていない）と
言われています。

既にXCodeが入っているので
下記コマンドを流せばOKでした。

sudu gem install cocoapods

ご覧の通り「Flutter Doctor」を実行したら
エラーがなくなりました。

Flutterで初めての開発Hello World

プログラマーのお作法？
初めてアプリはHello Worldです。
Android Studioで開発していくのですが、

そのまえに、プラグインの設定が必要です。
FlutterとDartをインストールします。
（Android Studio起動後のトップダイアログの
左のPluginsをクリックしたら辿り着けます）

両プラグインをインストールしたらプロジェクトを作成するときに
「New Flutter Project」が選択可能になります。

じゃーん♪

Hello Worldではなく「ちわ、世界」ですがw
実行することができました！

main.dartのWidget buildになります。

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home://const MyHomePage(title: 'Flutter Demo Home Page')
        const Scaffold(
        body: Center(
          child: Text('ちわ、世界'),

        )
      )

    );
  }
}

これでいOS、Androidの同時開発環境ができました。