システム開発

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

Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operat ...

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 install | Flutter
macOS install | Flutter

How to install on macOS.

docs.flutter.dev

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

節約成功イメージ

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

flutter doctor

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

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

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

Download Android Studio & App Tools - Android Developers
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 Developers
Command-line tools  |  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の同時開発環境ができました。

補足:Flutterエミュレーターについて

デバックする時の端末のエミュレータはいくつも選択できます。

ただし、同時に起動すると下記のようにエラーになるので
「あれおかしいな?アプリが起動しない」場合は
同時にエミュレータが起動していないかをチェックしてみてください。

こちらもCHECK

プログラムコードイメージ
プログラムコードの書き方TOP3。メンテしやすさが肝心!

10年弱PG・SEとして大手メーカーに常駐して自社開発の部門システムの運用保守・開発・設計・コンサルをしていました。 大手企業に常駐10年以上のSEが10年以上仕事で心掛けていたこと 人材を育てられる …

続きを見る

出世払い制度のあるプログラミングスクール

年々人気が向上しているITエンジニア

転職したくとも
今の職業が全然畑違い…

ちょっと待ってください!
憧れを諦めていいのですか?


日本初の「出世払い」エンジニア養成校【CODEGYM ISA(コードジム アイエスエー)】

しっかりとプログラミングの基礎から学べて
転職が実現するまで、学費なし

日本で初めて ISA( Income Share Agreement = 所得分配契約)導入の
いわゆる「出世払い」を採用したプログラミングスクールに
興味はありませんでしょうか?

ISAについて詳細は
下記リンクから確認ください。

日本初の「出世払い」エンジニア養成校【CODEGYM ISA(コードジム アイエスエー)】

前職は美容師、パティシエ、営業など
畑違いの職業から
ITエンジニア転職
された先輩の声もあります。

スポンサーリンク

関連コンテンツ

ポチッ押して応援してください!

にほんブログ村 IT技術ブログへ

-システム開発