P1 – Giới thiệu và hướng dẫn cài đặt Flutter cho Windows

Flutter là một Framework viết trên nền ngôn ngữ Dart. Flutter được sinh ra như một Cross-platform framework nhưng khác với những Cross-platform hiện tại, Flutter viết mã và build ra các đoạn mã thực thi tương ứng trên các thiết bị khác nhau thay vì build ra thành các đoạn mã được tối ưu và chạy trên những môi trường trung gian.

Cross-platform là một thuật ngữ chỉ các phần mềm máy tính hay các phương thức điện toán và các khái niệm được thực thi đầy đủ và vận hành cùng nhau trên nhiều nền tảng máy tính.

Bài viết này sẽ hướng dẫn bạn cách cài đặt Flutter cho Windows và cách tạo và chạy Project Flutter

Cài đặt flutter cho Windows

• Vào https://flutter.dev/docs/get-started/install tiến hành cài đặt theo hệ điều hành của máy

• Sau đó các bản tải về flutter SDK. Sau khi tải về xong, các bạn giải nén file vừa tải về (tùy chọn Extract here) ta sẽ được một thư mục tên là flutter. Các bạn hãy để thư mục này vào một nơi nào đó mà bạn muốn.

Bây giờ bạn đã sẵn sàng để chạy lệnh Flutter Console. Nhưng để có thể chạy lệnh flutter từ Command Prompt, bạn nên cập nhật đường dẫn. Các bước thực hiện như sau:

• Click phải chuột vào This PC, chọn Properties
• Chọn Advanced system settings (gần phía trên bên trái) trong cửa sổ System.
• Chọn Enviroment Variables… trong cửa sổ System Properties.
• Trong phần User variables, các bạn tìm Variable là PATH và nhấn Edit, nhấn New và thêm đường dẫn đến thư mục “flutter\bin”. Ví dụ của mình là “C:\flutter\bin”. Nếu như bạn không tìm thấy Variable PATH bạn nhấn New và đặt tên Variable là PATH và đường dẫn đến thư mục flutter\bin của bạn.
• Nhấn OK để lưu tất cả các thay đổi lại.

Vậy là bạn đã có thể chạy lệnh flutter từ Command Prompt rồi. Giờ hãy check thử xem nào. Mở Command Prompt lên và chạy lệnh “flutter –version”. Nếu như nó hiện lên thông tin Flutter, framwork, dart version… thì bạn đã cài thành công.

Tiếp theo, chúng ta sẽ phải cài đặt Plugins cho IDE để code với Flutter.

Google hỗ trợ bạn hai IDE đó là Android Studio và Visual Studio Code.

• Cài đặt Android Studio https://developer.android.com/studio
• Sau khi cài đặt thành công các bạn tiến hành thiết lập tạo máy ảo Android Studio.

Để tạo một máy ảo Android Studio, các bạn làm theo các bước sau:

1. Khởi động Android Studio
2. Vào menu Configure và chọn AVD Manager
3. Chọn Create Virtual Device
4. Chọn một thiết bị và nhấn Next
5. Các bạn chọn một image x86 hoặc x86_64 đều được (khuyến khích bản mới nhất – nếu không có sẵn thì bạn nhấn Download và đợi một chút để nó tải image đó) sau đó nhấn Next
6. Trong phần Graphics, bạn chọn Hardware – GLES 2.0. Bạn có sửa các tùy chọn khác nếu muốn và nhấn Finish để tạo máy ảo.
7. Nhấn nút ▶ để chạy máy ảo vừa tạo.

Tiếp theo, chúng ta tiến hành cài đặt VS Code https://code.visualstudio.com/

Sau khi cài đặt xong VS Code chúng ta cài đặt extentions flutter cho VS Code:

1. Mở Visual Studio Code
2. Vào tab Extentions trên thanh sidebar bên trái
3. Search “flutter”, các bạn nhấn Install plugin đầu tiên của kết quả tìm kiếm. Khác với Android Studio, khi cài plugin Flutter thì plugin Dart cũng sẽ được tự cài theo mà không cần bạn xác nhận.

Tạo và chạy Project Flutter

Chọn thư mục chưa project, nhấn chuột phải ở vùng trống và chọn Git bash here, gõ lệnh “flutter create tên_app”. Ví dụ của mình là:

Sau khi create dự án thành công, các bạn dùng lênh “cd tên_dự_an” tiếp dùng lệnh ” flutter run” để chạy project trên máy ảo android đã chạy trước đó.

Tuyệt vời hãy thử thay đổi code ở file main.dart trong thử mục lib

primarySwatch: Colors.green,
home: MyHomePage(title: 'CodeGym App'),
 child: Icon(Icons.perm_contact_calendar),

Sau đó chúng ta tiến hành Hot reload bằng cách gõ “r” ở git:

Xem kết quả:

Chúc bạn thành công!

Author: Lê Quốc Khánh

XEM THÊM CÁC BÀI VIẾT KHÁC TẠI ĐÂY.