Bài 22: Công cụ phát triển - Học lập trình Flutter cơ bản

Đăng bởi: Admin | Lượt xem: 4809 | Chuyên mục: Android

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 :

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
Ctrl+ : công cụ sửa lỗi nhanh
Phím tắt khi coding
Cung cấp chi tiết chức năng và cách dùng trong comments
Phím tắt Debugging
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 :

Bài tiếp theo: Viết ứng dụng hoàn chỉnh >>

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!