4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

FlutterとAWSで始めるサービス開発 (1)Windowsでの開発環境構築

はじめに

Google謹製のクロスプラットフォームなアプリ構築フレームワークであるFlutterをクライアントサイドとし、サーバーサイドにAWSを利用しサービス開発してみたいと考えています。
サーバーサイドにAWSを使う場合、クロスプラットフォームなクライアントの開発にはReact Native + AWS Amplifyを使うというのが鉄板かなとも思いますが、JavaScriptとReactを使ったWebフロントエンドの開発をやってきていない人が、わざわざReact Nativeでアプリ開発を始める必要はないかなというのが筆者の考えです。React + Reduxの世界は初期の学習コストが割とかかり始めの一歩が大変ですし、正直コードも直感的ではなく読みにくいなと感じます。

ということで、王道ではないかもしれませんが、クラウドプラットフォームとしてはNo.1のAWSと、クロスプラットフォームのモバイル開発で注目されているGoogleのFlutterを使ったサービス開発のノウハウを学んでいきたいと思います。

開発環境

筆者はWindows PCしか持っていないので、Windows 10で開発環境を構築していきます。以下のバージョンを使ったインストール手順になります。

  • Flutter SDK Windows 1.17.0
  • Android Studio 3.6.3 for Windows 64-bit
  • Visual Studio Code 1.44.2 (※インストール手順は省略します)

参考文献

  • Flutter SDK

  • Android Studio

Flutter SDKのセットアップ

  1. Flutter SDKをダウンロードし任意のフォルダ(ex. d:\flutter)に解凍してください
  2. 環境変数のpathに追加してください
    • envを起動してください
    • 下記手順に従い、[インストールフォルダ]\bin (ex. d:\flutter\bin) をpathに追加してください
      環境変数1.png 環境変数2.png 環境変数3.png

Android Studioのセットアップ

  1. Android Studioをダウンロードし、.exeを起動してインストールを完了させてください。
  2. Android Studioを起動し、SDK Managerを開いてください。 Android Studio.png
  3. SDK Toolタブを開き、Hide Obsolete Packagesのチェックを外し、Android SDK Tools (Obsolete)にチェックを入れてOKを押下しインストールしてください。 Android Studio2.png
  4. Pluginsを開いてください。 Android Studio_Plugin1.png
  5. Fluuterのpluginをインストールします。Installを選択するとdartのpluginも同時にインストールする旨のメッセージが表示されるのでOKを押下して進めてください。
    Android Studio_Plugin2.png
  6. AVD Managerを開いてください。 Android Studio_AVD1.png 7.Create Virtual DeviceでAndroid emulatorをセットアップしていきます。 Android Studio_AVD2.png
  7. 今回はデフォルトで選択されていたPixel2をそのまま選んで進めます。。 Android Studio_AVD3.png
  8. システムイメージをダウンロードします。今回はAndroid 10.0のイメージをダウンロードしました。 Android Studio_AVD4.png
  9. Download選択するとダウンロード画面になります。 Android Studio_AVD5.png
  10. ダウンロードが完了したらイメージを選択してNextを選択して次に進んでください。 Android Studio_AVD6.png
  11. 次の画面では各種設定を変更できますが今回は特にいじらずデフォルトのままFinishを押下し作成を完了しました。 Android Studio_AVD7.png
  12. emulatorを起動して問題なく動作するか確認をしましょう。 Android Studio_AVD8.png Android Studio_AVD9.png

Visual Studio Codeの設定

Visual Studio Codeは事前にインストールをしておいてください。

1.FluuterのPluginをインストールします。拡張機能でflutterで検索をし、インストールを実行します。
VSCode_Plugin.png

インストール結果の確認

  1. Visiual Studio Codeのターミナルを開き、下記を入力し実行します。
> flutter doctor

VSCode_Result.png

2.上記のように分析結果が表示されます。ライセンス関連のエラーが出ているので、画面のメッセージに従い以下のコマンドを実行し、未同意のライセンスに対してyを選択し同意していきます。

> flutter doctor --android-licenses

まとめ

以上で最低限の開発環境が構築できたと思います。実際にはEmulatorではなく実機を利用したりとあるとは思いますが、まずはWindows PCのみで始められるところを狙って環境を構築しました。
次回「(2)Flutterのテンプレートアプリを作ってみる」では、Flutterのプロジェクトを作成し、テンプレートアプリを動かして中身を見ていきたいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?