FlutterでHello worldを表示する方法

この記事では、FlutterでHello worldを表示する方法について書いていきます。

サンプル
解説

サンプル

import 'package:flutter/material.dart';

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

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

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

解説

import 'package:flutter/material.dart';

import:自身で制作したり他者が制作したファイルやライブラリの機能を読み込みます。
package:flutter/material.dart: Googleが制作したUI「マテリアルデザイン」（テキスト、ボタン、画面遷移の仕組み、レイアウト、カラーなど）がまとまった Flutterの基本的なライブラリです。

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

void mainは、「起動処理（エントリーポイント）」です。

void main()：このmainが書いているところからプログラムがスタートします。アプリを実行すると、上から順に実行されます。ちなみにvoid は「戻り値はない」という意味です。
runApp():Flutterで使う関数です。引数に渡されたUI画面（ウェジェット）を読み込みスマホやPCの画面上に実際に描画・表示を開始させます。
const MainApp():画面全体の基礎となるクラス（アプリ本体）の呼び出しています。const は「途中で変更しない定数（イミュータブル（Immutable）である」とFlutterに伝え、アプリの動作を軽量・高速化しています。

実行したら、MainApp（アプリ本体）を画面いっぱいに表示させてと指示しています。

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

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

class MainApp extends StatelessWidget：「MainApp」という名前の画面（ウィジェット）を定義しています。StatelessWidget（ステートレス・ウィジェット）とは、画面が表示された後に見た目やデータの変化が起きない画面を作るときに用いられます。extendsはStatelessWidgetの特性や性質を継承しています。
const MainApp({super.key});：コンストラクタ（初期化の処理）です。アプリの性能を最適化（無駄な再描画を防止）するために const キーワードが付いています。
@override Widget build(BuildContext context) ：画面に何を描画するか（デザインの構造）を決定するメインの場所です。Flutterはこの build メソッドの中身を実行して画面を作ります。@overridは書かなくても問題ありませんが、読んだ時にわかりやすいため書いています。
return const MaterialApp(...) ：アプリ全体でGoogleのマテリアルデザイン（共通のデザインルール）を使うための基礎となる枠組みを用意しています。
home: Scaffold(...) ：Scaffold（スキャフォールド）は、アプリの基本的なウィジェット（画面構造）（上部のアプリバーや背景色など）を提供するパーツです。基本的にはScaffoldの入れ子としてtitleやbodyを書きます。
body: Center(...) ：画面の中央（Center）にbodyの入れ子を配置します。
child: Text('Hello World!')： 上記でも書いたようにbody：Centerと指示しているので「Hello World!」という文字（Text）を画面中央に表示します。

アプリを起動すると、背景が真っ白な画面の真ん中に 「Hello World!」 と書かれたテキストが表示されます。