サイトアイコン 【TechGrowUp】

Flutter開発入門11 StatefulWidgetとは

はじめに

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

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('押してね'),
        ),
      ],
    );
  }
}

解説

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

StatefulWidgetの活用シーン

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

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

StatefulWidgetのメリットと注意点

メリット

注意点

まとめ

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

モバイルバージョンを終了