Chapter 03

開発環境の構築

このチャプターでは、Flutter で開発を行うにあたって必要な環境と、その構築方法を説明します。

コレだけあれば始められます

事前に購入が必要なものは次の 2 つです。皆さんこれらはありますよね。

  1. 一番大事な PC
    Mac / Windows どちらでも開発は行えますが、iOS アプリを公開するには Mac が必要です。
  2. 開発したアプリをテストする デバイス
    実際にアプリの挙動を確認できる端末があると良いです。PC 上で仮想デバイスを動かせるので必須ではないですが、メインターゲットとなるデバイスは用意しておいた方が良いでしょう。iOS / Android、スマホ / タブレット等々。

これから用意するモノ

  1. アプリ開発ツールの Flutter SDK
    前チャプターで説明したクロスプラットフォームです。これがアプリ開発のキモになります。
  2. コーディングを行う エディター
    Android Studio もしくは VSCode の利用が推奨されています。好みで選んで大丈夫ですが、Android Studio の方が若干機能が豊富なようです。
  3. テスト用の 仮想デバイス
    開発したアプリの動作確認に利用します。注意点として、iOS はシミュレーター(画面描写のみを再現)、Android はエミュレーター(根本的な OS の処理まで再現)という違いがあります。この為、iOS をターゲットにアプリ開発を行う場合は実機を用意するのがお勧めです。

導入方法については、公式ページでかなり丁寧に解説されているので、そちらを参照するのがよいでしょう。flutter doctorというツールを使って、簡単にもれなく環境の構築ができます。
もし英語に拒絶反応がある方は、下記のページが分かりやすくて参考になると思います。

筆者の環境

チャプター 1 でも紹介しましたが、参考までに筆者の環境はこんな感じです。
エディターは Udemy でお勧めされていた Android Studio を採用することにしました。

  • MacBook pro 2016(macOS Catalina 10.15.6)
  • Android Studio 4.1
  • Flutter 1.22.1 stable
  • テスト用デバイス
    • iPhone 8(iOS 13.6.1)
    • iOS Simulator(iOS 13.7)
    • Android emulator(Android 11.0)
💡 Android Studio のおすすめ設定(コードの自動フォーマット)

Preference(⌘,)->Flutterの中のEditor->[Format code on save]にチェックをつけると、上書き保存するタイミングで Android Studio が自動的にフォーマットを整えてくれます。すごく便利なのでおすすめです。

まとめ

実際の手順は、他のページに委ねてしまいましたが、簡単に構築できるので、さくっと片付けてどんどん開発していきましょう。
もしつまづく所があったら、可能な範囲でご支援しますのでご連絡ください。

次回はいよいよ簡単なアプリを作って動かしてみますよ。お楽しみに。