このサイトはアドセンスやアフィリエイト広告を利用しています

Flutter&Dart

Flutter StatelessWidget完全ガイド：正しい書き方と構造を徹底解説

Flutter StatelessWidget完全ガイド：正しい書き方と構造を徹底解説

Flutterでアプリを開発していると、必ず出会うのがStatelessWidgetです。今回は、StatelessWidgetの正しい書き方と構造について、実例を交えながら詳しく解説していきます。

StatelessWidgetとは？

StatelessWidgetは、その名の通り状態（State）を持たないウィジェットです。一度作成されると、内容が変わることがありません。表示される内容は、親ウィジェットから渡されるプロパティによって決まります。

StatelessWidgetの基本構造

StatelessWidgetを作成する際は、以下の4つのステップを順番に実装していきます。

1. クラス定義（StatelessWidgetを継承）

まずはStatelessWidgetを継承したクラスを定義します。

dartclass MyWidget extends StatelessWidget {

2. プロパティの定義（finalで宣言）

親ウィジェットから受け取る値をfinalで定義します。StatelessWidgetは自分で状態を持てないため、すべての値は外部から渡す必要があります。

dartfinal String title;
final bool isChecked;

3. コンストラクタの実装

プロパティを受け取るコンストラクタを定義します。必須のパラメータにはrequiredを付けます。

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

ポイント： constキーワードを付けられるのがStatelessWidgetの特徴で、パフォーマンス向上にも繋がります。

4. build()メソッドの実装

最後に、UIを構築するbuild()メソッドを実装します。

dart@override
Widget build(BuildContext context) {
  return Text(title);
}

完全なテンプレートコード

以下が、StatelessWidgetの完全なテンプレートです：

dartimport 'package:flutter/material.dart';

// ① StatelessWidgetの定義
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 Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: const TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
        Icon(
          isChecked ? Icons.check_box : Icons.check_box_outline_blank,
        ),
      ],
    );
  }
}

StatelessWidgetが適している場面

StatelessWidgetは以下のような場面で使用するのが適しています：

表示のみを行う場合

  • ラベルや画像の表示
  • 静的なレイアウト
  • アイコンやテキストの表示

状態変更が外部で管理されている場合

  • 親ウィジェットで状態を管理し、子ウィジェットは表示のみを担当
  • データの受け渡しのみで、内部で状態を変更しない

StatelessWidget vs StatefulWidget

両者の違いを表で整理してみました：

項目StatelessWidgetStatefulWidget
状態管理状態を持たない状態を持てる
再描画親から新しい値が渡された時のみsetState()で任意のタイミング
初期化処理不可（initStateなし）可能（initStateあり）
使用例ラベル、画像、静的レイアウトフォーム、チェックボックス、カウンター
パフォーマンスconstで最適化可能状態変更時に再描画

まとめ

StatelessWidgetは、シンプルで再利用可能なUIコンポーネントを作る際の基本となります。状態を持たないからこそ、予期しない副作用が起こりにくく、テストも書きやすいという利点があります。

適切な場面でStatelessWidgetを使い分けることで、保守性の高いFlutterアプリケーションを開発できるでしょう。まずはこのテンプレートを参考に、自分なりのStatelessWidgetを作ってみてください！

-Flutter&Dart