Flutter開発入門11 StatefulWidgetとは

Daichi Mizuno

4か月前

はじめに

　Flutterを使ってアプリケーションを開発する際、ユーザーの操作やデータの変更に応じてUIが変化するコンポーネントを作成する必要があります。そのために使われるのがStatefulWidgetです。本記事では、StatefulWidgetの基本的な使い方や実際の活用方法について、わかりやすく解説します。

StatefulWidgetとは
1. StatefulWidgetの基本構造
2. 解説
StatefulWidgetの活用シーン
StatefulWidgetのメリットと注意点
1. メリット
2. 注意点
まとめ

StatefulWidgetとは

　StatefulWidgetは、Flutterにおける状態を持つウィジェットです。StatelessWidgetと異なり、StatefulWidgetはその状態が変わるたびに再描画され、動的なUIを提供します。たとえば、ボタンを押すとテキストが変わる、フォームに入力するたびに内容が更新されるといったシナリオで使用されます。

StatefulWidgetの基本構造

　StatefulWidgetを使って、ボタンを押すたびにテキストが変わる簡単な例を見てみましょう。

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('StatefulWidget Example'),
        ),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String _displayText = 'Hello, Tech Grow Up!';

  void _updateText() {
    setState(() {
      _displayText = 'ボタンが押された!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          _displayText,
          style: const TextStyle(fontSize: 24),
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: _updateText,
          child: const Text('押してね'),
        ),
      ],
    );
  }
}

解説

MyAppクラス: MaterialAppとScaffoldを使って基本的なアプリケーション構造を定義します。
MyStatefulWidgetクラス: StatefulWidgetを継承したウィジェットです。このウィジェットは状態を持ち、ユーザーの操作に応じてUIが変化します。
_MyStatefulWidgetStateクラス: ここで状態（_displayText）を定義し、setStateメソッドを使って状態を更新します。ボタンが押されるとテキストが変わる仕組みです。

この例では、ボタンを押すと表示されるテキストが「ボタンが押された!」に変わります。StatefulWidgetを使うことで、ユーザーの操作に応じて動的にUIを変更することが可能です。

StatefulWidgetの活用シーン

　StatefulWidgetは、次のようなシーンで役立ちます。

ユーザー入力の管理: フォームやチェックボックス、スライダーなど、ユーザーの入力や選択に応じてUIが変わる要素を管理するために使用します。
アニメーション: アニメーションの状態管理や、時間経過に応じて変化するUIを実現するために活用されます。
カウンターやインクリメント: ボタンをクリックして数値を増やすようなインタラクティブな要素に最適です。
タブやページナビゲーション: 複数のページやタブを持つアプリケーションで、ユーザーの操作に応じて状態を保持し、ページ間のデータを管理します。

StatefulWidgetのメリットと注意点

メリット

動的なUIの実現: ユーザーの操作やデータの変更に応じて、リアルタイムにUIを更新できるため、インタラクティブなアプリケーションを構築するのに最適です。
状態管理の簡便さ: StatefulWidgetは、内部で状態を管理するため、UIの一部だけを効率的に更新することができます。

注意点

パフォーマンスに注意: 状態が頻繁に変わる複雑なウィジェットツリーを持つアプリケーションでは、適切にsetStateを管理しないとパフォーマンスが低下する可能性があります。
状態のリセット: StatefulWidgetの状態がリセットされることがあり、アプリケーションの設計によっては意図しない動作を引き起こすことがあります。そのため、状態の管理方法には注意が必要です。

まとめ

　StatefulWidgetは、Flutterで動的なUIコンポーネントを作成する際に欠かせないクラスです。状態を持たないシンプルなStatelessWidgetとは異なり、StatefulWidgetはユーザーの操作やデータの変化に応じてUIをリアルタイムに更新することができます。Flutterアプリの中でインタラクティブな要素を作成したい場合、StatefulWidgetを効果的に活用することが成功への鍵となります。