flutter, dart, vs code はインストール済みとして, flutter project の作成方法を以下に記します。
最初にポイント
覚えるべきコマンドは以下2つ
flutter create my_flutter_app
flutter pub get
とりあえず注意するべきファイルは以下2つ
※Lint についてはまた簡単に記事にします
Flutterプロジェクトの作成と実行
1. プロジェクトの作成
ターミナルを開きます。 ターミナルアプリケーションを起動します。
プロジェクトを作成したいディレクトリに移動します。
cd
コマンドを使用して、プロジェクトを作成したい親ディレクトリに移動します。例えば、ホームディレクトリのprojects
フォルダに移動する場合は、次のように入力します。cd ~/projects
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. プロジェクトの確認と実行
VS Codeでプロジェクトを開きます。 VS Codeを起動し、「ファイル」>「フォルダーを開く」から、作成した
my_flutter_app
プロジェクトのディレクトリを選択して開きます。依存関係を取得します。 VS Codeの統合ターミナルを開き(
Ctrl+`` または ``Cmd+``)、プロジェクトのルートディレクトリで以下のコマンドを実行して、
pubspec.yaml`に記載された依存関係を取得します。flutter pub get
エミュレータを起動し、アプリを実行します。 デバッグパネルを開き(
Ctrl+Shift+D
またはCmd+Shift+D
)、利用可能なエミュレータを選択して起動します。その後、実行ボタン(緑色の三角形)をクリックするか、F5
キーを押してデバッグセッションを開始します。
これで、新しいFlutterプロジェクトの作成から、pubspec.yaml
ファイルを含むプロジェクト構造の確認、そしてアプリの実行までの一連の手順を完了しました。