Flutterでアプリを作るまで

こちらの記事を参考に進める。

Flutterで始めるアプリ開発

準備

Flutterをインストール

flutter_macos_2.0.1-stable.zip

export PATH="$PATH:$HOME/flutter/bin"

環境変数の追加の仕方はお使いのshellによって変わるので、それぞれの環境で確認してください。

• 使っているシェルの確認方法

echo $SHELL

インストールができ、パスが通っているのかの確認

flutter --version

各環境の構築

Flutterはクロスプラットフォームなので使いたい環境に応じて準備が必要です。

各環境の構築方法は以下の通りです。

• iOS/macOS: Xcodeをインストールし、コマンドラインツールをセットアップします。
• Android: Android StudioとAndroid SDKをインストールします。
• Web: Chrome ブラウザがあれば追加のセットアップは不要です。

環境が構築できているのかの確認

flutter doctor のコマンドを利用することで各環境での環境が整っているかの確認をすることができます。

flutter doctor

各項目にチェックマークがついていれば、その環境は正常に設定されています。

下の例で言うと、Androidの準備がまだできていないことを意味しています。

• ios開発環境の準備
  1. Xcodeをインストールする：Mac App Storeから最新版のXcodeをダウンロードしてインストールします。
  2. コマンドラインツールをセットアップする：ターミナルを開き、以下のコマンドを実行してXcodeコマンドラインツールをインストールします。
  xcode-select –install
  1. iOS simulatorを確認する：Xcodeを起動し、「Xcode」メニューから「Open Developer Tool」→「Simulator」を選択してiOS simulatorが正常に動作することを確認します。
  2. sudo xcodebuild -license で Xcodeのライセンス契約に同意する
• android開発環境の準備
  1. Android Studioをインストールする：公式サイトから最新版のAndroid Studioをダウンロードし、インストールします。
  2. Android SDKをセットアップする：Android Studioの初回起動時に、必要なSDKコンポーネントをインストールするウィザードが表示されます。
  3. 指示に従ってインストールを完了します。
  4. Configure > AVD Manager にてエミュレータとして利用したいデバイスを選び、作成する。
  5. 起動したら準備完了
• web開発環境の準備
  1. Chromeブラウザがインストールされていることを確認する。
  2. 以上。

使いたい環境の準備ができましたら、flutter doctor で開発環境の準備ができているかの確認をしてください。

エディタの設定

ここでは Visual Studio Code での説明をいたします。

VSCodeをインストール

もしインストールされていない場合にはインストールをしてください。

Flutter 拡張機能をインストール

Flutterの拡張機能 をインストールしましょう。

flutter doctorで確認

visual studio codeの準備ができているかも、flutter doctor にて確認をすることができます。

プロジェクトの作成

flutter create sample-app

sample-appの部分は任意のディレクトリ名を指定してください。

ディレクトリ構造の説明

Flutterプロジェクトを作成すると、以下のようなディレクトリやファイルが生成されます：

• lib/: アプリケーションのメインソースコードを含むディレクトリ
• test/: ユニットテストやウィジェットテストを格納するディレクトリ
• android/: Android固有の設定やリソースを含むディレクトリ
• ios/: iOS固有の設定やリソースを含むディレクトリ
• pubspec.yaml: プロジェクトの依存関係や設定を管理するファイル
• pubspec.lock: pubspec.yamlファイルに基づいて自動生成される依存関係の詳細なバージョン情報を含むファイル
• README.md: プロジェクトの説明や使用方法を記述するファイル
• build/: ビルド時に生成される一時ファイルや成果物を格納するディレクトリ
• analysis_options.yaml: Dart解析ツールの設定ファイルで、コーディングスタイルやルールを定義

アプリの起動

• コマンドからの実行アプリを起動するには、以下の手順を実行します：
  1. プロジェクトのルートディレクトリに移動します。flutter devices で起動できるデバイス一覧が表示されるので確認します。ターミナルで以下のコマンドを実行します。デバイスidにはflutter devices で書かれているものを利用します。
• Vscodeからの起動VSCodeからFlutterアプリを起動するには、以下の手順を実行します：
  1. 右下にデバイスを選択する欄があるので、使いたいデバイスを選択する。ここではChromeが選択されている。
  1. 左のサイドバーからRUN AND DEBUGを選択し実行。アプリが起動します。

実際にアプリを作る

これで環境構築は終わりです。

実際にアプリを作るには各種ドキュメントを参考にしてください。

Flutter documentation