Flutter開発入門10 StatelessWidgetとは

Flutter

はじめに

　FlutterでUIを構築する際、まず理解しておくべき重要なコンポーネントがStatelessWidgetです。StatelessWidgetは、状態を持たないWidgetを作成するために使用されます。本記事では、StatelessWidgetの基本的な使い方と、その役割について詳しく解説します。前回のFlutter入門開発はこちらです。

Flutter開発入門9 InheritedWidgetについて
FlutterのInheritedWidgetを使った状態管理の基本を学びましょう。効率的なデータの伝達方法や具体的な活用シーンをわかりやすく解説。初心者から上級者まで役立つ情報を提供します。
techgrowup.net
2024.09.01

StatelessWidgetとは

　StatelessWidgetは、その名の通り「状態（state）」を持たないウィジェットです。表示される内容が一度決まると、その内容が変化しないため、再描画や再構築が必要ないシンプルなUIコンポーネントに使用されます。

　例えば、テキストや画像を表示するためのWidgetは、ユーザーの操作に応じて変化する必要がないため、StatelessWidgetとして実装されることが一般的です。

StatelessWidgetの基本構造

StatelessWidgetを使って簡単なアプリケーションを作成する例を見てみましょう。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('StatelessWidget Example'),
        ),
        body: Center(
          child: MyStatelessWidget(),
        ),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Text(
      'Hello, Tech Grow Up!',
      style: TextStyle(fontSize: 24, color: Colors.blue),
    );
  }
}

解説

  • MyAppクラス: StatelessWidgetを使って、アプリ全体の構成を定義しています。MaterialAppをルートとして、Scaffoldで基本的なアプリケーションレイアウトを提供します。
  • MyStatelessWidgetクラス: このクラスがStatelessWidgetの具体的な実装部分です。buildメソッド内で、テキストウィジェットを表示するだけのシンプルなUIを構築しています。

　この例では、画面中央に「Hello, Tech Grow Up!」というテキストが青色で表示されます。テキストや色のプロパティは固定されており、ユーザーの操作によって変化しません。

StatelessWidgetの活用シーン

　StatelessWidgetは、以下のようなシーンで効果的に活用されます。

  • シンプルなUI要素の作成: 複雑な状態管理が不要な場合、StatelessWidgetを使うことで、コードをシンプルに保つことができます。
  • 静的コンテンツの表示: テキスト、画像、アイコンなど、ユーザーの操作に応じて変化しないコンテンツの表示に適しています。
  • デザインの再利用: 繰り返し使用される固定のレイアウトやスタイルを、StatelessWidgetとしてまとめることで、コードの再利用性を高めることができます。

StatefulWidgetとの違い

　StatelessWidgetが「状態を持たない」ウィジェットであるのに対して、StatefulWidgetは「状態を持つ」ウィジェットです。StatefulWidgetでは、ユーザーの操作やデータの変更に応じてUIが再構築されるため、インタラクティブなコンポーネントに使用されます。

　例えば、ボタンをクリックした際に表示される内容が変わる場合や、チェックボックスの状態が変わる場合は、StatefulWidgetを使用します。

StatelessWidgetを選ぶべき場合

  • 固定されたデータの表示: 一度表示されたら変わらないデータ（例：記事の見出し、ロゴ、ラベル）を表示する場合。
  • 単純なデザインの再利用: 複雑なロジックを含まないUIパーツを再利用する場合。

まとめ

　StatelessWidgetは、シンプルで軽量なUIコンポーネントを作成するために不可欠なクラスです。状態管理が不要な部分では、StatelessWidgetを活用することで、コードの保守性とパフォーマンスを向上させることができます。Flutterを始めたばかりの方も、まずはこのStatelessWidgetから学び、その後で状態を持つStatefulWidgetを学ぶと良いでしょう。

コメント