[Flutter]フラッター入門のための最初のプロジェクト始める(IOS＆Android画面実行)

Flutterを初めて始めるとき、プロジェクトの作成とアプリを起動して画面が表示される過程をメモしておく。

0.　事前準備

Flutterプロジェクトを実行する前に次のツールが必要で、インストール済みかを確認しておくといい。

ツールのインストール確認とコマンド

 

Flutter SDK	flutter --versionでバージョン確認する。
Xcode（IOS実行用）	macOSに標準で入っているか、xcode-select --installでインストールするか、App Storeで検索して追加する。
Android Studio（Android実行用）	インストールしてAVD（エミュレーター）を設定する。
VS Code（またはAndroid Studio）	作業しやすい IDE を使う。

ターミナルで次のコマンドで Flutter が正しく入っているかを確認する。

flutter doctor

 

1.　新しいFlutterプロジェクトを作る

ターミナルでプロジェクトを作りたいフォルダーに移動してから、次のようにプロジェクトを作る。

flutter create プロジェクト名

 

2.　VS CodeまたはAndroid Studioでコードを確認する

Flutter はプロジェクト作る時にサンプルでのカウンターアプリのコードを提供する。だからすぐにサンプルコードを見られる。

VS CodeまたはAndroid Studioでプロジェクトのフォルダーを開いてコードを確認する。

補足：Android Studioでコードを確認するときのポイント

プロジェクトを作ってAndroid Studioで開くと、初期設定ではAndroid表示になっていることがある。（プロジェクト名：test_project）

Androidを選んでProject表示に変えると、フォルダー構造が全部見えるようになる。

3.　Androidで実行してみる

3-1.　Androidエミュレーターを起動する

Android StudioでAVD（エミュレーター）を作成して起動する。あるいは以下のコマンドで起動できる。

flutter emulators --launch <エミュレーターID>

 

3-2.　アプリを実行する

ターミナルで次のコマンドを入力する。

flutter run

 

4.　IOSで実行してみる（Macのみ可能）

4-1. 　シミュレーターを起動する

XcodeでIOS シミュレーターを起動するか、ターミナルで以下のように実行する。

open -a Simulator

4-2.　アプリを実行する

flutter run

 

IOSは最初の実行時にpod installまたはXcodeのビルド設定に関するメッセージが出ることがある。
エラーが出たら、指示に従って直すか、flutter clean をしてから再度試す。

5.　サンプルアプリ画面構成

アプリを実行すると以下の画面が表示される。

• Flutterロゴ
• "You have pushed the button this many times:"
• 数字のカウンター
  • ボタン

実行するときエラーが出るとき

#キャッシュをクリア
flutter clean

#パッケージを再インストール
flutter pub get

#IOSでエラーが出るときCocoaPodsを再インストール
cd ios pod install