flutter project の作成方法

flutter, dart, vs code はインストール済みとして, flutter project の作成方法を以下に記します。

最初にポイント

覚えるべきコマンドは以下2つ

  1. flutter create my_flutter_app

  2. flutter pub get

とりあえず注意するべきファイルは以下2つ

  1. pubspec.yaml ... 依存関係等

  2. analysis_options.yaml ... Lint, build の条件指定(製品化するときは見直すとよい)

※Lint についてはまた簡単に記事にします

Flutterプロジェクトの作成と実行

1. プロジェクトの作成

  1. ターミナルを開きます。 ターミナルアプリケーションを起動します。

  2. プロジェクトを作成したいディレクトリに移動します。 cd コマンドを使用して、プロジェクトを作成したい親ディレクトリに移動します。例えば、ホームディレクトリのprojectsフォルダに移動する場合は、次のように入力します。

     cd ~/projects
    
  3. Flutterプロジェクトを作成します。 flutter create コマンドを使用して、新しいプロジェクトを作成します。ここでは、プロジェクト名をmy_flutter_appとします(プロジェクト名にはアンダースコアを使用し、空白や大文字は使えないことに注意してください)。

     flutter create my_flutter_app
    

    このコマンドを実行すると、my_flutter_appという名前のディレクトリが作成され、その中にFlutterプロジェクトの標準的なファイル構造が生成されます。これには、pubspec.yamlファイルも含まれます。

2. pubspec.yamlファイル

flutter create コマンドによって生成されたプロジェクトのルートディレクトリには、pubspec.yaml ファイルが含まれています。このファイルはプロジェクトのメタデータ、依存関係(Flutter SDKを含む)、アプリに含めるアセットやフォントなどの設定を記述します。

3. プロジェクトの確認と実行

  1. VS Codeでプロジェクトを開きます。 VS Codeを起動し、「ファイル」>「フォルダーを開く」から、作成したmy_flutter_appプロジェクトのディレクトリを選択して開きます。

  2. 依存関係を取得します。 VS Codeの統合ターミナルを開き(Ctrl+`` または ``Cmd+``)、プロジェクトのルートディレクトリで以下のコマンドを実行して、pubspec.yaml`に記載された依存関係を取得します。

     flutter pub get
    
  3. エミュレータを起動し、アプリを実行します。 デバッグパネルを開き(Ctrl+Shift+D または Cmd+Shift+D)、利用可能なエミュレータを選択して起動します。その後、実行ボタン(緑色の三角形)をクリックするか、F5キーを押してデバッグセッションを開始します。

これで、新しいFlutterプロジェクトの作成から、pubspec.yamlファイルを含むプロジェクト構造の確認、そしてアプリの実行までの一連の手順を完了しました。