【Flutter】「Hello, World」を表示するまで

Flutter を使って、シンプルな「Hello, World!」を表示するアプリを作成する手順を紹介します。

Flutterのインストール
プロジェクトの作成
コードの確認と実行
アプリの実行
コードの解説
ReactやNext.jsとの類似点
まとめ

Flutterのインストール

まず、Flutter がインストールされているか確認しましょう。

flutter --version

インストールされていない場合は、Flutter 公式サイトからインストールしてください。

プロジェクトの作成

新しいFlutterプロジェクトを作成します。

flutter create my_app
cd my_app

これで基本的な Flutter プロジェクトが作成されます。

コードの確認と実行

プロジェクトが作成されると、lib/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 const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

シンプルに「Hello, World!」を表示するだけの場合は、上記のコードで問題ありません。

アプリの実行

以下のコマンドでアプリを実行できます：

# Webブラウザで実行
flutter run -d chrome

実行すると、「Hello, World!」というテキストが画面中央に表示されます。

コードの解説

作成したコードの各部分を解説します。

1. import 文

import 'package:flutter/material.dart';

Flutter の Material Design コンポーネントを使用するためのインポート文です。

Material Design は Google が開発したデザインシステムで、Flutter でアプリを作成する際によく使用されます。

2. main 関数

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

main関数は、Dart プログラムのエントリーポイントです。

runApp()関数にMyAppウィジェットを渡すことで、アプリを起動します。

3. MyApp クラス

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

StatelessWidget: 状態を持たないウィジェットです。一度描画されると変更されません。
MaterialApp: Material Design のテーマやナビゲーションを提供するウィジェットです。
Scaffold: アプリの基本的な構造（AppBar、Body、FloatingActionButton など）を提供するウィジェットです。
Center: 子ウィジェットを画面の中央に配置するウィジェットです。
Text: テキストを表示するウィジェットです。

ウィジェットツリーの構造

MaterialApp
  └── Scaffold
      └── body: Center
          └── child: Text('Hello, World!')

この階層構造によって、テキストが画面中央に表示されます。

ReactやNext.jsとの類似点

Flutter は、React や Next.js と似たアプローチを取っています：

コンポーネント指向: Widget（Flutter）= Component（React）
宣言的 UI: 状態に基づいて UI を宣言的に記述
関数型/クラス型コンポーネント: StatelessWidget や StatefulWidget は関数コンポーネントやクラスコンポーネントに似ている
ホットリロード: コード変更をすぐに反映（React の Fast Refresh と同様）

例えば、React で書くとこんな感じになります：

// React
function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
      }}
    >
      <p>Hello, World!</p>
    </div>
  );
}

export default App;

// Flutter
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

構造が似ているため、React や Next.js の経験があれば、Flutter にも馴染みやすいでしょう。

まとめ

この記事では、Flutter で「Hello, World!」を表示するアプリを作成する手順を紹介しました。

基本的な流れ：

Flutterプロジェクトを作成
lib/main.dartにコードを記述
flutter runで実行

FlutterはReactやNext.jsと似たアプローチで、モバイルアプリ開発を Web 開発に近い感覚で行えます。

次のステップとして、ボタンやリスト、画像の表示など、より複雑な UI に挑戦してみてください。

リンク