2020/12/21

Flutter(パート1) 

I. Flutterとは

Flutter(フラッター)は、Googleによって開発されたアプリを構築するためのツールキットです。

Flutterは、単一のソースコードからモバイル、ウェブ、デスクトップ用のネイティブコードにコンパイルするため、開発と保守の時間を短縮することができます。

メリット:

  • 素早い開発:ホットリロードでコードの変更を瞬時に表示できるため、高速に開発できます。カスタマイズ可能なウィジェットの巨大なライブラリが用意されています。
  • フレキシブルなUI:AndroidやIOSと異なり、Flutterはピクセルまでカスタマイズ可能なので、ゲームも実装できます。
  • ネイティブパフォーマンス:Dartのネイティブコンパイラを使用してARMネイティブマシンコードに直接コンパイルします。

II. クロスプラットフォームアプリの開発理由

各機能を最速で開発でき、単一のコードベースを使用するため、人件費、開発保守費を節約できます。

III. Flutterインストール

1. Flutter SDKのインストール

以下の2つの方法のいずれかでインストールできます。

  • FLUTTER SDKのリンクで安定版をインストールします。
  • 以下のギットを使用します。

git clone https://github.com/flutter/flutter.git -b stable

2. Flutterパスの更新

  • flutterコマンドを各コンソールで実行できるために、インストールしたばかりのflutterパスでPATH環境変数を更新する必要があります。
    例) C:\flutter\bin
  • その後、有効になるようにログアウトします。

3. Flutter doctorでの確認

flutter doctor コマンドを実行して確認します。

ガイドラインに従って、不足しているツールをインストールします。

4. エディター選択

Android StudioとVS Codeの2つのエディターが推奨されています。

VS Codeを使用しているので、以下の幾つかのフラッタープラグインを紹介します。

  • Flutter, Dartプラグイン
  • Pubspec Assist : flutterのライブラリを自動的にインポートするために使用します。

  • Image preview : カーソルを合わせることで、コードで画像をプレビューできます。

  • Flutter Files:flutterのblocを作成します。

  • Bracket Pair Colorizer 2 :括弧を色づけして表示してくれて、ネストされた複数のウィジェットを使用しやすくなります。

  • Awesome Flutter Snippets :ショートカットキーで基本的なコード構造をすばやく作成できます。

5. エミュレータの作成

Android Studioまたは以下のリンクのavdmanagerでエミュレータを作成できます。
https://developer.android.com/studio/command-line/avdmanager

以下、Android Studioで仮想デバイスを作成する方法について説明します。

  • Android StudioのAVDマネージャーにアクセスします。

  • 仮想デバイスを作成します。

  • デバイスを選択します。

  • Android用のバージョンをダウンロードします。

  • 設定をカスタマイズします。

  • 以下のエラーが発生しました場合、

!] Android toolchain – develop for Android devices (Android SDK version 29.0.3)

X Android license status unknown.

Try re-installing or updating your Android SDK Manager.

See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed instructions.

「Android Studio>Setting」を選択してツールチェーンを追加する必要があります。

  • 新しいプロジェクトを作成し、エミュレータをテストします。