Khám Phá Mẫu Thiết Kế State Trong Flutter: Sự Biến Hóa Tình Trạng

Giới thiệu

Bạn đã bao giờ sử dụng cây ATM và tự hỏi làm thế nào mà nó có thể xử lý hàng loạt trạng thái khác nhau không? Từ việc đút thẻ đến nhập mật khẩu, rồi đến rút tiền và lấy thẻ, cây ATM hoạt động dựa trên các trạng thái khác nhau. Trong bài viết này, chúng ta sẽ khám phá mẫu thiết kế State trong Flutter, giúp bạn quản lý các trạng thái một cách dễ dàng và có tổ chức hơn.

Khi bạn làm việc với nhiều trạng thái, sử dụng cấu trúc điều kiện như if-else có thể khiến mã nguồn của bạn trở nên rối rắm và khó quản lý. Mẫu thiết kế State giúp giải quyết vấn đề này bằng cách đóng gói logic của các trạng thái thành các lớp riêng biệt, mỗi lớp chịu trách nhiệm cho một trạng thái cụ thể.

Mẫu Thiết Kế State Là Gì?

Mẫu thiết kế State là một mẫu thuộc nhóm behavioural, cho phép bạn thay đổi hành vi của một đối tượng dựa trên trạng thái hiện tại của nó. Mục tiêu của mẫu này là giúp tổ chức mã nguồn và tăng tính mở rộng cho các lớp tương tác với nhau. Khi một đối tượng thay đổi trạng thái, nó sẽ chuyển đổi sang hành vi tương ứng mà không gây ảnh hưởng đến các trạng thái khác.

Cấu Hình Của Mẫu Thiết Kế State

Sơ đồ lớp của mẫu thiết kế State thường bao gồm các thành phần chính sau:

• State: Một interface hoặc abstract class định nghĩa các phương thức chung cho các lớp trạng thái cụ thể.
• ConcreteStates: Các lớp triển khai cụ thể của State, mỗi lớp thể hiện một trạng thái riêng biệt và có thể tương tác với Context để thay đổi trạng thái.
• Context: Lớp duy trì một instance của ConcreteStates và cho phép thay đổi trạng thái thông qua các phương thức như setState().

Ứng Dụng Mẫu Thiết Kế State

Mẫu thiết kế State rất hữu ích khi bạn có các đối tượng với nhiều trạng thái có sự thay đổi liên tục. Ví dụ điển hình là quản lý các task trong một dự án với các trạng thái như: Mới, Đang thực hiện, Hoàn thành, Chờ xử lý, Đóng,... Hoặc ngay cả việc hiển thị đèn giao thông cũng sẽ thay đổi tùy vào màu sắc hiện tại.

Thực Hành Với Mẫu Thiết Kế State

Để minh họa, chúng ta sẽ áp dụng mẫu thiết kế State vào việc quản lý đèn giao thông. Đầu tiên, chúng ta cần một interface ITrafficLightState với các phương thức như nextTrafficLight(context), getColor(), và getDuration(). Sau đó, lớp TrafficLightContext sẽ giữ trạng thái hiện tại và chịu trách nhiệm thay đổi trạng thái dựa trên các lớp trạng thái cụ thể như GreenState, YellowState, và RedState.

abstract class ITrafficLightState {
  void nextTrafficLight(TrafficLightContext context);
  Color getColor();
  Duration getDuration();
}

class TrafficLightContext {
  ITrafficLightState _state;

  TrafficLightContext(this._state);

  Color get currentColor => _state.getColor();
  Duration get currentDuration => _state.getDuration();

  void setState(ITrafficLightState state) {
    _state = state;
  }

  void nextTrafficLight() {
    _state.nextTrafficLight(this);
  }
}

Tiếp theo, chúng ta triển khai các trạng thái cụ thể cho đèn giao thông. Mỗi trạng thái sẽ biết cách chuyển sang trạng thái tiếp theo:

class GreenState extends ITrafficLightState {
  @override
  void nextTrafficLight(TrafficLightContext context) {
    context.setState(YellowState());
  }

  @override
  Color getColor() {
    return Colors.green;
  }

  @override
  Duration getDuration() {
    return const Duration(seconds: 15);
  }
}

class RedState extends ITrafficLightState {
  @override
  void nextTrafficLight(TrafficLightContext context) {
    context.setState(GreenState());
  }

  @override
  Color getColor() {
    return Colors.red;
  }

  @override
  Duration getDuration() {
    return const Duration(seconds: 20);
  }
}

class YellowState extends ITrafficLightState {
  @override
  void nextTrafficLight(TrafficLightContext context) {
    context.setState(RedState());
  }

  @override
  Color getColor() {
    return Colors.yellow;
  }

  @override
  Duration getDuration() {
    return const Duration(seconds: 3);
  }
}

Cuối cùng, chúng ta xây dựng giao diện để hiển thị đèn giao thông và thời gian hiện tại của mỗi trạng thái. Khi đèn xanh bật lên 15 giây, nó sẽ tự chuyển sang đèn vàng trong 3 giây, rồi đến đèn đỏ trong 20 giây.

class StatePage extends StatefulWidget {
  const StatePage({super.key});

  @override
  State<StatePage> createState() => _StatePageState();
}

class _StatePageState extends State<StatePage> {
  late TrafficLightContext _trafficLight;
  late Timer _timer;
  late int _currentTime = 0;

  @override
  void initState() {
    super.initState();
    _trafficLight = TrafficLightContext(GreenState());
    _startTimer();
  }

  void _startTimer() {
    _currentTime = _trafficLight.currentDuration.inSeconds;
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
        _currentTime--;
        if (_currentTime == 0) {
          _trafficLight.nextTrafficLight();
          timer.cancel();
          _startTimer();
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ...
    );
  }
}

Kết Luận

Chúng ta đã có một cái nhìn tổng quan về mẫu thiết kế State thông qua ví dụ đèn giao thông. Hy vọng bài viết giúp bạn hiểu được cách áp dụng mẫu thiết kế này trong dự án Flutter của mình. Chúng ta sẽ tiếp tục khám phá các mẫu thiết kế khác trong bài viết tiếp theo: Tập 8: Facade - "Thống nhất đất nước".
source: viblo