Cài đặt IDE lập trình Flutter trên window

Cài đặt IDE lập trình Flutter trên window

Việc xây dựng ứng dụng trên Flutter đòi hỏi có công cụ IDE chuyên nghiệp phù hợp với các dự án lớn và đầy đủ các chức năng quan trọng. Hôm nay hãy cùng chúng tôi tìm hiểu cách cài đặt môi trường lập trình Flutter trên window.

Các bài viết liên quan:

Cài Đặt với Windows:

  1. Vào đường dẫn sau và download Flutter SDK mới nhất (https://flutter.dev/docs/get-started/install/windows). Như của tác giả là flutter_windows_2.0.4-stable.zip.
  2. Giải nén file zip và để vào thư mục nào đó, VD: E\flutter\
  3. Cập nhật biến đường dẫn môi trường cho flutter

Để có thể cài đặt biến môi trường ta cần vào Control Panel -> System

Cài đặt IDE lập trình Flutter trên window

Sau đó ta chọn Advanced System settings ở góc phải màn hình và chọn Environment Variables như hình

Cài đặt IDE lập trình Flutter trên window

Sau đó ở phần System variables ta click vào Path và bấm Edit, sau đó bấm New và nhập đường dẫn vào như hình dưới.

Cài đặt IDE lập trình Flutter trên window
  1. Flutter cung cấp cho ta 1 công cụ là flutter doctor với mục đích kiểm tra tất cả các yêu cầu hệ thống của flutter.
Cài đặt IDE lập trình Flutter trên window
  1. Chạy lệnh ở trên và để nó phân tích hệ thống của chúng ta.
Cài đặt IDE lập trình Flutter trên window
  1. Cài đặt Android SDK mới nhất nếu như flutter báo.
  2. Cài đặt Android Studio mới nhất nếu như flutter báo ở link (https://flutter.dev/docs/get-started/install/windows), nếu bạn xài VS Code thì bỏ qua bước này.
  3. Tạo 1 máy ảo Android hoặc kết nối 1 máy Android thật vào hệ thống. (tác giả sử dụng Genymotion để sử dụng máy ảo)
  4. Cài đặt plugins cho VS Code
Cài đặt IDE lập trình Flutter trên window

Ta nhấp vào biểu tượng này ở thanh menu góc trái để vào plugins browser của vs code

Cài đặt IDE lập trình Flutter trên window

Đầu tiên ta bấm tìm và cài đặt Dart

Cài đặt IDE lập trình Flutter trên window

Sau đó ta tìm và cài đặt Flutter như trên

Tạo ứng dụng Flutter đơn giản

  1. Tạo 1 ứng dụng Flutter đơn giản với VS Code
  2. Ta chọn nơi mình muốn lưu trữ project và nhập cmd vào thanh đường dẫn để mở cmd trong đường dẫn này
Cài đặt IDE lập trình Flutter trên window
  1. Ta nhập vào flutter create <your_app_name> vào để tạo 1 project flutter mới ở đường dẫn ta muốn
Cài đặt IDE lập trình Flutter trên window
  1. Ta cd vào project ta vừa chọn
Cài đặt IDE lập trình Flutter trên window
  1. Ta cần analyze và test project flutter trước khi sử dụng với flutter analyzeflutter test để xem project có bất cứ lỗi nào không
Cài đặt IDE lập trình Flutter trên window
  1. Ta vào Visual Studio Code và chọn như sau để open project flutter ta vừa tạo
Cài đặt IDE lập trình Flutter trên window
Cài đặt IDE lập trình Flutter trên window
Cài đặt IDE lập trình Flutter trên window
  • android – Code được tự động tạo ra để ta chạy ứng dụng android
  • ios − Code được tự động tạo ra để ta chạy ứng dụng ios
  • lib – Thư mục chính chứa code Dart được viết sử dụng framework flutter
  • ib/main.dart − Entry point của ứng dụng Flutter
  • test – Thư mục chứa code Dart để test ứng dụng Flutter
  • test/widget_test.dart – Chứa Code mẫu
  • .gitignore – file này dùng để kiểm soát phiên bản git
  • .metadata – được tạo ra tự động bởi tools flutter
  • .packages – được tạo ra tự động để kiểm soát các packages trong Flutter
  • .iml – file project sử dụng trong Android Studio
  • pubspec.yaml – được sử dụng bởi Pub, bộ kiểm soát package trong flutter
  • pubspec.lock – được tạo ra tự động bởi Pub.
  • README.md – các miêu tả project được viết với định dạng Markdown
  1. Thay thế tất cả code trong lib/main.dart bằng code dưới đây
Cài đặt IDE lập trình Flutter trên window
  • Dòng 1 – imports package material, package flutter này giúp ta tạo giao diện người dùng dựa vào Material Design trong Android.
  • Dòng 3 – đây là entry point trong ứng dụng flutter. Gọi hàm runApp và truyền cho nó 1 đối tượng của class MyApp. Mục đích chính của hàm này là đưa widget được cho lên màn hình.
  • Dòng 5-17 – Widget được sử dụng để tạo UI trong framework Flutter. StatelessWidget là 1 widget, đây là widget không duy trì bất cứ trạng thái nào của widget. MyApp extends StatelessWidget và overrides hàm build của nó. Mục đích là để tạo 1 phần UI cửa ứng dụng. Nó có 3 thuộc tính là title, themehome
  • Title là tiêu đề của ứng dụng
  • Theme là theme của widget. Ở đây ta dùng màu xanh làm chủ dạo cho ứng dụng sử dụng class ThemeData và các thuộc tính của nó, primarySwatch.
  • Home là UI bên trong của ứng dụng, mục đích là để đặt 1 widget khác, MyHomePage
  • Dòng 19-38 – MyHomePage cũng giống như MyApp ngoại trừ việc nó trả về widget Scaffold. Scaffold là 1 widget level đầu kế đến là widget MaterialApp, dùng để tạo UI theo material design. Nó có 2 thuộc tính rất quan trọng, appBar dùng để hiển thị header của ứng dụng và body dùng để hiển thị các nội dụng thật sự của ứng dụng. AppBar là 1 widget khác dùng để render header của ứng dụng và chúng ta sử dụng nó trong thuộc tính appBar. Trong thuộc tính body, ta đã sử dụng widget Center, nó được dùng để canh giữa các widget con của nó. Text là widget bên cuối cùng dùng để hiện thị text vào giữa màn hình
  1. Chạy ứng dụng bằng cách mở terminal
Cài đặt IDE lập trình Flutter trên window

Và cd vào trong thư mục lib và bấm flutter run (lưu ý rằng bạn phải mở máy ảo hoặc kết nối máy thật vào trong để có thể chạy được ứng dụng flutter)

Cài đặt IDE lập trình Flutter trên window

Kết quả:

Cài đặt IDE lập trình Flutter trên window

Quý khách có thể tham khảo hơn ở các dịch vụ do websitehcm.com cung cấp như: dịch vụ seo, dịch vụ viết content , dịch vụ chăm sóc website, dịch vụ thiết kế website 

Leave a Reply