Flutter入門: 本当にシンプルなアプリケーションを作成する

はじめに

この記事では、Flutterの基本を学びたい初心者の方々のために、最初の一歩としてシンプルなアプリケーションを作成する方法を説明します。プログラミング初心者がFlutterを始める際、環境構築からプロジェクト作成まではできても、いざコードを書こうとすると何から手を付けていいか分からなくなることがあると思います。
そこで、Flutterの初期サンプルコードをもっと簡単にして、基本的な「Hello, Flutter!」というテキストを表示するアプリを作成し、解説していきたいと思います。

1. lib/main.dartファイルを開く

まず、Flutterプロジェクトのlibディレクトリ内にあるmain.dartファイルを開きます。これからはこのファイルにいろいろ書いていきます。

2. コードの編集

初めての人はmain.dartファイルに沢山訳の分からない文字がたくさん並んでいると思うのですが、すべて消して、以下のコードをmain.dartファイルにコピーして追加してください。これで、画面に「Hello, Flutter!」というテキストを表示するシンプルなアプリケーションが作成されます。

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',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo Home Page'),
        ),
        body: const Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

コードの説明

1. import 'package:flutter/material.dart';

この行は、Flutterの基本的な部品（ウィジェット）を使えるようにするためのものです。例えば、ボタンやテキストなどの部品です。

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

ここからアプリが始まります。mainという関数の中でrunAppという関数を呼び出して、MyAppという名前のアプリをスタートさせます。

3. class MyApp extends StatelessWidget

MyAppという新しいクラス（設計図）を作ります。このクラスは、画面に何を表示するかを決めるためのものです。StatelessWidgetは「変わらない部品」を作るためのものです。

4. @override

この行は、親クラス（StatelessWidget）からメソッドを上書きすることを示しています。

5. Widget build(BuildContext context)

このメソッド（関数）は、画面に表示する部品を作るためのものです。

6. return MaterialApp( ... );

MaterialAppは、アプリ全体の設定を行う部品です。テーマやルート（画面のナビゲーション）を管理します。

7. title: 'Flutter Demo',

アプリのタイトルを設定します。これは後で使うことがありますが、今は表示されません。

8. home: Scaffold( ... );

Scaffoldは、画面の基本的なレイアウトを提供する部品です。ここにアプリの主要な要素を配置します。

9. appBar: AppBar( ... );

AppBarは、画面の上部に表示されるバーです。ここにタイトルなどを表示します。

10. body: Center( ... );

bodyは、画面の主な内容を表示する部分です。ここではCenterという部品を使って、内容を中央に配置しています。

11. child: Text('Hello, Flutter!'),

Textは、文字を表示するための部品です。ここでは「Hello, Flutter!」という文字を表示します。

---

これで、Flutterの基本的な構造とコードの役割がわかると思います。
質問や気になる点があれば、遠慮なく聞いてください！