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を上手に活用して、動的なユーザーインターフェースを作成してみてください。