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」を入力してエンターキーで保存。ファイル名の変更もないのでさらにそのままエンターキーで編集を終了させます。

↓「engineercafec」の部分がご自分のユーザー名になっているはずです

6.パスが通ったかの確認[flutter doctor]

ターミナルに「flutter doctor」と入力するとFlutterが認識されているか確認できます。

Welcome to Flutter!ときたら成功です!!

7.AndroidStudio のインストール(Android側)

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

8.AndroidStudioをセットアップ

ダウンロードしたファイルをダブルクリックするとインストーラが起動します。

「standard」を選択

DarkテーマとLightテーマ、好きな方を選びます

9.ConfigureからFlutterのプラグインを入力

インストールが終了したら、Android Studioを起動します。

起動画面の右下にある「Configure」をクリックします

「Plugins」を選択

Pluginウィンドウが開くので、左上の検索欄に「flutter」と入力してEnterを押します。

一番上に表示された「Flutter」というプラグインを右上の「Install」ボタンを押してインストールします。

8.ターミナルから「flutter doctor –android-licenses」を実行。

これでAndroidStudioとFlutterが連携して使えるようになります

以上でAndroidの環境構築は終了

10.Xcode のインストール(iOS側)

Finderのアプリケーションタブから「App Store」をクリック。「Xcode」と検索し、 Xcodeをインストール

11.ターミナルでsudo xcodebuild -runFirstLaunchを実行

これによってXcodeライセンス合意がされ、Xcodeが使用可能となります。

以上でiOSの環境構築は終了

12.プロジェクト作成

アプリを実際に作成するにはまず、Androidのプロジェクトを開きます。「Create New Flutter Project」を選択。

Flutterのパスがきちんと通っているか確認しNextをクリック。

app名とapp ID名をそれぞれ入力したらFinishをクリックしてプロジェクトを作成

13.アプリの実行

作成されたプロジェクトの上部の実行機タブを「Chrome(web)」に変え実行ボタンをクリックします。

実行後、デフォルトで入っているカウントアプリが表示されたら成功です!

よくあるError

・flutter doctor(ターミナル上で動かすFlutterの環境診断コマンド)をしたらAndroidStudioでエラー吐く

AndroidStudioの SDK ToolsのAndroid SDK Command-line Toolsにチェックを入れて「OK」を押し有効にする→ターミナルでflutter doctor –android-licensesを実行し解決!

・flutter doctorを走らせると[!] Android Studio (not installed)と出てくる

>flutter config –android-studio-dir=”/snap/android-studio/current/android-studio/”

入力して実行すると解決!

イベントの様子(動画)

5/29のイベント

2023年までに102兆円をも生み出すと予想させるアプリ開発とは(立派なアプリ開発者になる会#1)

7/3のイベント

たった1時間でIT素人でもアプリが作れるようになる方法とは(立派なアプリ開発者になる会#2)

最後に

近年アプリ開発の需要も高まり、2023年までには102兆円をも生み出す業界と注目されています。そんな期待が高まる業界の中で共に良いアプリ・サービスを構築できる仲間を集めたコミュニティーをイベントを通して構築したいと考えております。

今後もエンジニアカフェでは様々なイベントを未経験でも参加できる形で開く予定です。皆様のご来館お待ちにしております。

Open hours	9:00 - 22:00
Consultation hours	13:00 - 21:00
Closed	The last Monday of every month