【Flutter】StatefulWidgetの使い方とサンプルコードの解説

Flutter StatefulWidgetの使い方とサンプルコードの解説

概要

Flutterは、Googleが開発したクロスプラットフォームアプリケーション開発フレームワークであり、美しいユーザーインターフェースを構築するためのツールセットを提供しています。Flutterでは、StatefulWidgetを使用して、アプリケーションの状態を管理することができます。この記事では、StatefulWidgetの基本的な使い方とサンプルコードの解説をご紹介します。

StatefulWidgetとは

Flutterでは、ウィジェットは2つのタイプに分かれています。1つはStatelessWidgetであり、状態を持たず、変更されないウィジェットです。もう1つはStatefulWidgetであり、状態を持つウィジェットです。StatefulWidgetは、アプリケーションの状態が変化するたびに再描画され、新しい状態を表示することができます。

StatefulWidgetの使い方

StatefulWidgetを使用するには、まずStatefulWidgetクラスを継承した新しいウィジェットを作成する必要があります。そして、新しいウィジェットの状態を管理するためのStateクラスを作成します。StatefulWidgetは、ビルドメソッドを持ち、ウィジェットのビルドを行うたびに呼び出されます。ビルドメソッド内で、ウィジェットの状態に基づいてUIを作成することができます。

以下は、StatefulWidgetの使い方を示す簡単なサンプルコードです。


import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('StatefulWidgetサンプル'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'ボタンを押した回数:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

このサンプルコードでは、MyWidgetというStatefulWidgetを作成し、_MyWidgetStateというStateクラスを作成しています。Stateクラスでは、_counterという変数を管理し、_incrementCounterメソッドを使用してカウンターをインクリメントします。ビルドメソッド内では、UIを作成し、_counterの値を表示しています。

サンプルコードの解説

サンプルコードでは、MyWidgetというStatefulWidgetを作成しています。このウィジェットは、Scaffoldウィジェットを返すbuildメソッドを持ちます。Scaffoldウィジェットは、アプリケーションの基本的なレイアウトを提供します。

Scaffoldウィジェット内では、AppBarウィジェットを設定し、タイトルを表示しています。また、bodyプロパティにはCenterウィジェットを設定し、Columnウィジェットをその中に配置しています。Columnウィジェット内には、Textウィジェットが2つあり、_counterの値を表示しています。

また、floatingActionButtonプロパティには、FloatingActionButtonウィジェットを設定し、_incrementCounterメソッドを呼び出すことでカウンターをインクリメントすることができるボタンを表示しています。

まとめ

Flutterでは、StatefulWidgetを使用してアプリケーションの状態を管理することができます。StatefulWidgetは、ウィジェットの状態が変化するたびに再描画され、新しい状態を表示することができます。この記事では、StatefulWidgetの使い方と簡単なサンプルコードの解説をご紹介しました。Flutterを使用してアプリケーションを開発する際には、StatefulWidgetを上手に活用して、動的なユーザーインターフェースを作成してみてください。

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x