【Flutter】画面構築の基本

Flutterは、クロスプラットフォームで使えるUIフレームワークです。

「1つのコードでAndroidやiOS、Webまで幅広く対応できる」ことや、「すべてがウィジェット」という明快な考え方が特徴です。

本記事では、Flutterでの画面構築の基本的な流れや用語について解説します。

Flutterプロジェクトのフォルダ構成

Flutterで新しいプロジェクトを作成すると、基本的なフォルダ構成は以下のようになります。

my_app/
  ├─ android/           // Android向けのネイティブコードや設定ファイル
  ├─ ios/               // iOS向けのネイティブコードや設定ファイル
  ├─ lib/               // Flutterアプリ本体のDartコード
  │   └─ main.dart      // アプリが動き始める「入口」となるDartファイル
  ├─ test/              // テストコードを置く場所
  ├─ web/               // Web向けビルド時に使用
  ├─ pubspec.yaml       // パッケージやアセット(画像、フォント)の設定ファイル
  └─ ...

libディレクトリ内にアプリのメインとなるコードを書きます。

pubspec.yamlには使いたい外部ライブラリ（機能拡張パッケージ）や、画像・フォントの情報を記述します。

最初のうちは、このlibディレクトリ内だけでUIや機能を実装していくイメージです。

すべてがウィジェット

Flutterでは、テキストや画像、ボタンはもちろん、画面全体までも「ウィジェット」という概念で表します。

ウィジェットとは、UI（ユーザインタフェース）を構成する部品と考えてください。

ボタンもテキスト表示も「部品」であり、これらを組み合わせることでアプリの画面を作ります。

ウィジェットには大きく2つの種類があります。

このように「ウィジェットを積み上げる」ことで画面が作られるのが、Flutterの大きな特徴です。

Dartの基本概念（クラス・プロパティ・メソッド・インスタンス・コンストラクタ）

Flutterでウィジェットを扱うときは、Dartというプログラミング言語を使います。

このDartでは、ウィジェットを「クラス（class）」という設計図を使って定義します。

クラスは「モノの設計図」と考えると理解しやすいです。

クラス（Class）とは

クラスは、何かを表すための「設計図」のようなものです。

例えば、「犬」を表す場合、

• 犬は「名前」や「年齢」、「色」といった特徴を持つ
• 犬は「吠える」や「走る」といった動作ができる

こうした特徴や動作を「犬」というひとまとまりとして表現するのがクラスです。

クラスから実際に「犬」を作り出すと、それは「オブジェクト」と呼ばれる具体的な存在になります。

プロパティ（Property）とは

プロパティはクラスが持つ「特徴」をしまっておく場所（変数）です。

「犬」クラスの例では、

• name（名前）
• age（年齢）
• color（色）

がプロパティです。

これらは設計図（クラス）の中にある「情報を入れる箱」です。

「ポチ」や「3歳」、「茶色」といった実際の値を入れることで、具体的な犬（オブジェクト）となります。

メソッド（Method）とは

メソッドは「クラスが持つ機能や動作」をまとめたものです。

「犬」で言えば、「吠える」「走る」という動作がメソッドになります。

ボタンを押したら数字が増える、文字列を画面に表示する、といった動作もメソッドとして定義します。

インスタンス（Instance）とは

インスタンスは、「クラスをもとに実際に作られたオブジェクト」のことです。

「犬」クラスから「ポチ」という犬を作ったら、「ポチ」はDogクラスのインスタンスです。

インスタンスとは、「設計図（クラス）から生まれた実体（形になったもの）」と覚えると分かりやすいです。

コンストラクタ（Constructor）とは

コンストラクタは、新しいインスタンス（実体）を作るときに呼ばれる「特殊なメソッド」です。

設計図からモノを作るときに、どんな情報（名前、年齢、色など）を入れるかを指定して、完成品（インスタンス）を作る処理がコンストラクタです。

例えば、「犬」クラスのコンストラクタで、犬のname、age、colorを指定すれば、その情報を持った「ポチ」という犬のインスタンスができます。

（例）

class Dog {
  String name;  // 犬の名前を入れるプロパティ
  int age;      // 犬の年齢を入れるプロパティ
  String color; // 犬の色を入れるプロパティ

  // コンストラクタ：新しい犬(インスタンス)を作るときに呼ばれる
  Dog(this.name, this.age, this.color);
}

// インスタンス化（実体化）
Dog myDog = Dog("ポチ", 3, "茶色");

// こうしてmyDogには、nameに"ポチ"、ageに3、colorに"茶色"が入った犬オブジェクトができあがる

このように、myDogはDogクラス（設計図）から作り出した、具体的な犬（インスタンス）です。

FlutterのTextウィジェットも、同じ仕組みです。

Textクラス（設計図）に表示したい文字（”Hello, Flutter!”）やテキストのスタイルをコンストラクタで渡して、新しいTextインスタンスを作っています。

命名規則（UpperCamelCaseとlowerCamelCase）

Dartでは、クラス名やメソッド名などに一定の書き方ルール（コーディング規約）があります。

これらの決まりを守ると、コードが読みやすくなります。

基本構造

Flutterアプリの処理は、lib/main.dartファイルにあるmain( )関数から始まります。

これが「エントリーポイント」です。

「エントリーポイント」とは、アプリが起動したときに最初に実行される入口のことです。

また、runApp( )という関数を使って、作ったウィジェットを画面上に表示する処理をスタートさせます。

これを「アプリ全体を画面に描画し始めるための起点」と考えると分かりやすいでしょう。

MaterialAppはFlutterでよく使うウィジェットで、アプリ全体にマテリアルデザインのスタイルやテーマを適用します。

これを「アプリ全体をまとめる枠組み」として利用し、その中に実際の画面ウィジェット（ホーム画面など）を組み込みます。

import 'package:flutter/material.dart';

void main() {
  // アプリが起動すると最初にこの関数が呼ばれます（エントリーポイント）
  runApp(MyApp()); 
}

// MyAppというクラスでアプリ全体の構成（フレーム）を定義します。
// このようにクラス名はUpperCamelCaseで書きます（MyApp）
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // MaterialAppでアプリの基本的な構造（タイトルやテーマなど）を設定します。
    // ここでは初期表示する「home」（最初に見せる画面）としてMyHomePageを指定しています。
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,  // アプリ全体のテーマカラー
      ),
      home: MyHomePage(title: 'Flutter Home Page'), // 最初に表示する画面
    );
  }
}

// MyHomePageクラスは実際の画面部分を表します。
// titleというプロパティ（特徴）を持ち、コンストラクタで受け取っています。
class MyHomePage extends StatelessWidget {
  final String title; // ここがプロパティ。画面上部に表示するテキストを保持します。

  MyHomePage({required this.title}); // コンストラクタでtitleを受け取る

  @override
  Widget build(BuildContext context) {
    // Scaffoldは画面の骨組みとなるウィジェットです。
    // AppBar(画面上部のバー)やbody(メイン部分)を設定できます。
    return Scaffold(
      appBar: AppBar(
        title: Text(title), // 受け取ったtitleをAppBar上に表示
      ),
      body: Center(
        child: Text('Hello, Flutter!'), // 画面中央にテキスト表示
      ),
    );
  }
}

この例では

1. main( )が呼ばれ、runApp(MyApp( ))でアプリ全体がスタートします。
2. MyAppでMaterialAppを使い、アプリの基本デザインや最初の画面（MyHomePage）を設定します。
3. MyHomePageではScaffoldを使って、AppBar（上部バー）とText表示部分を定義しています。

homeプロパティやMyHomePageは、「起動時にユーザーが最初に見る画面」を指定するために使っています。

ちなみに、iOSシミュレーターで実行すると以下の画面が表示されます。

まとめ

本記事では、以下の点を解説しました。

• Flutterプロジェクトのフォルダ構成と、libディレクトリに主要なコードを書く流れ
• 「すべてがウィジェット」という考え方
• クラス（設計図）とプロパティ（特徴を入れる箱）、メソッド（動作や機能）、インスタンス（実体）やコンストラクタ（インスタンスを作るときに呼ばれる特別なメソッド）の意味
• UpperCamelCaseやlowerCamelCaseといった命名規則
• アプリ起動時の流れ（エントリーポイントから画面表示まで）の基本構造

Flutterは、UIを「ウィジェット」というパーツ絵組み立てるため、慣れてくると直感的な画面構築が可能になります。

基本となるクラス・プロパティ・コンストラクタなどをしっかり押さえて、ぜひ実際にコードを書きながら理解を深めてください。

これにて、Flutterでの画面構築の基本的な流れや用語についての解説を終わります。