🔰基礎技術

【Flutter実践】Androidアプリ開発の第一歩｜プロジェクト作成からエミュレーター起動、基本設定までを徹底解説

2026年2月1日

今回からはいよいよ、実際にコードを書いてアプリを動かしていきます。

Webアプリと違い、モバイルアプリには「最初に決めておかないと後で変更するのが大変な設定」がいくつか存在します。

今回は、「Androidアプリの基礎設定」をしっかり押さえつつ、次回以降の土台となる「習慣トラッカー（Habit Tracker）」を作っていきましょう。

1. Androidアプリの「戸籍」を作る

まず、プロジェクト（アプリの箱）を作成します。
ここで最も重要なのが「パッケージ名（アプリID）」です。

🔑 パッケージ名とは？

世界中のアプリの中で「あなたのアプリ」を一意に識別するためのIDです。
com.google.android.youtube のような形式で、通常は「ドメインを逆にしたもの ＋ アプリ名」を使います。

⚠️ 注意：一度リリースすると、二度と変更できません！

Webサイトで取得したドメイン（例: simplekits.tech）があるなら、それを使うのもありです。

プロジェクト作成コマンド

VS Codeのターミナルを開き、以下のコマンドを実行します。
※ com.example の部分は自分のドメインなどに書き換えてください。

# 形式: flutter create --org [ドメインの逆] [アプリ名]
flutter create --org tech.simplekits habit_tracker

これで habit_tracker というフォルダが作成されました。
VS Codeでこのフォルダを開いてください（ファイル → フォルダーを開く）。

2. 「android」フォルダの歩き方

Flutterプロジェクトの中には lib（メインのコード）の他に、android や ios というフォルダがあります。

アプリ名（スマホのホーム画面に表示される名前）を変えるには、この「額縁」の設定をいじる必要があります。

スマホ上の表示名を決める

デフォルトでは英語のプロジェクト名になっています。
以下のファイルを編集して、日本語のアプリ名に変更しましょう。

編集するファイル：
android/app/src/main/AndroidManifest.xml

<application
    android:label="習慣トラッカー"  <!-- ←ここを書き換える -->
    android:name="${applicationName}"
    ...>

これでインストールした時に「習慣トラッカー」と表示されるようになります。

3. エミュレーターの準備（Android Studio）

コードを書く前に、アプリを映す画面（エミュレーター）を用意します。
ここは前回の役割分担通り、「Android Studio」の出番です。

  1. Android Studioを起動します。
  2. 「More Actions」から「Virtual Device Manager」を選択します。
  3. 「Create device」を押し、適当な端末（Pixel 7など）を選びます。
  4. システムイメージ（OS）のダウンロードを求められたら、推奨されている最新のものをダウンロードして「Next」→「Finish」を押します。
  5. リストに追加された端末の「▶（再生ボタン）」を押すと、画面上にスマホが出現します！

スマホが起動したら、Android Studioは最小化してOKです。
「スマホを出しっぱなしにした状態で」VS Codeに戻りましょう。

4. 【実装】習慣トラッカーを作る

では、VS Codeで lib/main.dart を開き、中身をすべて消してから以下のコードを貼り付けてください。
これが今回の「習慣トラッカー」の原型です。

import 'package:flutter/material.dart';

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

// 1. アプリ全体の土台
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Habit Tracker',
      theme: ThemeData(
        // テーマカラーを「インディゴ（藍色）」に設定
        primarySwatch: Colors.indigo,
        useMaterial3: true,
      ),
      home: const HabitListScreen(),
    );
  }
}

// 2. 習慣リストを表示する画面（状態を持つのでStateful）
class HabitListScreen extends StatefulWidget {
  const HabitListScreen({super.key});

  @override
  State<HabitListScreen> createState() => _HabitListScreenState();
}

class _HabitListScreenState extends State<HabitListScreen> {
  // データのリスト（後でデータベース化します）
  final List<String> _habits = [
    '朝に水を一杯飲む',
    '5分間ストレッチ',
    '読書をする',
  ];

  // 追加ボタンを押した時の処理
  void _addHabit() {
    showDialog(
      context: context,
      builder: (context) {
        String newHabit = '';
        return AlertDialog(
          title: const Text('新しい習慣を追加'),
          content: TextField(
            autofocus: true,
            onChanged: (value) => newHabit = value,
          ),
          actions: [
            TextButton(
              onPressed: () {
                if (newHabit.isNotEmpty) {
                  setState(() {
                    _habits.add(newHabit); // リストに追加して画面更新
                  });
                }
                Navigator.pop(context); // ダイアログを閉じる
              } ,
              child: const Text('追加'),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('今日の習慣'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      // リスト表示部分
      body: ListView.builder(
        itemCount: _habits.length,
        itemBuilder: (context, index) {
          return Card(
            margin: const EdgeInsets.all(8),
            child: ListTile(
              leading: const Icon(Icons.check_circle_outline),
              title: Text(_habits[index]),
              onTap: () {
                // ここに完了処理を書く予定
                print('${_habits[index]} をタップしました');
              },
            ),
          );
        },
      ),
      // 右下の「＋」ボタン
      floatingActionButton: FloatingActionButton(
        onPressed: _addHabit,
        child: const Icon(Icons.add),
      ),
    );
  }
}

5. アプリを起動してデバッグする

コードが書けたら、さっそく先ほど起動したエミュレーターで動かしてみましょう。

  1. VS Codeの右下を見て、接続されているデバイス名（例: sdk gphone64...）が表示されているか確認します。
  2. キーボードの F5 キーを押します（またはメニューの「実行」→「デバッグの開始」）。

最初のビルドには数分かかりますが、待っているとエミュレーター画面にアプリが表示されるはずです！

⚡️ 便利機能「ホットリロード」

アプリが動いている状態で、コードの primarySwatch: Colors.indigo の部分を Colors.red に変えて保存（Ctrl + S）してみてください。
一瞬でアプリの色が変わりましたよね？
これがFlutter最強の機能「ホットリロード」です。アプリを再起動せずにデザインを調整できるので、開発スピードが爆上がりします。

まとめ：まずは「動くもの」を手元に

おめでとうございます！これであなたのPCの中に、あなただけのAndroidアプリが誕生しました。

今はまだ「アプリを閉じると追加したデータが消える」状態ですが、モバイルアプリらしい動き（リスト表示、追加ボタン、ダイアログ）は実装できました。

-🔰基礎技術