Flutterのプロジェクト作成コマンドとディレクトリ構成を学ぼう

1. Flutterプロジェクトを作成するコマンド

1. Flutterプロジェクトを作成するコマンド

Flutterでは、コマンドライン（ターミナル）から簡単に新しいプロジェクトを作成できます。基本的なコマンドは以下のとおりです。

flutter create プロジェクト名

たとえば、my_appという名前のFlutterアプリを作成したい場合、次のように入力します。

flutter create my_app

コマンドを実行すると、Flutterが必要なファイルやディレクトリを自動的に生成してくれます。

2. Flutterプロジェクト作成時のオプション

2. Flutterプロジェクト作成時のオプション

Flutterのcreateコマンドにはいくつかのオプションが用意されています。例えば、プロジェクトのテンプレートを指定したり、空のプロジェクトを作ることも可能です。

• --template=app：通常のアプリケーションテンプレート（デフォルト）
• --template=package：Dartパッケージを作るときに使用
• --org：アプリのパッケージ名に使うドメイン名の逆形式を指定

例：

flutter create --org com.example my_app

このようにして、Flutterのプロジェクトを自分の目的に合わせてカスタマイズすることができます。

3. プロジェクト作成後のディレクトリ構成とは？

3. プロジェクト作成後のディレクトリ構成とは？

Flutterのプロジェクトを作成すると、以下のようなディレクトリ構成になります。それぞれの役割を理解しておくと、開発がスムーズになります。

• lib/：Dartコードを書くメインの場所。main.dartがここにあります。
• test/：ユニットテストを書くためのフォルダ。
• android/：Androidプラットフォーム向けのネイティブコードや設定が含まれます。
• ios/：iOS向けのネイティブコードが格納されます。
• web/：Flutter Webを使うときに生成されるHTMLやJSファイルが入るディレクトリ。
• pubspec.yaml：依存パッケージの定義や画像、フォントの設定ファイル。

4. lib/main.dart の基本構造

4. lib/main.dart の基本構造

Flutterアプリのエントリーポイントはlib/main.dartです。このファイルにはアプリの起動処理や、最初に表示されるウィジェットが定義されています。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutterの基本構造'),
        ),
        body: Center(
          child: Text('Flutterアプリが動いています！'),
        ),
      ),
    );
  }
}

このコードを実行することで、シンプルな画面が表示されます。

5. pubspec.yamlの役割と編集

5. pubspec.yamlの役割と編集

pubspec.yamlはFlutterプロジェクトの設定ファイルであり、依存パッケージやアセット（画像やフォントなど）を管理します。例えば、google_fontsなどのパッケージを追加したい場合は、以下のように記述します。

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^5.0.0

編集後は、ターミナルで以下のコマンドを実行して依存関係を更新します。

flutter pub get

6. 開発中によく使うFlutterコマンド

6. 開発中によく使うFlutterコマンド

Flutterの開発では、いくつかの便利なコマンドを頻繁に使います。プロジェクト作成後に知っておくと便利なコマンドを紹介します。

• flutter run：アプリを実行
• flutter clean：ビルドキャッシュの削除
• flutter doctor：環境チェック
• flutter build apk：Android用のAPKをビルド

これらのコマンドを覚えておくことで、Flutterの開発がより快適になります。

7. Flutterディレクトリ構成のカスタマイズ

7. Flutterディレクトリ構成のカスタマイズ

Flutterではデフォルトのディレクトリ構成をそのまま使うことが多いですが、大規模開発やチーム開発では自分で構成を整理することもあります。以下のような構成がよく使われます。

• lib/screens：画面ごとのウィジェット
• lib/widgets：共通コンポーネント
• lib/models：データモデル
• lib/services：API連携やロジック

このように分けることで、保守性が高くなり、可読性の高いコードを保つことができます。

まとめ

まとめ

Flutterプロジェクト作成と構成を振り返る

この記事では、Flutterでアプリ開発を始めるうえで欠かせない「プロジェクト作成コマンド」と 「ディレクトリ構成」について、初心者向けに順番に解説してきました。 Flutterはコマンドラインから簡単にプロジェクトを作成でき、 必要なファイルや設定があらかじめ整った状態で用意される点が大きな特徴です。 これにより、開発者は環境構築に悩むことなく、すぐにアプリ作成へ集中できます。

特に flutter create コマンドは、Flutter開発のスタート地点とも言える存在です。 プロジェクト名を指定するだけで、AndroidやiOS、Webに対応した構成が自動生成されるため、 クロスプラットフォーム開発の強みを最初から実感できます。 初心者にとっても「まず何をすればいいのか」が明確で、学習を進めやすい点が魅力です。

ディレクトリ構成を理解する重要性

Flutterプロジェクトでは、lib ディレクトリを中心に開発が進みます。 lib/main.dart がアプリの入口となり、ここからウィジェットや画面構成が呼び出されます。 一方で、android や ios フォルダには、それぞれのプラットフォーム固有の設定が含まれており、 普段のFlutter開発ではあまり触らないケースも多いですが、 ビルドやリリースの際には重要な役割を果たします。

また、pubspec.yaml はFlutterプロジェクト全体を管理する中核的なファイルです。 パッケージの追加や画像、フォントの設定はすべてここで行われます。 このファイルの役割を理解しておくことで、外部ライブラリの導入やデザインのカスタマイズも スムーズに行えるようになります。

初心者向け確認用サンプル構造

lib/
 ├─ main.dart
 ├─ screens/
 │   └─ home_screen.dart
 └─ widgets/
     └─ custom_button.dart

このようにディレクトリを分けておくことで、 画面ごとの役割や共通部品が整理され、コードの見通しが良くなります。 小規模なアプリでは必須ではありませんが、 将来的に機能が増えることを考えると、早い段階で構成を意識する習慣はとても大切です。

Flutterコマンドを知ることで開発が楽になる

Flutterでは、プロジェクト作成以外にも便利なコマンドが数多く用意されています。 flutter run でアプリを実行し、 flutter doctor で環境を確認することで、 エラーの原因を素早く特定できます。 これらのコマンドを知っているだけで、開発中のトラブル対応がぐっと楽になります。

初心者のうちはコマンド操作に抵抗を感じるかもしれませんが、 実際には決まったコマンドを使う場面がほとんどです。 何度か使っているうちに自然と慣れていき、 Flutter開発の流れを自分のものにできるようになります。