Lập trình Flutter - Công cụ phát triển

Hôm nay mình sẽ giải thích chi tiết về công cụ phát triển trong Flutter . Bộ công cụ phát triển đa nền tảng đầu tiên được phát hành  ngày 4/12/22018. Google đã tiếp tục làm việc để cả thiện và phát triển mạnh mẽ flutter framework với các công cụ khác nhau

Widget Sets

Google cập nhật widget Material và Cupertino để cung cấp chất lượng độ phân giải tốt trong thành phần thiết kế. Bản mới nhất là flutter 1.2 được thiết kế để hỗ trợ lắng nghe sự kiện từ bàn phím và chuột 

Phát triển ứng dụng Flutter với Visual Studio Code

Visual Studio Code hỗ trợ trong việc phát triển ứng dụng flutter và cung cấp các phím tắt mở rộng để phát triển một cách nhanh chóng và đạt hiệu quả cao . Một vài tính năng chính được cung cấp bởi Visual Studio Code như sau :

  1. Hỗ trợ code : Khi chúng ta muốn kiểm tra một tính năng , ta chỉ cần nhấn Ctrl+Space thì sẽ hiển thị một list các tính năng phù hợp
  2. Ctrl+ : công cụ sửa lỗi nhanh 
  3. Phím tắt khi coding
  4. Cung cấp chi tiết chức năng và cách dùng trong comments
  5. Phím tắt Debugging
  6. Hot restarts

Dart DevTools

Ta có thể hoàn toàn sử dụng Android Studio hay Visual Studio Code , hoặc bất kì IDE khác để viết code và cài đặt plugins. Đội ngũ phát triển của Google đã và đang làm việc với các công cụ phát triển khác gọi Dart DevTools . Đó là bộ lập trình dựa trên web. Nó hỗ trợ cả hai nền tảng là Android và IOS. 

Cài đặt  DevTools

Để cài đặt Devtools thì ta cần nhấn lệnh sau :

flutter packages pub global activate devtools

Sau đó ở command line sẽ hiển thị :

Resolving dependencies... 
+ args 1.5.1 
+ async 2.2.0
+ charcode 1.1.2 
+ codemirror 0.5.3+5.44.0 
+ collection 1.14.11 
+ convert 2.1.1 
+ devtools 0.0.16 
+ devtools_server 0.0.2 
+ http 0.12.0+2 
+ http_parser 3.1.3 
+ intl 0.15.8 
+ js 0.6.1+1 
+ meta 1.1.7 
+ mime 0.9.6+2 
.................. 
.................. 
Installed executable devtools. 
Activated devtools 0.0.16.

  Chạy Server

Bạn có thể chạy máy chủ DevTools như sau :

flutter packages pub global run devtools

Máy chủ sẽ phản hồi

Serving DevTools at http://127.0.0.1:9100

 Bắt đầu với ứng dụng của bạn 

Đi đến ứng dụng của bạn, mở giả lập và chạy với dòng lệnh :

flutter run --observatory-port=9200

Và bây giờ ta đã kết nối được với DevTools

Bắt đầu với DevTools trong Browser

Truy cập địa chỉ sau để kết nối với DevTools 

http://localhost:9100/?port=9200

Trên trình duyệt của bạn sẽ hiển thị như sau :

Flutter SDK

Để cập nhật Flutter SDK , ta sử dụng dòng lệnh sau :

flutter upgrade

Bạn có thể thấy kết quả như sau :

Để cập nhật các package trong flutter, ta dùng lệnh 
 

flutter packages upgrade

Bạn sẽ thấy dòng phản hồi

Running "flutter packages upgrade" in my_app... 7.4s

Flutter Inspector

Nó được sử dụng để khám phá widget flutter ở dạng cây . Để làm được điều này, chạy dòng lệnh sau ở console

flutter run --track-widget-creation

Bạn có thể thấy kết quả như sau :

Launching lib/main.dart on iPhone X in debug mode... 
─Assembling Flutter resources...                       3.6s 
Compiling, linking and signing...                      6.8s 
Xcode build done.                                     14.2s 
2,904ms (!)
To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R". 
An Observatory debugger and profiler on iPhone X is available at: http://127.0.0.1:50399/ 
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

Tới url ở trên http://127.0.0.1:50399/, ta sẽ được kết quả như sau :