M1搭載 Macbook AirへのFlutter開発環境のインストール～PC素人でも1時間あればできるアプリ開発～

Sorry, this entry is only available in 日本語. For the sake of viewer convenience, the content is shown below in the alternative language. You may click the link to switch the active language.

こんにちは!エンジニアカフェスタッフの山本です!

この記事では、2021年7月3日(土)に実施したイベント「たった1時間でIT素人でもアプリが作れるようになる方法とは(#2 Flutterの環境構築)」の内容についてレポートします。

Flutter とは

Flutter(フラッター)は、Googleによって開発されたフリーかつオープンソースのUIのSDKである。単一のコードベースから、Android、iOS、Linux、macOS、Windows、Google Fuchsia向けのクロスプラットフォームアプリケーションを開発するために利用される。(wikiより引用)

Android・Ios・webを一気に作ることができるので生産性が高い
Fluter独自のレンダリングエンジンにより自由度の高いUI設計が実現

といった利点があります。

イベントについて

「立派なアプリ開発者になる会」主催者の私は、以前からFlutterを使って様々なアプリを作っていたのですが、Flutterの知名度はまだそこまで高くなく、お互いに情報を交換する場がないことに歯痒さを感じていました。

そんな時に「エンジニアカフェで何かしらのイベントを開くことができる」といった機会を頂け、5/29にアプリ開発についてYoutubeLiveにて発信したり、7/3にはFlutterの環境構築方法について発信してきました。

イベントの様子は、YouTubeで公開しています。動画へのリンクはこの記事の最後に掲載していますので、ぜひご覧下さい。

今後は、様々な方がアプリ開発に関する知見を交換できる場としてコミュニティーを成長させていきたいと考えております。

この記事で扱う内容

この記事では、2021/7/3のイベントで行ったFlutterの環境構築について、詳しく説明します。

例として使用するのは、M1チップ搭載のMacbook Air (2020)です。

スペックは以下の通り。

Mac Book Air (M1,2020)

チップ Apple M1

メモリ 16GB

コア数 8コア

Flutter インストール(M1チップ搭載mac)

早速Flutterをインストールして行きましょう。今回はM1チップ搭載のMac Book Airを使用して環境構築を行なっていきます。

1.Flutterをダウンロード

Flutterのzipファイルをダウンロードし、それを解凍します。

Flutterのダウンロードはこちらから

2.ホームディレクトリ内にDeveloperフォルダを作る

Finderの、「移動」>「ホーム」を開きます。右クリックして新規フォルダから「Developer」というフォルダを作成します。

3.「Developer」にダウンロードした「Flutter」を入れる

解凍したFlutterフォルダを先ほど作成したDeveloperというフォルダ内に入れます。

4.ターミナルを開いて「nano ~/.zshrc」と入力

Finderの「アプリケーション」>「ユーティリティ」>「ターミナル」を開く

ターミナル内に「nano ~/.zshrc」を入力してエンターキーをおす。.zshrcファイルをnanoコマンドで編集可能にし、Flutterのパスのパスを設定していきます。

5.開いたらFlutterのパスを入力し保存します。

「export PATH=”$PATH:[ここにflutterのパス]/bin”」をzshrcファイルに入力。先ほどのflutterのフォルダを直接ターミナルにドラッグ&ドロップするとパスが自動的に入力されます。入力後「Y」を入力してエンターキーで保存。ファイル名の変更もないのでさらにそのままエンターキーで編集を終了させます。