【Flutter入門】Flutter超基礎 – 初期状態のmain.dartに書かれてるのは？

Flutter
2023.03.07

Flutterとは？開発環境を構築してみようでは、空の初期プロジェクトを作成しました。初期プロジェクトには以下のようにHello World!と表示させるコードがmain.dartに書かれています。

main.dartに書かれている内容は以下の通りです。はじめて見るとなんのこっちゃという感じです。

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!'),
        ),
      ),
    );
  }
}

main.dartとは

Flutterアプリケーションを開発する場合、ソースコードは主にlibフォルダ内に書かれます。main.dartはその中でも特殊なDartファイルです。

main.dartは、Flutterアプリケーションのエントリーポイントです。アプリケーションが実行されると、Flutterはmain.dartを読み込んで、アプリケーションの初期化を行います。そのため、main()メソッドを定義してアプリケーションを開始するための準備をしたり、ルートとなるウィジェットを構築するコードを書きます。

初期プロジェクトのmain.dartを解説

main.dartの記述をひとつずつ解説していきます。

import 'package:flutter/material.dart';

このコードはFlutterの標準的なウィジェットを多数含んだmaterial.dartというパッケージをインポートしています。例えば、ボタン、テキストフィールド、プログレスインジケータ、チェックボックス、ラジオボタンといったウィジェットが含まれています。

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

このコードは、Flutterアプリケーションのエントリーポイントであるmain関数を定義しています。main関数は、アプリケーションの起動時に最初に実行されます。

runApp関数は、アプリケーションのルートウィジェットを起動するために使われています。そのルートウィジェットがMainAppです。MainAppの定義は後ほど出てきます。
constを使っているのでMainAppが定数であることが分かります。constを使ってウィジェットがが不変であることを保証するとパフォーマンスが向上します。ただ、ウィジェット内で変数を持っている場合など動的な要素を持つ場合はconstは使用しません。

runApp関数で呼び出すMainAppクラスを定義しています。

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

  @override
  Widget build(BuildContext context) {
    // 省略
  }
}

Flutterでは、UI要素であるウィジェットは、状態を持たない（StatelessWidget）か、状態を持つ（StatefulWidget）の2種類に分けられます。ルートウィジェットは状態を持たないStatelessWidgetでなければならないため、MainAppはStatelessWidgetを継承しています。

build関数は、このウィジェットのビューを作成するために呼び出されます。MainAppは、build関数でMaterialAppを返すためのウィジェットであるため、MaterialAppが実際のルートウィジェットといえます。

return const MaterialApp(
  home: Scaffold(
    body: Center(
      child: Text('Hello World!'),
    ),
  ),
);

このコードは、MaterialAppウィジェットを作成しています。MaterialAppは、Flutterでマテリアルデザインを使用してアプリケーションを作成するためのウィジェットです。
home引数は、アプリケーションのホーム画面となるウィジェットを指定します。ここでは、Scaffoldウィジェットが指定されています。

Scaffoldは、アプリケーションの基本的な UI 要素を作れるウィジェットです。AppBarという引数を使ってアプリケーションバーを指定したり、body引数でアプリケーションのメインコンテンツに表示するウィジェットを指定できます。ここでは、body引数にCenterウィジェットが指定されています。

Centerは、child引数で指定した子要素を中央に配置するウィジェットです。このコードではTextウィジェットが指定されているので、Hello World!というテキストが中央に表示されています。

以上がmain.dartの解説となります。Flutterのアプリがどのように構成されているかなんとなくつかめたのではないかと思います。

タイトルとURLをコピーしました