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

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

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

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

参考までに私の環境です

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

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

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

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"

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

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

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

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

flutter doctor

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

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

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

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

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

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

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

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

簡単にいえば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エミュレーターについて

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

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

現場で使える　Flutter開発入門

posted with ヨメレバ

澤 良弘、上村　隆弘、村岡 直人、多田 幸一 マイナビ出版 2021年08月24日頃

楽天ブックス

Amazon

Kindle

7net

honto

紀伊國屋書店

ebookjapan

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

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

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

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

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

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

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

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

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