はじめてのFlutterアプリ

このページで学ぶこと

Flutter プロジェクトを作成できる
Dart の基本的な文法がわかる
エミュレータでアプリを動かせる

プロジェクトを作成する

ステップ1: 新しいプロジェクトを作る

VS Code で Ctrl + Shift + P（Mac: Cmd + Shift + P）を押してコマンドパレットを開く。
「Flutter: New Project」を選んで「Application」を選択、保存先を選んでプロジェクト名を入力する。

またはターミナルで：

flutter create my_app
cd my_app

ステップ2: エミュレータを起動する

Windows: Android Studio → Device Manager → エミュレータを起動
Mac: Xcode → Open Developer Tool → Simulator

または VS Code の右下にある「No Device」をクリックして、起動中のエミュレータを選択する。

ステップ3: アプリを実行する

flutter run

または VS Code で F5 キー（デバッグ実行）。

デフォルトのカウンターアプリが起動すれば成功です！

プロジェクトの構造

my_app/
├── lib/
│   └── main.dart        ← アプリのエントリーポイント（ここから始まる）
├── android/             ← Android 用のネイティブコード
├── ios/                 ← iOS 用のネイティブコード
├── pubspec.yaml         ← パッケージの管理（npm の package.json に相当）
└── test/

Dart の基本文法

Flutter は Dart というプログラミング言語を使います。
C言語やJavaに似た構文なので、C言語経験者にはとっつきやすいでしょう。

変数

// 型推論（var）
var name = 'Flutter';    // String と推論される
var count = 0;           // int と推論される
 
// 型を明示する
String greeting = 'こんにちは';
int age = 18;
bool isLoggedIn = false;
 
// 変更不可の変数
final String appName = 'MyApp';  // 実行時に1度だけ代入できる
const double pi = 3.14;          // コンパイル時定数

関数

// 通常の関数
String greet(String name) {
  return 'こんにちは、$name さん';  // $ で変数を埋め込める
}
 
// アロー関数（1行の場合）
String greetArrow(String name) => 'こんにちは、$name さん';
 
// Null安全（? をつけると null を許容する）
String? maybeNull = null;  // エラーにならない

リストとマップ

// List（JavaScript の Array に相当）
List<String> fruits = ['りんご', 'バナナ', 'みかん'];
fruits.add('ぶどう');
print(fruits[0]);  // りんご
 
// Map（JavaScript のObject に相当）
Map<String, int> scores = {
  '太郎': 85,
  '花子': 92,
};
print(scores['太郎']);  // 85

クラス

class User {
  String name;
  int age;
 
  // コンストラクタ
  User({required this.name, required this.age});
 
  // メソッド
  String greet() {
    return '$name（$age歳）';
  }
}
 
// 使い方
final user = User(name: '田中太郎', age: 20);
print(user.greet());  // 田中太郎（20歳）

main.dart を読んでみよう

デフォルトの lib/main.dart を読んでみましょう。

import 'package:flutter/material.dart';
 
// ① アプリのエントリーポイント
void main() {
  runApp(const MyApp());
}
 
// ② アプリ全体のウィジェット
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(colorSchemeSeed: Colors.blue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

ポイント

main() 関数がアプリの開始点
runApp() にウィジェット（UIの部品）を渡すとアプリが起動する
Widget build(BuildContext context) でUIを定義する

シンプルなアプリに書き換えよう

lib/main.dart を全部消して、以下に書き換えてみましょう。

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('はじめてのFlutter')),
        body: const Center(
          child: Text(
            'こんにちは、Flutter！',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

ファイルを保存すると（Hot Reload）、エミュレータの画面が自動で更新されます。

確認しよう

flutter create でプロジェクトを作成した
エミュレータ/シミュレータでアプリが起動した
main.dart を書き換えて画面が変わることを確認した
Dart の変数・関数・クラスの基本を理解した

AIに聞いてみよう

「Dartのnull安全（null safety）とは何ですか？初心者向けに教えてください」

次のステップ

→ Widgetの基本