Written by on May 26, 2022

Mình đã tự học Flutter như thế nào?

Blog

Xin chào các bạn! Đây là bài viết thứ 3 của mình về Flutter. Bài viết hôm nay sẽ không có code mà mình sẽ chia sẻ về quá trình tự học Flutter của mình. Và những tài liệu mình đã dùng để những ai cũng có mong muốn tự tìm tòi như mình có thêm chút kinh nghiệm.

Có vẻ hơi ngược ngược thứ tự tí. Vì lẽ ra đây phải là bài thứ nhất chứ nhỉ! Nhưng mà mình viết theo cảm hứng nên hơi lộn xộn vậy. Ahihi!

vanle57

(Về bản thân mình thì mọi người có thể đọc qua tại đây.)

Giới thiệu sơ lược về Flutter

Flutter là 1 framework được phát triển trên ngôn ngữ lập trình Dart. Flutter cho phép bạn có thể sử dụng 1 base code và build lên nhiều nền tảng khác nhau, bao gồm:

  • iOS

  • Android

  • Web

  • Windows, MacOS, Linux apps

Với mục đích hướng tới việc phát triển phần mềm trên 3 tiêu chí nhanh, hiệu quả và linh hoạt. Flutter ra đời và trở thành đối trọng với React Native. Hiện nay, Flutter đang dần là xu thế mới trong lập trình phần mềm.

Một số đặc điểm nổi bật của Flutter:

  • Là 1 React framework.

  • Sử dụng ngôn ngữ lập trình Dart, là 1 ngôn ngữ đơn giản và dễ học.

  • Phát triển ứng dụng nhanh qua tính năng hot reload.

  • Giao diện ứng dụng được build bởi Flutter có hiệu năng cực cao hơn hẳn các framework khác như React native.

  • Xây dựng bộ widget phù hợp với nguyên tắc của Material Design & Curpotino. Giúp các nhà phát triển có thể tiết kiệm thời gian trong việc dựng UI.

Các bạn có thể đọc thêm về Flutter trên các trang khác, ở đây mình chỉ giới thiệu sơ qua vậy thôi!

Vì mình là một lập trình viên iOS nên mình sẽ hướng dẫn các bạn sử dụng Flutter để lập trình ứng dụng di động.

Các công cụ cần chuẩn bị để lập trình với Flutter

Đầu tiên, bạn cần tải và cài đặt Flutter.

Sau đó là IDE để lập trình Flutter. Ở đây, bạn có thể sử dụng Android Studio hoặc là Visual Studio Code.

Khi lập trình ứng dụng di động thì bạn cần có simulator/emulator để có thể build code lên và xem giao diện của ứng dụng bạn vừa lập trình hiển thị ra sao. Bạn cũng có thể lựa chọn cách build test lên device thật để tiết kiệm được bộ nhớ, nhưng theo mình thì dù sao các bạn cũng phải cần có native IDE (Android Studio cho android / XCode cho iOS) nên mình nghĩ tốt nhất là tận dụng luôn simulator/emulator của native IDE.

Vì sao cần phải có native IDE?

Đó là vì Flutter là 1 react framework và đôi khi các bạn sẽ gặp phải trường hợp cần debug hoặc cần sử dụng đến các native API. Tất nhiên là có 1 số package để hỗ trợ các bạn nhưng tin mình đi, các pakage đó cũng có bug. Và đôi khi thay vì khùng điên fix nó hoặc chờ dev của họ fix, thì các bạn nên tự fix hay tốt hơn là tự code ra luôn. Vừa học hỏi được mà vừa dễ maintain.

Để sử dụng native API trên Flutter, thì mời các bạn đọc bài viết này nhóe!

Cách cài native IDE:

  • Android Studio: bạn download về và cài đặt qua đây.

  • Xcode: khá chua là XCode chỉ có thể down được từ App Store hoặc trang download của Apple và việc này đòi hỏi bạn phải có 1 cái máy chạy hệ điều hành MacOS (sử dụng Macbook chính chủ hoặc dùng Hackintosh trên các dòng máy khác) hoặc apple id.

Quá trình tự học của mình

Mình sẽ tóm gọn và chia nhóm các nội dung trong quá trình học ở lược đồ dưới đây:

self study flutter roadmap

1. Dart

Bắt đầu từ một người đã có nền tảng về lập trình mobile (cụ thể là iOS) trước đó. Việc tự học Flutter sẽ khá dễ dàng hơn cho mình so với những bạn chưa có nền tảng này. Vì Flutter là framework được viết trên ngôn ngữ lập trình Dart. Nên việc đầu tiên và trước nhất bạn cần là học về cú pháp của Dart.

Một số nguồn tài liệu mình sử dụng để tự học Dart:

Trình tự học Dart:

  1. Basic Dart: Các kiểu dữ liệu, khai báo biến, hàm cơ bản, khai báo hàm, các câu lệnh cơ bản (if else, for,…), toán tử, null safety…
  2. OOP
  3. Nâng cao 1 tí: Bất đồng bộ, xử lý lỗi

2. Flutter

2.1. UI

2.1.1. UI Widget

Sau khi đã nắm được những cú pháp căn bản của Dart. Các bạn có thể chuyển qua học về 1 số Widget cơ bản của Flutter. Một số nguồn tài liệu mình sử dụng để tự học Widget của Flutter:

  • Introduction to widgets | Flutter.

  • Các hướng dẫn lập trình Flutter: bạn nên học các bài 16, 25 -> 32, 35 36, 38 -> 43. 1 vài bài trong số những bài còn lại, thì liên quan đến layout nhiều hơn nên mình để học phía sau. Còn vài widget trong list, thì không dùng thường xuyên lắm nên các bạn muốn thì có thể tìm hiểu thêm cho biết.

Layout là gì?

Hiểu nôm na, đó sẽ là cách bạn sắp xếp các widget trên màn hình và vị trí của chúng. Ví dụ, như là chúng nằm giữa màn hình, khoảng cách giữa chúng là bao nhiêu, khoảng cách của 1 widget đối với màn hình, các widget sắp xếp theo chiều dọc hay theo chiều ngang… vân vân và mây mây…

Tip của mình: Trong khi học đến bài nào, thì mình hay research tiếp về loại widget đó trên trang material library của flutter để đọc thêm về nó. Còn nếu các bạn muốn nhanh, thì có thể vừa thực hành vừa học. Chút nữa mình sẽ cung cấp cho các bạn nguồn source tutorial để các bạn có thể thực hành.

2.1.2. Layout

Okay! Vậy là bạn đã đi được 1/2 của chặng đường học UI. Bây giờ, mình sẽ tiếp tục học những Widget có liên quan đến layout của bạn. Một số các Widget đó là:

Và 1 số thuộc tính có trong các Widget như: width, height…

Tới đây, các bạn đã có thể thực hành rồi cho quen cách làm việc với các Widget trong Flutter và nắm rõ 1 số Widget cơ bản. Một số bài tập để các bạn thực hành:

Lưu ý:

2.2. Navigation & Router

Đối với những bạn có kiến thức về lập trình mobile, chắc hẳn đã quá quen với 2 khái niệm này. Hiểu đơn giản nôm na đây chính là điều hướng giữa các màn hình. Trong 1 ứng dụng, chắc chắn không thể nào thiếu việc này (trừ khi ứng dụng của bạn chỉ có 1 màn hình duy nhất).

Mình lấy ví dụ như khi bạn vào gặp màn hình Login và login xong thì vào Home, quá trình chuyển đổi giữa màn hình Login và màn hình Home chính là Navigation (hay còn gọi là điều hướng).

Các bạn có thể tham khảo 1 số nguồn tài liệu sau về các kỹ thuật điều hướng trong Flutter:

2.3. State Management

Trước tiên, bạn phải biết trạng thái (State) là gì?

Các bạn nên đọc qua bài viết này. Nếu đủ quyết tâm và muốn đào sâu kiến thức, bạn có thể đọc loạt bài viết chính chủ này. Tuy nhiên, trên quan điểm cá nhân mình, để tránh mất thời gian và gây nản chí thêm vì đọc không hiểu thì ban đầu, bạn chỉ cần nắm khái niệm cơ bản và hiểu được cách nó hoạt động. Còn những gì sâu xa, sau quá trình luyện tập và các bạn đã đủ vững rồi, các bạn có thể tiếp tục đào sâu.

Sau đó sẽ đến list state management này. Trong list này thì:

  • setState: chính chủ Flutter, cơ bản của cơ bản trong việc quản lý state nên cần nắm rõ.

  • InheritedWidget & InheritedModel: cũng chính chủ Flutter và là nền tảng, vì vậy cũng nên tìm hiểu qua.

  • Bloc: 1 pattern ngoài, hay được áp dụng nhiều nhất trong Flutter.

  • Redux: pattern này chủ yếu áp dụng cho React Native, những dev chuyển từ React Native qua sẽ cảm thấy rất quen thuộc.

Tới đây rồi, các bạn đã đủ công cụ để làm 1 cái app nho nhỏ rồi. Còn những thứ như network, thì các bạn có thể tìm hiểu tiếp trong quá trình thực hành vì thực ra Flutter có rất nhiều package hỗ trợ cho các bạn trong việc request api.

Một số source app bạn có thể thực hành:

Tạm kết

Qua bài này, các bạn đã phần nào đúc kết được thêm kinh nghiệm trong quá trình tự học Flutter. Trong tương lai, mình sẽ tự viết những chủ đề về Flutter. Các bạn có thể nghiên cứu các bài viết chính chủ của mình thay vì phải sử dụng source trang khác.

Tài liệu tham khảo:

Follow me more:

Xin cảm ơn các bạn đã theo dõi và hẹn gặp lại!

PinYummlyLinkedInPrintShares169

Related Posts:

Written by

Leave a Reply

Your email address will not be published. Required fields are marked *