Stateパターンについて調べたのでFlutterでサンプルを作ってみた

Stateパターンについて軽く

クラス内のとある状態によって同じクラスでも振る舞いが変わることが多々ある。
それをそのままクラス内で表現しようとすると、
この条件の時にはこう、こっちの時はこう、とIf分岐だらけになってしまうので、
状態ごとにクラス化しシンプルなコードとするパターン。

サンプルとして何を作ったか

赤、青どちらの色で出力するかのボタンを用意して、
色の出しわけを状態としてStateパターンで実装する。

クラス図

コード

GitHub に完全版があります。

output_state.dart

import 'dart:ui';

abstract class OutputState {
  Color getColor();
  String getText();
}

state_red.dart

import 'dart:ui';

import 'package:flutter_state/utils/output_state.dart';

class StateRed implements OutputState {
  @override
  Color getColor() {
    return const Color(0xFFC62828);
  }

  @override
  String getText() {
    return '赤色だよ';
  }
}

state_blue.dart

import 'dart:ui';

import 'package:flutter_state/utils/output_state.dart';

class StateBlue implements OutputState {
  @override
  Color getColor() {
    return const Color(0xFF536DFE);
  }

  @override
  String getText() {
    return '青色だよ';
  }
}

main.dart

  :
  : // 割愛
  :
class _MyHomePageState extends State<MyHomePage> {
  final _textController = TextEditingController();
  String _outputText = '';
  Color _outputColor = const Color(0xFFC62828);
  OutputState? _outputState;

  @override
  void initState() {
    super.initState();

    _outputState = StateRed();
  }

  @override
  void dispose() {
    _textController.dispose();
    super.dispose();
  }

  void _changeRed() {
    _outputState = StateRed();
    setState(() {
      _outputColor = _outputState!.getColor();
      _outputText = _outputState!.getText();
    });
  }

  void _changeBlue() {
    _outputState = StateBlue();
    setState(() {
      _outputColor = _outputState!.getColor();
      _outputText = _outputState!.getText();
    });
  }
  :
  : // 割愛
  :

以上