Rate this post

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:

Tóm tắt nội dung

Giới thiệu về Flutter và IDE

Flutter là một framework phát triển ứng dụng di động đa nền tảng (cross-platform) được phát triển bởi Google. Nó cho phép lập trình viên xây dựng các ứng dụng di động chất lượng cao, nhanh chóng và đẹp mắt trên nền tảng Android và iOS từ một nguồn code duy nhất.

Flutter sử dụng ngôn ngữ lập trình Dart, một ngôn ngữ dễ học và mạnh mẽ, để xây dựng giao diện người dùng động, tương tác và đẹp mắt. Với Flutter, bạn có thể tạo ra các ứng dụng di động tương tự như native, với hiệu suất gần như tương đương và giao diện người dùng linh hoạt.

Xem thêm Lập trình Flutter

Để phát triển ứng dụng Flutter, bạn cần sử dụng một IDE (Integrated Development Environment) phù hợp. IDE cung cấp môi trường làm việc thuận tiện và hỗ trợ các tính năng như lập trình code, gỡ lỗi, quản lý dự án và triển khai ứng dụng.

Có nhiều IDE phổ biến được sử dụng trong việc phát triển ứng dụng Flutter trên Windows, bao gồm:

Visual Studio Code: Một IDE nhẹ, mạnh mẽ và miễn phí được phát triển bởi Microsoft. Nó có các tiện ích mở rộng (extension) hỗ trợ Flutter để cung cấp trải nghiệm phát triển tốt nhất cho lập trình viên Flutter.
Android Studio: Một IDE phát triển bởi Google, tối ưu cho việc phát triển ứng dụng Android. Nó tích hợp sẵn các công cụ và plugin để phát triển ứng dụng Flutter và có thể hỗ trợ cả iOS thông qua Flutter.
IntelliJ IDEA: Một IDE phát triển bởi JetBrains, hỗ trợ Flutter thông qua plugin Flutter.

Các IDE này đều hỗ trợ cú pháp nhấn mạnh, gỡ lỗi, tự động hoàn thành và các tính năng khác giúp lập trình viên Flutter tăng năng suất và dễ dàng phát triển ứng dụng di động đa nền tảng.

Xem thêm Môi trường phát triển tích hợp Selenium (IDE)

Yêu cầu cài đặt

Để cài đặt và sử dụng môi trường phát triển Flutter trên Windows, bạn cần đảm bảo tuân thủ các yêu cầu sau:

Hệ điều hành: Windows 7 SP1 trở lên (bao gồm Windows 10) – phiên bản 64-bit.
Bộ xử lý: Intel Core i3 hoặc tương đương trở lên.
RAM: Ít nhất 4GB RAM, nhưng đề nghị 8GB RAM hoặc cao hơn để có hiệu suất tốt hơn.
Đĩa cứng: Ít nhất 2GB dung lượng trống để cài đặt các công cụ và gói SDK.
Công cụ phát triển: Bạn cần cài đặt một IDE (Integrated Development Environment) như Visual Studio Code, Android Studio hoặc IntelliJ IDEA để phát triển ứng dụng Flutter.
Flutter SDK: Bạn cần tải xuống và cài đặt Flutter SDK, đây là bộ công cụ cần thiết để phát triển và xây dựng ứng dụng Flutter.
Dart SDK: Flutter sử dụng ngôn ngữ lập trình Dart, vì vậy bạn cũng cần cài đặt Dart SDK.
JDK (Java Development Kit): Nếu bạn sử dụng Android Studio làm IDE, bạn cần cài đặt JDK để phát triển ứng dụng Android.
Thiết bị hoặc Emulator: Để chạy và kiểm tra ứng dụng, bạn có thể sử dụng một thiết bị di động thật hoặc một Emulator (giả lập) Android.
Kết nối Internet: Để tải xuống các công cụ, gói SDK và các phần mở rộng cần thiết, bạn cần có kết nối internet ổn định.

Tuân thủ các yêu cầu trên sẽ giúp bạn cài đặt và sử dụng môi trường phát triển Flutter trên Windows một cách hiệu quả và không gặp vấn đề.

Xem thêm Selenium IDE- Cách Testing cơ bản cho website

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

Để cài đặt một IDE lập trình Flutter trên Windows, bạn có thể lựa chọn giữa hai IDE phổ biến là Visual Studio Code và Android Studio. Dưới đây là hướng dẫn cài đặt cho cả hai IDE này:

Cài đặt Visual Studio Code:

Bước 1: Truy cập trang web chính thức của Visual Studio Code tại https://code.visualstudio.com/.
Bước 2: Tải xuống phiên bản dành cho Windows và chạy tệp tin cài đặt đã tải về.
Bước 3: Tiếp theo, làm theo các hướng dẫn trên màn hình để hoàn thành quá trình cài đặt.
Bước 4: Mở Visual Studio Code và truy cập vào trang tiện ích mở rộng bằng cách nhấp vào biểu tượng hình cây thư mục ở thanh bên trái, sau đó tìm kiếm “Flutter” trong ô tìm kiếm.
Bước 5: Nhấp vào tiện ích mở rộng “Flutter” và nhấp vào nút “Cài đặt” để cài đặt tiện ích Flutter cho Visual Studio Code.
Bước 6: Sau khi cài đặt hoàn tất, khởi động lại Visual Studio Code để có hiệu lực.

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

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

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.

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.

Chạy lệnh ở trên và để nó phân tích hệ thống của chúng ta.

Cài đặt Android SDK mới nhất nếu như flutter báo.
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.
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)
Cài đặt plugins cho VS Code

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

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

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

Cài đặt Android Studio:

Bước 1: Truy cập trang web chính thức của Android Studio tại https://developer.android.com/studio.
Bước 2: Tải xuống phiên bản dành cho Windows và chạy tệp tin cài đặt đã tải về.
Bước 3: Làm theo hướng dẫn trên màn hình để hoàn thành quá trình cài đặt Android Studio.
Bước 4: Sau khi cài đặt Android Studio thành công, mở nó và chọn “Configure” (Cấu hình) trên màn hình chào đón, sau đó chọn “Plugins” (Tiện ích mở rộng).
Bước 5: Tìm kiếm “Flutter” trong cửa sổ “Plugins” và nhấp vào nút “Install” (Cài đặt) để cài đặt tiện ích Flutter cho Android Studio.
Bước 6: Khởi động lại Android Studio để áp dụng các thay đổi.

Sau khi cài đặt thành công IDE lập trình Flutter (Visual Studio Code hoặc Android Studio), bạn đã sẵn sàng để bắt đầu phát triển ứng dụng Flutter trên Windows.

Tiếp theo sau khi cài đặt IDE lập trình Flutter, bạn cần thực hiện các bước tiếp theo để cấu hình môi trường phát triển Flutter trên Windows. Dưới đây là các bước cần thiết:

Xem thêm Giới thiệu về Package trong Flutter

Cấu hình Flutter SDK

Bước 1: Tải xuống Flutter SDK từ trang web chính thức của Flutter tại https://flutter.dev/.
Bước 2: Giải nén tệp tin Flutter SDK đã tải xuống vào một vị trí trên ổ đĩa của bạn.
Bước 3: Mở IDE lập trình Flutter (Visual Studio Code hoặc Android Studio) và mở cài đặt hoặc tùy chọn Preferences.
Bước 4: Tìm kiếm phần “Flutter” hoặc “Flutter SDK path” trong cài đặt và chỉ định đường dẫn tới thư mục Flutter SDK đã giải nén trong bước trước.
Bước 5: Lưu các cài đặt và đợi IDE tải xuống các thành phần bổ sung và tiện ích cho Flutter.

Cấu hình Emulator hoặc thiết bị thực

Nếu bạn muốn chạy ứng dụng Flutter trên một Emulator (giả lập) Android hoặc thiết bị di động thực, bạn cần cấu hình chúng.
Đối với Emulator Android, bạn có thể sử dụng Android Virtual Device Manager (AVD Manager) trong Android Studio để tạo và quản lý các Emulator.
Đối với thiết bị di động thực, hãy đảm bảo rằng thiết bị được kết nối với máy tính và đã được bật chế độ Debugging USB.
Sau khi cấu hình Emulator hoặc thiết bị di động, IDE lập trình Flutter sẽ có thể tìm thấy và sử dụng chúng để chạy và kiểm tra ứng dụng.

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

Tạo 1 ứng dụng Flutter đơn giản với VS Code
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

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

Ta cd vào project ta vừa chọn

Ta cần analyze và test project flutter trước khi sử dụng với flutter analyze và flutter test để xem project có bất cứ lỗi nào không

Ta vào Visual Studio Code và chọn như sau để open project flutter ta vừa tạo

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

Thay thế tất cả code trong lib/main.dart bằng code dưới đây

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, theme và home

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