【Flutter】フラッターでモバイルアプリ開発①


Flutter(フラッター)を利用したモバイルアプリ開発の環境設定とプロジェクト作成までを解説します。

Flutterについて

FlutterはGoogle製のアプリケーションUI構築ツールです。
1つのコードからモバイル、ウェブ、デスクトップ向けのUIを構築できます。モバイルに関してはiOS、Androidにビルドできるようなので学習していきます。

Flutter環境の構築

Androidの設定

こちらはFlutterに説明ページがありますが、Android Studioをインストールするだけになっています。

Flutter SDKの設定

Flutterの公式サイトのInstallよりインストール手順が記載されています。
使用しているOSのリンクを選択します。

Flutter SDKのインストール

システム要求を満たしていることを確認し、Flutter SDKをインストールします。

Flutter SDKの配置

ダウンロードしたZipファイルを展開し、任意の場所に移動します。
Windowsの場合はC:/Program Files/など高い権限が必要な場所はダメだそうです。

私の例
Windows:D:/Project/Flutter/Flutter_SDK
Mac:/Users/{username}/Developer/flutter

環境変数の設定

Update your pathの手順に沿ってインストールしたSDKの環境変数を設定します。

環境変数としてFlutter SDKを配置したパスのbinフォルダを指定してください。
登録の手順は上の記事を参考にしてください。

Flutter Doctor

Windowsはコマンドプロンプト(cmd.exe)Macはターミナルでflutter doctorと入力することで環境変数が設定できているか確認できます。

Windows「'(コマンド)’は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。」
Mac「zsh: command not found:(コマンド)」
などと出る場合は環境変数が設定できていません。

また、flutter doctor×マークがついている個所を解決します。

Android toolchain – develop for Android device (Android SDK version 29.0.3)

この項目が×になっている場合は、前述のAndroidの設定でAndroid Studioをインストールすることで解決します。

Android license status unknown.

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のSDKManagerでAndroid SDK Tools (Obsolete)のチェックを付ける必要があります。
Flutterの手順サイトにも記載ありましたが見逃してました。

Android Studioを起動して右下のConfigureのSDK Managerを選択して上のウィンドウを選択します。

Android SDK > SDK Toolsと選択し、Hide Obsolete Packagesのチェックを外し、Android SDK Tools (Obsolete)のチェックを付けて下のApplyを選択します。

Applyのあとはインストールが始まりますので完了したらOKで閉じていってください。

! Some Android licenses not accepted.

To resolve this, run; flutter doctor –android-licenses

cmdのメッセージに出ているようにflutter doctor --android-licensesを実行します。
実行後ライセンスが表示されますので(y/N)?と表示されたらyを入力してエンターを押して同意してください。

Flutter plugin not installed; this adds Flutter specific functionality.

Android StudioのConfigure > Pluginsを開きます。

PluginsのウィンドウでDartを検索しInstallを押します。

DartをInstallしたらFlutterもインストールします。

Install後はRestart IDEで再起動してください。

FlutterDoctorクリア状態

例までにflutter doctorを実行して成功している時の表示です。
Connected deviceはAndroid端末を接続するとクリアできます。

エディタの設定

Visual Studio Codeをインストールします。
すでにインストール済の場合は不要です。

VSCodeのView > Command Palette…を選択します。

Extensions: Install Extensions.と入力し、開きます。

EXTENSIONS: MARKETPLACEにFlutterと入力してFlutterを追加します。

以上でVSCodeでのFlutterの設定は終わりです。

Flutterのプロジェクトの作成

エディタの設定でも使用したVSCodeのView > Command Palette…を選択します。
Flutter: Run Flutter DoctorでFlutterの利用ができるかチェックします。

右下に以下の警告が出たらコマンドプロンプトのflutter doctorをクリアしているか、環境変数の設定ができているかを確認してください。

Flutter: New Projectで新規プロジェクトを作成します。

エンターを押すと入力欄が出ますのでプロジェクト名を指定してください。
全角は不可でアンダーバーが使用可能です。入力後エンターでプロジェクトが作成されます。

新規プロジェクト作成後の画面がこちら
実際の開発はまた別で記載します。

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です