当サイトはアフィリエイト広告を利用しています

システム開発

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

Configure your system to develop Flutter 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 Studio  |  Android Developers
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の同時開発環境ができました。

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

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

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

こちらもCHECK

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

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

続きを見る

Webデザインやプログラミングで食っていきたい方必見!

副業が当たり前になってきた世の中
手に職をつけて家計をUPしませんか?


Web食いオンラインスクール公式サイトはこちら

プログラミングの知識があれば
クラウド上で案件を受注したり
オリジナルのアプリを作って販売したり
空いた時間で収益を上げることができます。

子育てをしながらと言う主婦
社会人になる前のスタートダッシュしたい、学生
管理職や40歳からの手習

オンラインなので、
様々な年齢の方々が”自宅”から始めています

●講師はほとんどが現役のフリーランス
●コースがないので何でも学べる、途中で進路変更も可能
●辞めたい時に辞められる(最低契約期間は1ヵ月なので、縛りがない)
●添削・回答無制限(わかるまで回答)
●進路相談や技術面以外もご相談可能
●デザイナー・プログラマー・ディレクター・マーケターをすべて経験してきている社長からも教わることができる

これらにピンときた方は下記リンクから詳細を確認してください。

Web食いオンラインスクール公式サイトはこちら

スポンサーリンク

関連コンテンツ

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

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

-システム開発