Zenn
📚

【Flutter】StatelessWidgetとStatefulWidget

2023/04/23に公開
Flutter
Dart
tech

FlutterのWidgetsであるStatelessWidgetとStatefulWidgetについてまとめていきます。

参考

Widgetsを使いたい

Flutterでは、Widgetsを利用するには、パッケージをimportする必要があります。import 'package:flutter/widgets.dart'でWidgetsのパッケージをimportすることによって、WidgetsであるStatelessWidgetとStatefulWidgetを使用することができます。

https://flutter.dev/widgets/

しかし、多くの場合では、material.dartをimportしてWidgetsを使用します。
その理由は、widgets.dartをimportすると、Widgetsのみしか使用できませんが、material.dart を import すると青色部分のライブラリ（ファイル）が使えるようになるからです。

↓から引用。詳しくは、こちらの記事を参考にしてください。
https://zenn.dev/mamushi/articles/flutter_import_material

StatelessWidgetとStatefulWidgetの違いを知りたい

それぞれの違いは、状態（state）の管理に関連しています。
StatelessWidgetは、状態を持たない静的なWidget。
StatefulWidgetは、状態を保つ動的なWidgetです。
わかりやすくするために、それぞれのWidgetをどのような場面で使い分けるかを説明すると、StatelessWidgetでは、1度画面が描画されると後から再描画されることはなく状態も変える必要がないときに使われます。一方で、StatefulWidgetでは、buildされ、一度画面の描画が終わっても、ユーザーのインタラクションによってデータが変わる箇所があるときに使われます。

以下では、それぞれのWidgetについての詳しい説明と使用される主なメソッド、サンプルコードを用いて、StatelessWidgetとStatelessWidgetについてより深く理解していきます。

StatelessWidget

StatelessWidgetは、FlutterのWidgets階層の基本的な要素であり、状態を持たないWidgetを表します。状態を持たないとは、Widgetが作成された後にそのデータが変更されることがないことを意味します。StatelessWidgetは、自身が作成されたときに渡される情報（Widgetのプロパティ）に基づいて描画されます。

StatelessWidgetの主なメソッド

build : 画面を描画する

StatelessWidgetを作成するには、StatelessWidgetクラスを継承し、buildメソッドをオーバーライド（自分で書き換えて、Widgetの見た目を定義）して実装します。buildメソッドは、BuildContext（Widgetが配置されるContext）を引数に受け取り、Widgetを返すように設計されています。

StatelessWidgetのサンプルコード

以下は、StatelessWidgetの基本的な使い方を示すサンプルコードです。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Stateless Widget Example'),
        ),
        body: Center(
          child: CustomTextWidget('Hello World'),
        ),
      ),
    );
  }
}

class CustomTextWidget extends StatelessWidget {
  final String text;
  CustomTextWidget(this.text);

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: const TextStyle(fontSize: 24, color: Colors.red),
    );
  }
}

)

上記のコードでは、MyAppとCustomTextWidgetがそれぞれStatelessWidgetを継承しています。CustomTextWidgetは、表示するテキストをコンストラクタで受け取り、buildメソッドでTextウィジェットを返しています。

StatelessWidgetは状態を持たないため、状態を変更する必要がある場合はStatefulWidgetを使用する必要があります。ただし、ウィジェットが状態を持たない場合や、変更されることがない場合は、StatelessWidgetを使用することで、リソースの消費を抑え、パフォーマンスを向上させることができます。

StatefulWidget

StatefulWidgetについて解説します。StatefulWidgetは、状態（State）を持つWidgetです。これは、アプリケーション内で変化するデータを扱う場合に使用されます。例えば、ユーザーがインタラクションを行ったり、データが更新されたりすると、その変化を反映させるためにStatefulWidgetを利用します。

StatefulWidgetの主なメソッド

createState : ウィジェットツリー内の特定の場所で、変更可能な状態を作成

initState : Widgetの初期化時に一度だけ呼ばれる

setState : 指定した状態を更新させる処理

StatefulWidgetの使い方は以下の手順で行います。

  • StatefulWidgetを継承したクラスを作成します。
  • createStateメソッドをオーバーライドし、新しいStateオブジェクトを返します。
  • Stateクラスを継承した別のクラスを作成します。
  • buildメソッドをオーバーライドし、UIを構築します。

StatefulWidgetのサンプルコード

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

import "package:flutter/material.dart";

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyStatefulWidgetState(),
    );
  }
}

///StatefullWidgetクラス
class MyStatefulWidgetState extends StatefulWidget {
  const MyStatefulWidgetState({Key? key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

///Stateクラス
class _MyStatefulWidgetState extends State<MyStatefulWidgetState> {
  int counter = 0;

  void _incrementCounter() {
    setState(() {
      counter += 1;
    });
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Stateful Widget Example'),),
      body: Center(
        child: Text('counter: $counter'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: const Icon(Icons.add),
      ),
    );
  }
}

上記のプログラムを実行することで、'プラスアイコン'を押すと、Counterの値が１ずつ加算されていきます。

まとめ

StatelessWidgetとStatefulWidgetについて、サンプルコードも交えながらまとめてきました！
StatelessWidgetは、状態を持たないので、静的な動作しかできない。一方で、StatefulWidgetは、状態を持つので、動的な動作も可能であるということがわかってきたと思います。

StatelessWidgetとStatefulWidgetを使い分けることで、UIについてより深く理解ができると思っています！

Discussion