[Design Patterns with Flutter] Strategy Patterns (전략패턴)

Flutter에서 전략 디자인 패턴을 사용하는 간단한 예시 코드를 보여드리겠습니다. 이 예제에서는 텍스트를 두 가지 서로 다른 방식으로 포맷하는 앱을 만듭니다. 전략 패턴을 사용하여 텍스트 포맷 전략을 유연하게 변경할 수 있습니다.

먼저 전략 인터페이스를 정의합니다:

abstract class TextFormatter {
  String format(String text);
}

그 다음, 두 가지 구체적인 전략을 구현합니다:

class UpperCaseFormatter implements TextFormatter {
  @override
  String format(String text) {
    return text.toUpperCase();
  }
}

class LowerCaseFormatter implements TextFormatter {
  @override
  String format(String text) {
    return text.toLowerCase();
  }
}

컨텍스트 클래스를 정의합니다:

import 'package:practice_design_patterns_flutter/strategy/text_formatter.dart';

class TextEditor {
  TextFormatter _formatter;

  TextEditor(this._formatter);

  TextFormatter get formatter => _formatter;

  void setFormatter(TextFormatter formatter) {
    _formatter = formatter;
  }

  String format(String text) {
    return _formatter.format(text);
  }
}

이제 전략 패턴을 사용하여 텍스트 포맷을 변경할 수 있는 Flutter 앱을 만듭니다:

import 'package:flutter/material.dart';

import 'package:practice_design_patterns_flutter/common/layout/layout.dart';
import 'package:practice_design_patterns_flutter/strategy/text_editor.dart';
import 'package:practice_design_patterns_flutter/strategy/text_formatter.dart';

class StrategyView extends StatefulWidget {
  static String get routeName => 'strategy';
  const StrategyView({super.key});

  @override
  State<StrategyView> createState() => _StrategyViewState();
}

class _StrategyViewState extends State<StrategyView> {
  final TextEditor _textEditor = TextEditor(UpperCaseFormatter());
  String _formattedText = '';

  void _formatAndDisplay(String text) {
    setState(() {
      _formattedText = _textEditor.format(text);
    });
  }

  @override
  Widget build(BuildContext context) {
    return LayOut(
      isCanBack: true,
      child: Column(
        children: [
          TextField(
            onChanged: (text) => _formatAndDisplay(text),
          ),
          Text(_formattedText),
          Text(_textEditor.formatter.toString()),
          ElevatedButton(
              onPressed: () {
                setState(() {
                  _textEditor.setFormatter(
                      _textEditor.formatter is UpperCaseFormatter
                          ? LowerCaseFormatter()
                          : UpperCaseFormatter());
                });
                print(_textEditor.formatter is UpperCaseFormatter);
              },
              child: const Text('Toggle Formatter'))
        ],
      ),
    );
  }
}

이 예제에서 TextField에 입력된 텍스트는 현재 설정된 포맷 전략에 따라 대문자 또는 소문자로 변환되어 화면에 표시됩니다. "Toggle Formatter" 버튼을 누르면 포맷 전략이 전환되어 적용됩니다.

github : https://github.com/starguys/practice_design_patterns_flutter

참조

• https://kazlauskas.dev/flutter-design-patterns-5-strategy/