Flutterのステートフルウィジェットについて

Flutter
2023.03.13
スポンサーリンク

Flutterには、ステートレスウィジェットとステートフルウィジェットの2つのウィジェットがあります。 今回は、ステートフルウィジェットについて解説します。

ステートフルウィジェットとは？

ステートフルウィジェットは、ウィジェットの状態が変更されたときに再描画されるウィジェットです。

また、ステートフルウィジェットは、ウィジェットの状態を保持するために、Stateオブジェクトを使用します。

ステートフルウィジェットの例

以下は、ステートフルウィジェットの例です。この例では、カウンターの増減を管理するアプリを作成します。

import 'package:flutter/material.dart';

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Count:',
              style: TextStyle(fontSize: 24),
            ),
            Text(
              '$counter',
              style: TextStyle(fontSize: 48),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            counter++;
          });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

この例では、CounterAppというステートフルウィジェットを定義しています。そして、_CounterAppStateというStateオブジェクトを使用して、カウンターの値を保持します。

buildメソッドでは、Scaffoldウィジェットを返します。Scaffoldウィジェットは、アプリの基本的な構造を提供するために使用されます。

bodyプロパティには、CenterとColumnウィジェットを追加し、カウンターを表示します。

floatingActionButtonプロパティには、増加ボタンを追加します。

setStateメソッドは、ウィジェットの状態を変更し、再描画するために使用されます。増加ボタンが押されるたびに、setStateメソッドが呼び出され、カウンターが増加します。

以上が、Flutterのステートフルウィジェットについての簡単な解説と具体例です。

ステートフルウィジェットとステートレスウィジェットの違い

リアルタイムなデータの更新を必要とする場合、ステートフルウィジェットを使用する必要があります。

ステートレスウィジェットは、ビルド時に固定された情報を表示するために使用されます。ステートレスウィジェットは、ウィジェットの状態を保持するStateオブジェクトを持っていません。

ステートフルウィジェットとステートレスウィジェットを組み合わせて使用することもできます。

たとえば、アプリの外観を定義するためにステートレスウィジェットを使用し、アプリの状態を管理するためにステートフルウィジェットを使用することができます。

まとめ

Flutterのステートフルウィジェットは、ウィジェットの状態が変更されたときに再描画されるウィジェットです。

ステートフルウィジェットは、ウィジェットの状態を保持するためにStateオブジェクトを使用します。リアルタイムなデータの更新を必要とする場合、ステートフルウィジェットを使用する必要があります。

ステートレスウィジェットは、ビルド時に固定された情報を表示するために使用されます。ステートレスウィジェットは、ウィジェットの状態を保持するStateオブジェクトを持っていません。

以上が、Flutterのステートフルウィジェットについてのまとめです。

スポンサーリンク