Flutter là gì? Cách cấu trúc một dự án Flutter

Là một lập trình viên Android, hẳn bạn không thể xa lạ với Flutter, platform được chính Google thiết kế và mang ra cộng đồng. Flutter có thể nói là nền tảng đang ngày càng được ưa dùng bởi tốc độ và sự hiệu quả trong thiết kế UI cho ứng dụng Mobile, Web hay Desktop.

Nếu bạn chưa biết Flutter là gì, vì sao nó lại được đông đảo developer sử dụng hoặc sâu hơn là cách quản lý một dự án Flutter hiệu quả. 

Mời bạn cùng xem bài viết dưới đây.

Bài viết được trích dẫn từ buổi chia sẻ về chủ đề Flutter gần đây của anh Trần Huy Phúc, developer với hơn 10 năm kinh nghiệm làm Mobile / App development. Bạn có thể lắng nghe chi tiết hơn ở video cuối bài viết.

Ngoài ra, bạn có thể tham gia group cộng đồng của Gambaru trên Telegram để nhận tài liệu từ buổi chia sẻ của anh Phúc nhé.

Giờ chúng ta hãy bắt đầu với chủ đề của hôm nay thôi!

Flutter là gì?

Flutter là một platform được thiết kế và phát triển bởi một official team ở Google. 

Nếu bạn làm về mobile, hẳn bạn sẽ biết cũng có 1 framework khá nổi tiếng là React Native, được phát triển bởi Facebook.

Bên cạnh vẫn được team nội bộ của Google duy trì và phát triển, framework này được open- source ra ngoài để cộng đồng đóng góp.

Flutter được dùng để xây dựng các ứng dụng trên mobile, web và desktop mà chỉ sử dụng một codebase (cơ sở mã) duy nhất.

Ngôn ngữ chính dùng khi phát triển ứng dụng cho Flutter là DART. Đây là một ngôn ngữ hướng đối tượng, khá giống với Java, Kotlin, và một phần nào đó Javascript. 

Vì vậy, nếu bạn đã có sẵn nền tảng với những ngôn ngữ này thì việc chuyển đổi sang DART sẽ tương đối dễ dàng.

Dừng lại chút nào, nếu bạn đang #open_to_work, thử nghía qua các công việc đang tuyển trên Gamba nhé. Vào LINK NÀY để xem các job Flutter hoặc scan QR Code ở bên dưới nhé.

Lịch sử các phiên bản Flutter?

• 2015: phiên bản đầu tiên được tung ra, thời điểm này Flutter chỉ mới chạy được trên android.
• Tháng 12.2018, Google tung bản Official release 1.0 tại sự kiện Flutter Live 
• Tháng 03.2021, version 2.0 mới được release ra ngoài. 
• Tháng 12.2021, phiên bản là 2.8 và sử dụng chung với DART 2.15

Như vậy chúng ta thấy rằng, dù có một team chuyên biệt để phát triển nhưng cũng rất tốn thời gian và nguồn lực để có những phiên bản ổn định hơn về sau.

Ai sử dụng Flutter?

Nhờ thể hiện được nhiều ưu điểm của mình, Flutter hiện được khá nhiều công ty lớn sử dụng để xây dựng ứng dụng. 

Chẳng hạn như Alibaba, ByteDance (Tiktok), eBay, Google, BMW,…

Ở Việt Nam thì có một số công ty như Sendo (đã triển khai từ cách đây vài năm), Grab, FPT…

Những khái niệm cốt lõi, quan trọng trong Flutter

Nếu bạn đã làm việc với React hoặc React Native, bạn sẽ nhận ra sự tương đồng ở một vài khái niệm sau.

State

UI sẽ dựa trên State. Khi một State thay đổi thì UI sẽ được cập nhật theo State mới. Bạn sẽ cần tới cách quản lý State sao cho hiệu quả. Vì trong 1 ứng dụng thường có rất nhiều State và chúng chồng chéo lẫn nhau. State của UI này sẽ ảnh hưởng tới State của UI khác.

Chính do State quan trọng nên Flutter đã thiết kế ra 2 loại là Stateful và Stateless widget. (Điểm này khác với React hay React Native là các bên này chỉ có Component)

• Stateful giống Component bên React, có State nội tại của nó và có thể set / change State để cập nhật UI.
• Stateless cũng là Component nhưng không có quyền tự thay đổi State hay UI mà sẽ nhận được các Properties từ Component hoặc widget (cha) để update UI.

Khi làm việc với Flutter, đa phần bạn sẽ làm việc với tầng Framework. 

Ở tầng này, widget chia 2 loại nhỏ hơn là Material và Cupertino. Material (Android) sẽ có bộ chuẩn design để tuân theo guideline của Google. Còn Cupertino là bộ guideline dành cho Apple. 

Đa phần thời gian làm việc với Flutter sẽ design UI sử dụng 2 widget trên. 

Tree

Framework Flutter thiết kế ra các Tree, và có 3 Tree (tầng) chính:

• Widget tree: được tương tác thường xuyên, là nơi bạn sẽ combine, lồng ghép các widget với nhau để tạo ra UI mong muốn. 
• Bên dưới Widget tree là Element tree, được dùng để quản lý việc vẽ lại UI sao cho đạt tốc độ tốt nhất. 
• Render tree, thực hiện vẽ UI.

3 Tree này hoạt động mượt mà với nhau giúp cho performance của Flutter được tốt hơn.

Đa phần thời gian bạn làm việc với Flutter sẽ nằm ở Widget tree, tuy nhiên thỉnh thoảng bạn nên tìm hiểu các tree còn lại để thực hiểu cách Flutter hoạt động và tối ưu của nó.

Constraints và Sizes

Ở Widget tree, khi combine các widget thì nó sẽ đi từ trên xuống, theo cấp Cha – Con. 

Các widget Cha sẽ đưa Constraints (ràng buộc) xuống cho widget con và ngược lại widget Con sẽ đưa Sizes lên cho widget Cha có đầy đủ thông tin để render.

Ưu và nhược điểm của Flutter

Bất kỳ công nghệ nào cũng sẽ có ưu và khuyết điểm của nó. Flutter cũng vậy, và đó là điều bạn nên cân nhắc khi khởi động 1 dự án, lựa chọn công nghệ 

Ưu điểm

• Tiết kiệm thời gian: Bởi vì viết 1 code mà dùng cho cả android, iOS, desktop và web. Bộ công cụ phát triển có hot reload, khi lưu lại sẽ apply ngay lên UI mà không phải build lại.
• Dễ học: Nếu trước đó bạn học hoặc sử dụng React Native thì việc chuyển qua sử dụng Flutter cũng trở nên dễ dàng. Nhưng sẽ tương đối khó hơn cho những bạn đi từ Native qua. Ngoài ra, Documentation của Flutter cũng khá tốt
• Code tốt hơn, làm khả năng xảy ra bug ít hơn.
• Đồng thời với việc phát triển framework, cộng đồng cũng phát triển nhiều plugin cho những IDE phổ biến như Android Studio, VS Code, hỗ trợ cho việc code Flutter nhanh hơn.
• Framwork Flutter cũng có sẵn nhiều widget, chỉ lấy ra xài hoặc custom lại, đồng thời cũng cung cấp nhiều attribute để custom (màu sắc, kích thước) hầu như rất đầy đủ
• Flutter được hỗ trợ rất nhiều và nhanh bởi Google và cộng đồng.

Nhược điểm

• Số lượng libraries / package hạn chế. Mặc dù đã official hơn 3 năm nhưng vẫn còn thiếu nhiều packages và do tốc độ phát triển nhanh nên các package này cũng được cập nhật thường xuyên. 
• Giống với React Native, việc nâng cấp lên phiên bản mới (thậm chí là ổn định) thường gây ra nhiều lỗi. Tất nhiên việc này không chỉ xảy ra ở mỗi Flutter.
• Khi làm việc với Flutter, thỉnh thoảng bạn phải đụng tới Native để xử lý một số cái bên dưới (cần gọi hàm bên Native) hoặc những feature chưa có thư viện / package. Khi đó sẽ đòi hỏi bạn một chút kiến thức về Native.
• Flutter có app size lớn hơn so với React Native.
• Gọi là “Ổn định” nhưng nhiều khi… không ổn định lắm. 
• Có nhiều phương pháp khác nhau để quản lý State, khi bạn tham gia một dự án sử dụng cách quản lý khác, bạn phải mất thời gian để làm quen, học phương pháp quản lý mới.

Cách cấu trúc 1 dự án Flutter

Trong một dự án Flutter có khá nhiều phần như Specs, Localization, Resource management, Theme… tuy nhiên với thời gian tương đối hạn chế, anh Phúc chỉ trình bày chi tiết về Spec và State Management.

Flutter project specs

Khi bạn làm việc trên các framework khác nhau, sẽ có 1 file định nghĩa version của app, biến môi trường, các thư viện hoặc package bên ngoài sẽ sử dụng, khai báo các file hình ảnh, âm thanh, font chữ.

Nói chung là tương tự packages.json (React Native), build.gradle (Android) hoặc podfile (iOS)

State Management

Có nhiều cách tiếp cận trong State Management, tùy vào team mà bạn cần xem và chọn cấu trúc mình thích dùng cho State Management.

Trong đó có 3 cách tiếp cận phổ biến nhất là Provider, Riverpod và BloC, được hỗ trợ nhanh nhất trong cộng đồng Flutter. Với dự án lớn, BloC thường được sử dụng hơn.

Cách tiếp cận thường được anh Phúc sử dụng là BloC và MobX

BloC

MobX

So sánh BloC và MobX

Nguồn: Gambaru.