Skip to main content

Các Design Pattern Phổ Biến Trong Flutter

· 3 min read
Admin Hướng Nghiệp Dữ Liệu
Admin Hướng Nghiệp Dữ Liệu
FullStack

1. MVC (Model-View-Controller)​

1.1. Cấu Trúc​

  • Model: Quản lý dữ liệu và logic
  • View: Hiển thị UI
  • Controller: Xử lý tương tác người dùng

1.2. Ví Dụ​

// Model
class User {
  final String name;
  final String email;
  User(this.name, this.email);
}

// Controller
class UserController {
  void updateUser(User user) {
    // Logic xử lý
  }
}

// View
class UserView extends StatelessWidget {
  // UI components
}

2. MVVM (Model-View-ViewModel)​

2.1. Thành Phần​

  • Model: Data và business logic
  • View: UI và user interactions
  • ViewModel: Kết nối Model và View

2.2. Implemention với Provider​

class UserViewModel extends ChangeNotifier {
  User _user;
  User get user => _user;

  void updateUser(User newUser) {
    _user = newUser;
    notifyListeners();
  }
}

3. Repository Pattern​

3.1. Cấu Trúc​

  • Repository Interface
  • Remote Data Source
  • Local Data Source
  • Repository Implementation

3.2. Code Mẫu​

abstract class UserRepository {
  Future<User> getUser(int id);
  Future<void> saveUser(User user);
}

class UserRepositoryImpl implements UserRepository {
  final RemoteDataSource remote;
  final LocalDataSource local;
  
  UserRepositoryImpl(this.remote, this.local);
  
  @override
  Future<User> getUser(int id) async {
    // Implementation
  }
}

4. Singleton Pattern​

4.1. Đặc Điểm​

  • Một instance duy nhất
  • Global access point
  • Lazy initialization

4.2. Ví Dụ​

class ApiClient {
  static final ApiClient _instance = ApiClient._internal();
  
  factory ApiClient() {
    return _instance;
  }
  
  ApiClient._internal();
}

5. Factory Pattern​

5.1. Ứng Dụng​

  • Tạo objects động
  • Encapsulation logic khởi tạo
  • Tái sử dụng code

5.2. Implementation​

abstract class Button {
  void render();
}

class ButtonFactory {
  static Button createButton(String type) {
    switch (type) {
      case 'material':
        return MaterialButton();
      case 'cupertino':
        return CupertinoButton();
      default:
        throw Exception('Unknown button type');
    }
  }
}

6. Observer Pattern​

6.1. Sử Dụng​

  • State management
  • Event handling
  • Real-time updates

6.2. Ví Dụ Với Stream​

class DataStream {
  final _controller = StreamController<Data>();
  
  Stream<Data> get stream => _controller.stream;
  
  void updateData(Data data) {
    _controller.sink.add(data);
  }
}

7. Builder Pattern​

7.1. Ưu Điểm​

  • Xây dựng object phức tạp
  • Step-by-step construction
  • Flexible configuration

7.2. Code Example​

class UserBuilder {
  String? name;
  String? email;
  
  UserBuilder setName(String name) {
    this.name = name;
    return this;
  }
  
  User build() {
    return User(name!, email!);
  }
}

8. Best Practices​

8.1. Khi Nào Sử Dụng​

  • Dự án lớn, phức tạp
  • Cần tái sử dụng code
  • Maintain dài hạn
  • Team development

8.2. Lưu Ý​

  • Không over-engineering
  • Chọn pattern phù hợp
  • Documentation đầy đủ
  • Unit testing

9. Anti-patterns Cần Tránh​

  • Massive View Controllers
  • God Objects
  • Tight Coupling
  • Duplicate Code

10. Tools và Resources​

  • Analysis tools
  • Linter rules
  • Design pattern libraries
  • Code generators