Flutter: Provider Architecture Part 1

Trong quá trình phát triển một phần mềm di động có tính mở rộng cao, các nhà phát triển thường hay chọn cho mình một kiến trúc (State management) phù hợp để triển khai ứng dụng. Hiện tại trong thế giới phát triển phần mềm cho di động, website, desktop… có rất nhiều các kiến trúc được các công ty, nhà phát triển đưa ra. Phổ biến như N-layer, MVP, MVVM… Về phía Flutter củng không kém cạnh khi củng được Google và các bên thứ ba phát triển một số kiến trúc như là ScopeModel, Rxdart, Redux, MobX, BloC, Provider. Provider là một package do cộng đồng phát triển, rất gần với Scope model nhưng đơn giản, mạnh mẽ hơn và được chính Google khuyến khích sử dụng. Trong bài viết này (part-1), mình sẽ giới thiệu Provider cho Flutter App Nội dung: 1) Pragmatic State Management sử dụng Provider Cài đặt Provider package vào flutter project Vào trong file pubspec.yaml dependencies: flutter: sdk: flutter provider: ^4.0.2 Chạy lệnh “flutter pub get” để update các dependencies: Page và Page Model Mỗi một màn hình trong Flutter được định nghĩa là một page hoặc chúng ta củng có thể gọi là View. Chúng ta sẽ sử dụng demo mặt định là đếm số của Flutter để chuyển đổi thành Provider.

Mặt định, chúng ta sẽ sử dụng setState để quản lý trạng thái của counter void _incrementCounter() { setState(() { _counter++; }); } Để cho counter giảm đi, ta thêm phương thức void _decreaseCouter(){ setState(() { _counter++; }); } Với cách sử dụng setState, việc quản lý các trạng thái và xử lý logic của các page sẽ trở nên phức tạp nếu cần phải quản lý nhiều làm cho code bị phình lên. Đồng thời, thu hẹp khả năng mở rộng của ứng dụng.