Hướng dẫn sử dụng Flutter

Khi nhắc đến việc làm sao để tạo ra 1 ứng dụng mobile thì thứ mọi người sẽ lặp tức nghĩ ngay đến là native app [Android và iOS], nhưng bên cạnh đó vẫn còn rất nhiều công nghệ có thể giúp bạn tạo ra 1 ứng dụng mobile như Cordova, Webview [WeChat], Ionic, Xamarin và React Native. Tất cả các framework, platform đó đều hổ trợ người dùng tạo ra được 1 ứng dụng mobile theo ý muốn của mình.

Và để không bỏ lỡ cuộc vui thì Google cũng đã mang đến cho người dùng đứa con mới nhất của mình - Flutter- nó kế thừa cũng như nổi bật hơn các công nghệ hybrid app kia. Vậy thì làm sao để có thể sử dụng, có thể tạo ra được những sản phẩm theo ý muốn của mình? Bài viết với những kiến thức của bản thân mình sẽ đem đến cho bạn có được 1 số kiến thức cơ bản nhất để có thể tự mình "chiến" và "khám phá" Flutter.

Ngôn ngữ Dart

• Là ngôn ngữ lập trình đơn giản, dễ hiểu và dễ tiếp cận.
• Là ngôn ngữ lập trình được sử dụng để build lên Flutter Framework.
• Nó ra đời vào năm 2011, nhắm đến việc tạo ra các ứng dụng đa nền tảng - web, mobile, desktop và IoT.
• Phiên bản hiện tại khi mình viết bài viết này là 2.8 và nó khác là ổn định trong việc lập trình.
• Là ngôn ngữ tĩnh, theo hướng đối tượng [OOP], functional programming và lexical scoped.
• Nó như 1 sự kết hợp giữa Java và JavaScript nên khi học nó nếu ai đã có nền tảng 1 trong 2 ngôn ngữ kia thì lúc tiếp cận sẽ khá dễ.

1. Cài đặt Dart SDK và viết chương trình Dart đầu tiên

a. Cài đặt

Dart SDK có các thư viện và công cụ dòng lệnh [command-line tools] mà bạn cần để phát triển các ứng dụng Web với ngôn ngữ Dart. Nhưng trong loạt bài hướng dẫn sắp tới của mình sẽ hướng về phát triển Mobile nên sẽ không cần phải cài đặt Dart SDK.

Nếu muốn, bạn có thể truy cập dart.dev/get-dart để cài đặt Dart SDK.

b. Viết chương trình HelloWorld với Dart Language

Có nhiều IDE phức tạp mà nó hỗ trợ Dart thông qua các plugin như:Android Studio,IntelliJ IDEA,Visual Studio Code... Tùy mục đích phát triển ứng dụng mà chọn IDE tương ứng.

Nếu các bạn muốn thực hành viết code với ngôn ngữ Dart thì Visual Studio Code là một lựa chọn khá ổn. Nhưng nếu để build một ứng dụng Flutter thì các bạn nên dùng Android Studio.

• Đầu tiên các bạn downloadVSCodetừ trang chủ, sau đó các bạn cài đặt và mở nó lên.

• ĐểVS Codehỗ trợ kiểm tra cú pháp code, định dạng code, debug ... thì cần cài đặt Plugin do Google cung cấp làDart code. Chọn mục plugin [đánh dấu màu đỏ] gõ Dart, chọn nó, rồi bấm vàinstall

• Sau khi đã cài đặt xong, các bạn tạo 1 thư mục với tên tùy chọn các bạn đặt, trong thư mục sẽ là tên file .dart cũng tùy các bạn đặt theo ý thích. Sau đó các bạn mở thư mục bằng VSCode.
• Ở đây mình sẽ tạo file hello.dart với nội dung như sau :

/** * Đây là chương trình Dart đầu tiên */ main[] { //in ra dòng chữ print["Hello World!"]; }

• Giờ ta sẽ cầu hình để chạy và Debug code. Bấm chọn biểu tượngDebug, sau đó chọnAdd configuration ...như hình dưới, nó sẽ tạo ra filelaunch.json

• Giờ thì có chạy và Debughello.dart, để bắt đầu chạy và debug bấm vàoStart debugging[1], khi code đang chạy sẽ có công cụ debug [2] với các chức năng rất quen thuộc nhưcontinue,Step into,restart...

2. Một số khái niệm cơ bản khi sử dụng ngôn ngữ Dart

• Bất kì thứ gì có thể đặt vào 1 biến đều làobjectvà mọi object đều là thể hiện của 1class. Số, hàm,nullđều là object. Mọi object thì đều xuất phát từ Object class.
• Tuy Dart là strong typed nhưng Dart vẫn hỗ trợ loose typed. Có nghĩa là nếu bạn chưa chắc chắn về kiểu dữ liệu cho biến thì vẫn có thể khai báo với kiểu dynamic.
• Dart hỗ trợ generic type, ví dụListvàList.
• Dart hỗ trợ top-level function [như hàm main[]]. Bạn có thể tạo ra 1 hàm bên trong hàm khác [nested hoặc local function].
• Dart cũng hỗ trợ top-level variables.
• Không như Java, Dart không có các từ khóa để set access modifier. Nếu 1 indentifier bắt đầu với [ _ ] thì nó làprivatetrong library của nó.
• Identifier có thể bắt đầu bằng một chữ cái hoặc dấu gạch dưới [ _ ].
• Dart vừa hỗ trợexpressions, vừa hỗ trợstatements. Bạn có thể sử dụng biểu thức? exp1 : exp2và cũng có thể sử dụng câu lệnhif else.
• Dart tools có thể báo cho bạn 2 loại vấn đề: warnings và errors. Warnings là những dấu hiểu chỉ ra rằng code của bạn có thể không hoạt động, nhưng chương trình của bạn vẫn có thể chạy. Errors có thể là error lúc compile-time hoặc run-time. Error lúc compile-time hiển nhiên sẽ khiến code bạn không chạy được, còn kết quả của error run-time sẽ là những exceptions được throw ra khi chạy.

Flutter Framework

Flutter là 1 mobile SDK do Google phát triển, nó giúp người dùng có thể tạo ra được 1 ứng dụng chạy trên cả iOS và Android. Là một Cross-flatform framework nhưng khác với các Cross-flatform hiện tai, Flutter không thông qua bridge, mà nó sẽ chạy engine render riêng [viết bằng C++] và dùng Flutter framework [viết bằng Dart] để giao tiếp với các service. Cả 2 bộ này sẽ được đóng gói cùng ứng dụng và thông qua SDK nó có thể chạy trên đa nền tảng. Kì vọng mà team phát triển Flutter nhắm đến là có thể chạy trên đa nền tảng, Flutter ngoài chạy trên mobile thì còn có thể chạy trên nền web thông qua dự án mang tên Hummingbird, chạy trên các thiết bị IoT và cả desktop. Tuy vậy, Flutter cũng còn rất "non trẻ", nó cần thêm thời gian để có thể phát triển hơn nữa và việc chọn Flutter để học cũng là 1 cách để đầu tư cho tương lai.

Phiên bản hiện tại là 1.17

1. Đặc điểm nổi bật

• Fast Development: Tíng năng Hot Reload hoạt động trong milliseconds để hiện thị giao diện tới bạn. Sử dụng tập hợp các widget có thể customizable để xây dựng giao diện trong vài phút. Ngoài ra Hot Reload còn giúp bạn thêm các tính năng, fix bug tiết kiệm thời gian hơn mà không cần phải thông qua máy ảo, máy android hoặc iOS.

• Expressive and Flexible UI: Có rất nhiều các thành phần để xây dựng giao diện của Flutter vô cùng đẹp mắt theo phong cách Material Design và Cupertino, hỗ trợ nhiều các APIs chuyển động, smooth scrolling...

• Native Performance: Các widget của fluter kết hợp các sự khác biệt của các nền tảng ví dụ như scrolling, navigation, icons, font để cung cấp một hiệu năng tốt nhất tới iOS và Android.

2. Nhược điểm

• Bộ render UIđược nhóm phát triển gần như viết lại, không liên quan tới UI có sẵn của Framework native, dẫn đến memory sử dụng khá nhiều. Hơn nữa, các UI không đi chung với OS, mà được phát triển riêng, nghĩa là cùng 1 phiên bản Flutter khi tạo ra ứng dụng cho iOS thì iOS 8.x -> 12.x đều y chang nhau, tương tự như với Android. Nhưng UI của Android thì tất nhiên khác với iOS.

• Phải học thêm ngôn ngữ DART: lập trình viên biết về DART không nhiều, cũng có rủi ro là học xong DART sẽ dính liền luôn với DART ở mảng phát triển ứng dụng mobile. Chứ không uyển chuyển như JS hay Python có thể nhảy qua lại giữa front, back hay AI

• Mô hình dữ liệu mới: bloc pattern, DART Streaming; nếu đã quen với Redux khi làm phát triển React Native, bạn sẽ mất thời gian để học thêm mô hình dữ liệu trong Flutter, mặc dù nó không khó.

• Là con cưng của Google, tuy nhiên hãng dính nhìu phốt với thói quen quăng con giữa chợ nên cũng cần cân nhắc. Tuy nhiên, mình nhận thấy Flutter rất tốt, tốt hơn nhiều so với những cái mà Google từng làm ra như Angular.

3. Cài đặt Flutter

• Như mình đã nói ở trên, thì để thực hành với ngôn ngữ Dart thì VSCode là sự lựa chọn ổn nhưng với ý kiến cá nhân của mình và với các bạn lập trình java adroid thì tạo ứng dụng với Flutter với Android Studio lại là lựa chọn tuyệt vời.
• Trước tiên các bạn cần phải downloadandroid studio

• Tiếp theo là các bạn downloadFlutter SDK. Đây là các phiên bản mà Google đã release và hiện tại phiên bản mới nhất là 1.17.2.
  • Sau khi download flutter sdk về máy, các bạn giải nén nó vào bất kỳ ổ cứng hoặc thư mục nào đó mà các bạn mong muốn [ Ví dụ : C:\src\flutter, lưu ý sẽ không giải nén vàoC:\Program Files\ vì thư mục này cần một quyền truy cập cao].
  • Đây là toàn bộ thư mục và file của flutter sdk

• Sau khi đã cài đặt xong Android Studio và Flutter SDK các bạn mở Android Studio lên và Lựa chọn Start a new Flutter project

• Đến bước cài đặt Flutter SDK path, các bạn sẽ chọn đến đường dẫn flutter các bạn vừa giải nén. Sau đó click Next và đợi Android Studio build ứng dụng mang tên flutter_demo được viết bằng ngôn ngữ Dart

• Sau khi Android Studio build xong sẽ được một project với cấu trúc như sau :

4. Cấu trúc thư mục dự án

• Thư mục lib: đây là thư mục lưu trữ các file .dart mà các bạn sẽ viết code lên file đó. Khi vừa mới khởi tạo thì chỉ có 1 tệp tin duy nhất là main.dart, main.dart phải tồn tại và nó phải nằm trong thư mục gốc của lib. Đây là tệp mà Dart và Flutter biết để chạy vào ứng dụng của bạn
• File pubspec.yaml : đây là file chứa các package, khai báo các ảnh offline cho ứng dụng, fonts, ...
• Với những bạn mới bắt đầu thì chỉ cần quan tâm đến thư mục lib và tệp pubspec.yaml vì đây là nơi bạn liệt kê các dependencies của dự án

Tạm kết

Ở phần này mình đã giới thiệu cho các bạn về một trong những Framework mới cho lập trình đa nền tảng trên mobile. Ở các loạt bài sau mình sẽ demo code về ngôn ngữ dart và tạo 1 ứng dụng Hello World với Flutter Project.

Cảm ơn mọi người đã xem bài viết của mình !!!

Tài liệu tham khảo: dart.dev, flutter.dev, medium.com