🌕 Flutter基礎：StatelessWidgetの書き方と順番【初心者向けテンプレ付き】

Flutterを学び始めたばかりの方にとって、最初に触れるのが StatelessWidget（ステートレスウィジェット）です。
ここでは、状態を持たないUIを作る際の構造的な書き方を、順を追って丁寧に解説します。

✅ StatelessWidgetとは？

「状態（State）を持たない」Flutterの基本的なUI部品。
表示だけを担当し、ボタンやラベル、画像など“変化しない見た目”の構築に使われます。

📝 書く順番と構造

① クラス定義

dartコピーする編集するclass MyWidget extends StatelessWidget {

• StatelessWidget を継承して定義します。
• クラス名は自由ですが、先頭は大文字で始めるのが慣例です。

② プロパティ（受け取る値）を定義

dartコピーする編集するfinal String title;
final bool isChecked;

• final を使って不変の値として定義。
• 親ウィジェットから渡される情報（テキストや状態など）を保持します。

③ コンストラクタ

const MyWidget({
  super.key,
  required this.title,
  required this.isChecked,
});

• const を付けることで再描画を最適化できます。
• required により、必ず値を指定して使うようになります。

④ build()メソッド

@override
Widget build(BuildContext context) {
  return Container(); // ここにUIを構築
}

• build メソッドの中で、実際に画面に表示するウィジェットを返します。
• Text, Column, Row, Icon, Image, ListView などを使ってUIを作成。

📦 フルテンプレート（雛形）

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  // ① プロパティ
  final String title;
  final bool isChecked;

  // ② コンストラクタ
  const MyWidget({
    super.key,
    required this.title,
    required this.isChecked,
  });

  // ③ UI構築
  @override
  Widget build(BuildContext context) {
    return Container(
      // UIはここに
    );
  }
}

🌱 StatelessWidget が向いている場面

🪞まとめ：書く順番の覚え方

1. class MyWidget extends StatelessWidget
2. final でプロパティを書く
3. const コンストラクタで受け取る
4. build() の中に UI を書く