Lộ diện các "cao nhân Flutter" cùng bí kíp thực chiến chất lượng cao

Là công cụ phát triển ứng dụng di động ngày càng được ưa chuộng tại Sun*, Flutter được người Sun* liên tục thực chiến và từng bước làm chủ qua các dự án thực tế. Quá trình chinh chiến với framework này đã mang về cho các lập trình viên những kinh nghiệm quý báu nào? Hãy cùng Sun* News khám phá trong series “Chinh phục công nghệ” nhé!

Flutter là framework chính thức trong Danh mục công nghệ chiến lược được Sun* công bố tại ấn phẩm Sun* Tech White Paper 2024. Được định hướng là một trong 35 thế mạnh công nghệ nổi trội tại Sun*, Flutter được các nhà phát triển tại đa dạng đơn vị CEV tìm hiểu, khai thác chuyên sâu và ứng dụng để đề xuất giải pháp cho khách hàng kể từ thời điểm vừa ra mắt (2017). Đối với các lập trình viên Mobile tại Sun*, hiểu và sử dụng thành thục Flutter được xem là một trong những mục tiêu để ngày càng đa dạng năng lực công nghệ, tăng cường khả năng làm chủ sản phẩm và trở thành những “Người đồng hành đích thực” của business khách hàng.

Flutter chính xác là gì?

Flutter là một bộ công cụ phát triển phần mềm giao diện người dùng mã nguồn mở đa nền tảng. Cơ sở mã của Flutter cung cấp các chức năng không chỉ áp dụng cho iOS và Android, mà còn cho Windows, Linux, Mac và Google Fuchsia, chưa kể World Wide Web. Các ứng dụng mobile app phát triển nhanh chóng được mã hoá bằng ngôn ngữ hướng đối tượng của Google, Dart.

Theo Google, có đến 500.000 Developer sử dụng bộ công cụ phát triển Flutter hàng tháng. Hiện nay, Flutter đang phát triển “sát nút” với React Native và sẽ sớm vượt qua đối thủ này nhờ sự quan tâm từ App Developer.

Chúng ta sẽ cùng nhau tìm hiểu “tất tần tật” kinh nghiệm chinh chiến với Framework này từ quá trình chinh chiến của các Cao nhân Flutter - những gương mặt điển hình trong phong trào thúc đẩy linh hoạt sử dụng công nghệ mũi nhọn tại Sun* nhé!

Hùng An (CEV14): Để rẽ nhánh sang Flutter, hãy chắc chắn rằng bạn nắm vững ngôn ngữ Dart!

Hùng An là một trong những một trong những “nhà thám hiểm” Flutter tiên phong khi bắt đầu tiếp cận và học công ngệ này từ tháng 5 năm 2019 - chỉ một năm sau khi Flutter chính thức ra mắt. Thời điểm đó, Flutter đã thu hút sự chú ý của cộng đồng và nhận được nhiều đánh giá tích cực, khiến An tò mò và muốn khám phá cách thức xây dựng một ứng dụng cross-platform. 

Là một developer Android, An cho biết việc tiếp cận với Flutter không quá khó khăn bởi cấu trúc ngôn ngữ Dart tương đồng với Java mà anh đã thành thạo, cùng với khả năng code trực tiếp trên Android Studio - công cụ quen thuộc của các developer Android. Tuy nhiên, quá trình làm bạn và làm chủ Framework này theo An đánh giá là không hề dễ dàng, với khá nhiều thách thức developer thường gặp phải như:

Chông gai

Cách giải

Các thư viện và plugin thường thiếu hoặc không đáp ứng đủ yêu cầu mà công việc dự án đưa ra

Cần phải tự viết code hoặc điều chỉnh trực tiếp trong thư viện đó để đạt được yêu cầu.

Dễ bị xung đột khi cập nhật các phiên bản thư viện khác nhau, ví dụ như cập nhật thư viện A thì bị xung đột về code hay version với thư viện B

Cần phải áp dụng nhiều phương pháp khác nhau như tìm hiểu về change log của mỗi thư viện để tìm ra phiên bản phù hợp nhất hoặc tận dụng dependency_overrides từ pubspec.yaml để đồng bộ hoặc bắt buộc dùng đúng các phiên bản thư viện chỉ định...

Có những bug chỉ phát sinh trên Android mà không xảy ra trên iOS hoặc ngược lại

Cần phải chia ra từng platform và xử lý cụ thể khi phát triển tính năng có khả năng bị bug này.

Đồng hành cùng An và hành trình “Master Flutter” chính là 4 năm thực chiến quý báu tại Apollo - dự án đạt giải Best Project Of The Year 2022. An cho biết bản thân đã gặp phải một “tình huống để đời” về định dạng hình ảnh từ camera không tương thích trên một số dòng điện thoại Android, khiến kết quả kiểm tra AI luôn bị lỗi. Việc phải tái hiện vấn đề, phân tích sâu vào code của thư viện, và cuối cùng điều chỉnh để hỗ trợ định dạng mới đã tiêu tốn không ít thời gian và công sức nhưng mang về những thành quả và đúc rút tuyệt vời để cả team ngày càng cứng cáp hơn.

Để tối ưu hóa hiệu suất của ứng dụng Flutter, Hùng An chú trọng vào việc chọn lựa base code hợp lý, quản lý state hiệu quả, và sử dụng các công cụ phát triển như Firebase Crashlytics, Sentry, và Flutter Inspector. Anh cũng duy trì việc cập nhật kiến thức công nghệ, thường xuyên tham gia vào các dự án mới, và đọc các bài viết công nghệ từ các nguồn uy tín.

Với những kinh nghiệm "xương máu" đã tích lũy, An chia sẻ: “Để rẽ nhánh sang Flutter, hãy chắc chắn rằng bạn nắm vững ngôn ngữ Dart và hiểu cách xây dựng UI từ các widget phổ biến. Việc quản lý state của ứng dụng là vô cùng quan trọng để đảm bảo UI được cập nhật chính xác. Hơn nữa, hãy luôn cập nhật kiến thức và nắm bắt các thay đổi của nền tảng để ứng dụng Flutter của bạn đạt hiệu suất tốt nhất.”

Văn Tuấn (CEV10): Không chỉ nắm bắt Dart, làm quen với các thành phần của Flutter, Widget mới thực sự là thử thách lớn!

Là một Android Developer với 10 năm kinh nghiệm, Văn Tuấn đã trải qua hành trình phát triển các ứng dụng Android từ ngôn ngữ Java cho đến khi Google hỗ trợ chuyển hoàn toàn sang Kotlin. Với bề dày kinh nghiệm thực chiến Android, Tuấn hiểu rõ tính chất thay đổi liên tục của công nghệ nên đối với anh việc nắm bắt những xu hướng mới là điều tất yếu phải làm. 

Vài năm trước, khi xu hướng lập trình cross-platform cho di động bắt đầu phát triển mạnh mẽ, Tuấn đã quyết định tìm hiểu Flutter thay vì các framework khác như React Native hay Xamarin, bởi theo tầm nhìn chiến lược của anh đây là Framework được Google hỗ trợ mạnh mẽ và có nhu cầu thực tế từ các dự án Mobile của công ty. Tuấn chia sẻ:

 "Công nghệ chỉ là công cụ triển khai, mỗi framework có ưu và nhược điểm riêng phù hợp với từng yêu cầu ứng dụng. Việc học hỏi và áp dụng ngay vào dự án thực tế sẽ mang lại hiệu quả cao nhất."

Khi bắt đầu với Flutter, “chông gai” đầu tiên Tuấn gặp phải là làm quen với ngôn ngữ Dart. Với cú pháp tương tự Java, Tuấn nhanh chóng nắm bắt Dart, nhưng việc làm quen với các thành phần của Flutter, đặc biệt là Widget - thành phần cơ bản và quan trọng nhất - mới thực sự là thử thách lớn. Tuấn nhấn mạnh: "Tầm quan trọng của Widget được thể hiện rõ qua câu slogan của Flutter: ‘Everything is a widget’."

Trong quá trình phát triển các dự án thực tế, Tuấn thường phải đối mặt với các lỗi bố cục hiển thị như “A RenderFlex overflowed”, “RenderBox was not laid out”, hay “Vertical viewport was given unbounded height”. Đây là những lỗi phổ biến khi làm việc với Flutter. Để fix những lỗi này, cần nắm vững nguyên tắc quản lý và sử dụng đúng cách các constraints (ràng buộc): "Constraints go down. Sizes go up. Parent sets position."

 Tuy nhiên, để thực sự giải quyết triệt để vấn đề, anh nhận ra tầm quan trọng của việc chia sẻ và hỗ trợ sửa lỗi cùng các thành viên khác trong team. Đối với Tuấn, đây mới chính là chìa khoá tối ưu nhất để mổ xẻ, phân tích nguyên nhân cốt lõi và trưởng thành hơn nhờ kinh nghiệm thực chiến.

Với Flutter, Tuấn cho biết anh thường sử dụng VS Code vì tính nhẹ và nhanh của nó, cùng với nhiều plugin hỗ trợ phát triển Flutter hiệu quả. Để tối ưu hiệu suất ứng dụng, anh chia sẻ các nhà phát triển nên:

  • Chú trọng vào việc kiểm soát các hàm build, tách nhỏ các Widget để tránh việc rebuild không cần thiết, và sử dụng từ khóa const khi có thể.
  • Sử dụng Performance View trong DevTools để đo lường và theo dõi hiệu suất ứng dụng, đảm bảo Flutter tự động tối ưu hóa giao diện một cách hiệu quả.

Anh cũng nhấn mạnh rằng, dù Flutter hay cross-platform đang là xu hướng, kiến thức nền tảng về Native vẫn rất quan trọng. Để trở thành một "Flutter Master," các lập trình viên cần có kế hoạch nâng cao kiến thức về Native song song với việc phát triển kỹ năng với Flutter hay bất kì Framework mới xuất hiện trong tương lai gần.

Hữu Nam (CEV11): Cross Platform nào cũng có điểm yếu, Flutter cũng có “Gót chân Asin” của mình 

Hữu Nam, một cao nhân từ CEV11, đã có những trải nghiệm thú vị với Flutter ở không chỉ dự án thực chiến mà còn từ quá trình tự học, tự mày mò không ngừng nghỉ. Theo anh, một trong những điều thú vị nhất khi làm việc với Flutter là khám phá các điểm mạnh và yếu của nó để “mạnh phát huy, yếu lưu ý”. Trong quá trình phát triển, Nam nhận ra rằng Flutter có một “Gót chân Asin” lớn, đó là “PlatformView”. 

“Performance của “PlatformView” (như WebView, Maps, AdWidget…) thấp hơn rất nhiều so với native, đặc biệt là khi chúng nằm trong một scrollable widget. Điều này khiến cho việc tối ưu hiệu suất cho các ứng dụng đòi hỏi tính phức tạp và nặng nề trở nên khá thách thức. Tuy nhiên, bản thân những widget này cũng nặng (expensive views) dù có chạy trên Flutter hay native. 

Chính vì vậy, khi ứng dụng đòi hỏi sử dụng nhiều PlatformView, và yêu cầu hiệu suất cao, bạn nên cân nhắc thêm về việc sử dụng “Native” development. 1 số kĩ thuật flutter sử dụng để kết hợp PlatformView(Native views) cùng với các Flutter widgets: Hybrid Composition, Virtual Display,  Texture Layer…"

- Một lời khuyên được Nam gửi đến cho các lập trình viên đang muốn tìm hiểu sâu hơn về Flutter -

Nam tin rằng sẽ có rất nhiều tài liệu, lời khuyên và case study thực tế Developer có thể tìm kiếm khi bắt đầu với Flutter, tuy nhiên nguồn chính thống luôn là dữ liệu quan trọng và có độ cập nhật nhanh nhất. Trong quá trình tự học, anh bắt đầu từ tài liệu chính thức trên trang chủ Flutter, nơi cung cấp những hướng dẫn cụ thể cho lập trình viên từ mọi nền tảng. Anh tin rằng việc bắt đầu từ nguồn chính thống và sau đó mở rộng kiến thức từ các kênh khác sẽ giúp lập trình viên có nền tảng vững chắc, đồng thời giúp họ tránh được việc học tập lan man. Nam cũng khuyến nghị lập trình viên mới nên tận dụng tài liệu chính thức, đồng thời giữ vững định hướng và không ngừng cải thiện kỹ năng của mình trong môi trường công nghệ thay đổi nhanh chóng như hiện tại.

Đức Cảnh (CEV02): Khi làm việc với Flutter, anh em cần chú ý đến các đặc thù trên thiết bị Android

Chung chí hướng với Hữu Nam, Đức Cảnh (CEV02) lại dành nhiều thời gian và tâm huyết để làm chủ Flutter thông qua những ngày tháng mày mò và phá bug. Xuất phát điểm từ một iOS developer chuyên sử dụng Swift, Cảnh đã phải đối mặt với không ít thách thức khi chuyển sang tiếp cận Flutter. Trong iOS, việc dựng UI chủ yếu dựa trên các View và ViewController, nhưng trong Flutter, tất cả các thành phần UI đều là Widget. Điều này đòi hỏi anh phải làm quen với khái niệm mới và học cách kết hợp các Widget để xây dựng UI cho một màn hình.

Một trong những thử thách lớn nhất mà Cảnh gặp phải là quản lý state. Flutter sử dụng các công cụ như Provider, Riverpod và Bloc để quản lý state theo kiểu Reactive programming, khác xa so với các pattern mà anh từng quen thuộc trong iOS. Điều này đòi hỏi Cảnh phải học hỏi và thích nghi với cách tiếp cận mới, đồng thời nắm vững cách thức quản lý state một cách hiệu quả để tránh những lỗi phổ biến như không update UI kịp thời hoặc việc widget bị build lại quá nhiều lần.

Việc làm quen với Flutter cũng đặt ra những yêu cầu mới khi phải phát triển ứng dụng đa nền tảng. Đức Cảnh đã quen thuộc với việc phát triển cho iOS, nhưng khi làm việc với Flutter, anh cần chú ý đến các đặc thù trên thiết bị Android, đồng thời khắc phục thói quen chỉ tập trung vào iOS mà bỏ qua những khác biệt trên Android.

Trong suốt quá trình làm việc với Flutter, Cảnh cũng đã gặp phải những lỗi phổ biến mà bất kỳ lập trình viên nào khi tiếp cận nền tảng này cũng có thể gặp phải và đúc rút được những kinh nghiệm xương máu:

Chông gai

Cách giải

Quản lý state: Không update UI, hoặc widget được build đi build lại quá nhiều lần hoặc cố gắng rebuild trước khi quá trình build trước hoàn tất

Tránh việc rebuild không cần thiết, cũng như sử dụng các công cụ quản lý state hiệu quả như Provider hay Riverpod

Type 'X' is not a subtype of type 'Y: khi cố gắng chuyển đổi 1 đối tượng không tương thích về type dữ liệu

Tránh sử dụng as mà sử dụng is thay thế.

Sử dụng quá nhiều Widget lồng nhau hay không đúng cách có thể làm giảm hiệu suất ứng dụng

- Cần rà soát Widget tree và sử dụng các Widget đáp ứng vừa đủ nhu cầu để tránh rebuild nhiều lần.

- Sử dụng Widget đáp ứng vừa đủ nhu cầu: VD nếu chỉ set padding thì sử dụng Padding() thay cho Container(). Cố gắng sử dụng Widget với const để tránh rebuild nhiều lần.

Lỗi xảy ra khi load nhiều ảnh

Sử dụng cơ chế cache ảnh

Quên cancel subscription hoặc dispose controller

Luôn cancel subscription hoặc dispose controller khi không còn sử dụng để tránh lack memory và các lỗi không mong muốn

Với những ngày tháng miệt mài phá bug và tối ưu hóa, Đức Cảnh đã trở thành một Flutter developer điêu luyện, sẵn sàng đương đầu với những thách thức mới và không ngừng hoàn thiện kỹ năng của mình.

Quang Huy (CEV03): Thực chiến 'tính năng khó' khiến quá trình thuần thục Flutter đẩy nhanh nhiều lần!

Quang Huy, một kỹ sư mobile tại CEV03, bắt đầu học Flutter vào năm 2022 khi thấy sự phát triển nhanh chóng của framework này và nhu cầu ngày càng cao về các ứng dụng mobile đa nền tảng. Anh đã tìm hiểu qua các tài liệu chính thức và thử tạo những dự án nhỏ để làm quen với cú pháp và cơ chế hoạt động của Flutter.

Huy đã làm việc với Flutter được khoảng 2 năm và đã tham gia vào nhiều dự án lớn nhỏ, giúp anh hiểu sâu hơn về tối ưu hóa và phát triển ứng dụng với Flutter. Một trong những vấn đề phổ biến mà anh gặp phải là xử lý trạng thái trong các ứng dụng lớn, điều này có thể trở nên phức tạp nếu không sử dụng các pattern quản lý trạng thái như Provider hoặc BLoC. Để giải quyết, Huy tập trung vào việc chia nhỏ logic ứng dụng, sử dụng các công cụ hỗ trợ và thường xuyên refactor mã nguồn. 

Với Huy, quá trình thuần thục Flutter được anh đẩy nhanh gấp nhiều lần nhờ thực chiến với những tính năng khó. “Một trong những tính năng khó mà mình từng gặp đó là việc xử lý hiệu năng khi tương tác với backend thông qua socket và đồng bộ dữ liệu realtime giữa admin và rất nhiều client app (bên mình sử dụng Flutter để code cùng lúc cả 2 phía). Mình đã vượt qua bằng cách tối ưu hóa các luồng dữ liệu, tận dụng các package phù hợp cho việc kết nối và caching” - Huy cho biết.

Để tối ưu hiệu suất ứng dụng Flutter và giảm build time, Huy chia sẻ một vài thủ thuật lập trình viên có thể cân nhắc:

  • Giảm số lần render không cần thiết;
  • Sử dụng const cho các widget không thay đổi;
  • Hạn chế việc sử dụng quá nhiều widget lồng nhau;
  • Quản lý trạng thái để tránh các vấn đề về hiệu năng;
  • Tập trung vào việc tối ưu hóa cấu trúc dự án, sử dụng các công cụ hỗ trợ build nhanh như Fastlane, nhóm script bằng Makefile và thực hiện cache ở mức tối đa.

Huy cho rằng kiên nhẫn, khả năng giải quyết vấn đề, tư duy sáng tạo, và khả năng tự học chính là những tố chất dần hình thành nên một “Flutter Master”. Dự đoán về tương lai Flutter, Huy khẳng định: “Các phiên bản Flutter mới ra mắt cũng mở ra nhiều cơ hội và thách thức mới cho các lập trình viên. Đồng thời, việc tích hợp AI và machine learning vào các ứng dụng Flutter, giúp tạo ra các ứng dụng thông minh và cá nhân hóa trải nghiệm người dùng sẽ trở thành xu hướng mới với anh em Flutter trong tương lai gần”. 

Giang Đông (CEV05): Flutter cũng chỉ là một Framework!

Còn với Giang Đông - chàng trai trẻ dày dặn kinh nghiệm Flutter từ CEV05, tư duy lập trình mới làm điều quan trọng nhất khi bắt đầu tiếp cận Framework hay ngôn ngữ mới. Anh cho rằng, Flutter hay bất kì công nghệ nào cũng chỉ là một công cụ hỗ trợ phát triển phần mềm và nó luôn thay đổi, cập nhật theo xu hướng phát triển của xã hội.

Với mình, Flutter cũng chỉ là một Framework và công cụ hỗ trợ phát triển phần mềm thôi. Framework thì luôn được update và thay đổi theo ngày, nếu chỉ quan tâm tới cú pháp sử dụng hay code có chạy được không thì sẽ mãi chẳng bao giờ theo kịp được sự thay đổi. Thứ chúng ta cần quan tâm là tuy duy giải quyết vấn đề và dùng các framework như công cụ giải quyết vấn đề đó của bạn. Đó mới chính là Be Agile - làm chủ sự thay đổi và tỉnh táo khi sử dụng bất kì công nghệ nào - Đông khẳng định.

Theo Đông, linh hoạt sử dụng công nghệ mới chính là điều lập trình viên nên theo đuổi. “Một ví dụ đơn giản để giải thích cho vấn đề trên đó là Flutter không thể xử lý 100% các tác vụ bằng ngôn ngữ Dart mà đôi lúc lập trình viên vẫn cần phải code các module đặc thù bằng Native code iOS/Android rồi sử dụng chúng trong Flutter. Chính vì vậy ngoài việc code được Flutter với Dart thì bạn cần phải có khả năng thích nghi tốt để có thể code được cả iOS-Swift và Android-Kotlin nữa” - Đông cho biết.

Chính nhờ tư duy đó, anh bạn đã thoải mái tiếp cận Flutter và không bị phụ thuộc vào mỗi công nghệ này. Khi mới tiếp cận Flutter, Giang Đông nhận thấy các lỗi phổ biến thường gặp liên quan đến quản lý trạng thái của UI hoặc việc sử dụng quá nhiều UI components không cần thiết. Để khắc phục, anh đã tìm đến các example code, code base, và thư viện công khai trên GitHub để học hỏi và áp dụng các phương pháp giải quyết vấn đề. Đông còn có một cách tiếp cận rất thú vị, đó là code ít, value nhiều. Anh chú trọng việc sử dụng một số công cụ và thư viện sẵn có như json_annotation, freezed_annotation, device_preview, flutter_screenutil, và flutter_gen và để giảm thiểu thời gian phát triển, tăng tốc độ và cải thiện hiệu suất ứng dụng. 

Đông khẳng định code ít, value nhiều chính là xu hướng của Flutter trong tương lai, khi các công cụ generate code cho Flutter ngày càng nhiều và mạnh mẽ. Tuy nhiên, anh cũng nhấn mạnh (không dưới hai lần) về việc lập trình viên cần liên tục học hỏi để thích nghi linh hoạt và không phụ thuộc vào ngôn ngữ lập trình hay framework nào. Theo anh bạn, việc duy trì và nâng cao kỹ năng lập trình thực chất không chỉ nằm ở Flutter mà nằm ở tất cả các lĩnh vực trong ngành IT. 

Cảm ơn những chia sẻ và góc nhìn thú vị từ tất cả “cao nhân” Flutter tại Sun* để có thể giúp BBT hoàn thành bài viết này. Còn bạn? Bạn có “chông gai” nào cần thỉnh giáo không? Comment ngay dưới bài viết để cùng đàm đạo nhé!

#công nghệ

#Chinh Phục Công Nghệ

#TWP