Hướng dẫn cài đặt Flutter

Hướng dẫn cài đặt Flutter | Khiêm Lê

Flutter là gì?

Flutter là bộ công cụ UI của Google dùng để xây dựng các ứng dụng đẹp, được biên dịch nguyên bản cho các thiết bị di động, web và máy tính để bàn từ một mã cơ sở duy nhất.

Với Flutter, bạn có thể xây dựng một ứng dụng đẹp, tính tùy biến cực cao, hiệu năng mượt mà. Đặc biệt, với tính năng Hot reload, bạn có thể xem được sự thay đổi chỉ trong vài mili giây.

Một điểm mình đánh giá khá cao nữa là Flutter hỗ trợ debug giao diện cực kì tốt. Bạn có thể chọn từng Widget để xem nó ở dòng code nào, hiện các lưới để canh chỉnh giao diện cho phù hợp…

Với những ưu điểm như vậy, còn chần chừ dì nữa mà không học ngay Flutter nào. Hãy cùng bắt đầu với việc cài đặt Flutter.

Cài đặt Flutter cho Windows

Đầu tiên, bạn truy cập vào flutter.dev, chọn Get started. Sau đó chọn hệ điều hành mà bạn đang sử dụng. Ở đây do mình không có điều kiện nên mình chỉ có thể hướng dẫn các bạn cài đặt trên Windows thôi. Nên mình sẽ chọn Windows.

Yêu cầu hệ thống

Để cài đặt Flutter thì máy tính của bạn cần đáp ứng những yêu cầu sau đây:

  • Windows 7 SP1 hoặc mới hơn (64-bit).
  • Dung lượng trống 400MB (không bao gồm dung lượng cho phần IDE/tools).
  • Các công cụ: Flutter phụ thuộc vào các công cụ có sẵn trong máy tính của bạn:
    • PowerShell 5.0 hoặc mới hơn (cái này đã được tích hợp sẵn vào Windows 10).
    • Git cho Windows 2.x, với tùy chọn chạy câu lệnh git từ cửa sổ lệnh Windows Command Prompt. (Nếu Git đã được cài, hãy chắc chắn rằng bạn có thể chạy câu lệnh git từ cửa sổ lệnh Windows Command Prompt).

Tiến hành cài đặt

Bạn duyệt tìm đến phần Get the Flutter SDK, bấm vào flutter_windows_vxxxx-stable.zip (với xxxx là phiên bản flutter, ví dụ tại thời điểm mình viết Blog này là flutter_windows_v1.9.1+hotfix.6-stable.zip) để tải flutter SDK về. Bạn có thể lưu ở đâu tùy thích sau khi giải nén mình có thể di chuyển nó sau.

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 (lưu ý không được đặt vào thư mục “C:\Program Files\” vì nó yêu cầu quyền riêng tư). Ví dụ mình sẽ làm y như trong docs của Google là tạo một thư mục mới tên là src đặt trong ổ đĩa “C:\” và copy thư mục flutter vào thư mục “C:\src\”.

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:

  1. Click phải chuột vào This PC, chọn Properties
  2. Chọn Advanced system settings (gần phía trên bên trái) trong cửa sổ System.
  3. Chọn Enviroment Variables… trong cửa sổ System Properties.
  4. 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:\src\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.
  5. Nhấn OK để lưu tất cả các thay đổi lại.
Mở System Settings
Mở System Settings
Mở cài đặt nâng cao
Mở cài đặt nâng cao
Mở Environment Variables
Mở Environment Variables
Sửa biến môi trường Path
Sửa biến môi trường Path
Thêm đường dẫn Flutter vào biến Path
Thêm đường dẫn Flutter vào biến Path

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.

Cài đặt Plugins Flutter

Google hỗ trợ bạn hai IDE đó là Android Studio và Visual Studio Code. Đương nhiên là bạn vẫn có thể sử dụng các IDE khác, nhưng mình không chắc là có sẵn các Plugin cho bạn dùng, và nếu có thì nó cũng là do cá nhân tự phát triển, không đầy đủ bằng. Vậy nên mình sẽ chỉ hướng dẫn các bạn cài đặt trên Android Studio và Visual Studio Code.

Đổi với Android Studio các bạn làm như sau:

  1. Khởi động Android Studio
  2. Ở màn hình Welcome to Android Studio, mở menu Configure (phía dưới góc phải), chọn Plugins
  3. Ở tab Marketplace, các bạn search “flutter”, bạn nhấn install vào plugin Flutter ngay kết quả đầu tiên. Plugin này yêu cầu các bạn cài đặt thêm một plugin nữa là Dart, các bạn chọn Yes để cho phép cài đặt Dart nữa.
  4. Các bạn RESTART IDE để áp dụng thay đổi.
Mở Plugins trong Android Studio
Mở Plugins trong Android Studio
Cài đặt plugin Flutter
Cài đặt plugin Flutter
Chấp nhận điều khoản sử dụng Plugin bên thứ 3
Chấp nhận điều khoản sử dụng Plugin bên thứ 3
Cho phép cài đặt plugin Dart
Cho phép cài đặt plugin Dart
Restart Android Studio
Restart Android Studio

Đối với Visual Studio Code, các bạn làm như sau:

  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.
Cài đặt extention Flutter cho VS Code
Cài đặt extention Flutter cho VS Code

Vậy là mình đã cài xong plugin và sẵn sàng để code với Flutter rồi. Tiếp theo, hãy tạo một máy ảo Android nào.

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
Mở AVD Manager
Mở AVD Manager
Create new Virtual Device
Create new Virtual Device
Chọn cấu hình phần cứng
Chọn cấu hình phần cứng
Chọn API Level
Chọn API Level
Hoàn tất cấu hình và nhấn Finish
Hoàn tất cấu hình và nhấn Finish

Vậy là mọi thiết lập đã hoàn tất, hãy cùng tạo một project Flutter hello_world và run thử nào!

Kiểm tra và chấp nhận điều khoản

Đến đây gần như bạn đã hoàn tất, giờ hãy kiểm tra lại lần nữa nào. Bạn mở Command Prompt, gõ lệnh “flutter doctor” và nhấn enter, sau khi câu lệnh chạy xong, bạn kiểm tra xem các mục Flutter, Android toolchain, Android Studio, Connected device có được tích hay chưa, nếu chưa bạn hãy kiểm tra và thực hiện lại các bước ở trên mình đã hướng dẫn nhé.

Nếu như các bạn làm theo những gì mình đã hướng dẫn từ đầu bài viết, bạn chỉ còn một bước là hoàn thành. Ở trong Command Prompt, bạn chạy lệnh “flutter doctor –android-licenses”, sau đó, màn hình cmd sẽ hiện lên một loạt các điều khoản SDK, bạn cứ nhấn “y” và enter để đồng ý hết.

Kiểm tra xem Flutter SDK đã được cài đặt thành công
Kiểm tra xem Flutter SDK đã được cài đặt thành công
Accept android licenses flutter
Chấp nhận Android Licenses

Lưu ý là bước chấp nhận điều khoản rất quan trọng, nếu như bạn không chấp nhận điều khoản SDK, khi bạn build app sẽ bị lỗi ngay và không thể build được.

Tạo và chạy Project Flutter

Bạn chọn một thư mục chứa project của bạn, nhấn chuột phải ở vùng trống và chọn Git bash here, gõ lệnh “flutter create hello_world”, nhấn enter và đợi một lúc để nó tạo project. Sau khi tạo xong thì bạn cd vào trong project vừa tạo bằng lệnh “cd hello_world”, tiếp theo nhập lệnh “flutter run” để chạy project trên máy ảo Android đã tạo trước đó. Lần đầu sẽ khá lâu để nó build và run project nên các bạn kiên nhẫn đợi. Và đây là thành quả!

Flutter Hello World
Flutter hello_world

Tổng kết

Vậy là ở trong bài viết này mình đã hướng dẫn các bạn cài đặt Flutter, cài đặt các plugin cho IDE để code với flutter, cài đặt máy ảo, tạo project và run trên máy ảo Android.

Hy vọng bài viết của mình hữu ích với các bạn. Nếu các bạn thấy hay, hãy share bài viết để mình có động lực làm tiếp nhiều bài viết hay hơn nữa để phục vụ các bạn. Nếu có bất kỳ thắc mắc nào, hãy để lại comment bên dưới bài viết để mình có thể giúp các bạn. Cảm ơn các bạn đã đọc bài viết của mình!

Bài viết liên quan
Custom page transition – Flutter
Custom page transition flutter

Hướng dẫn custom page transition trong Flutter

Hướng dẫn cài đặt Flutter SDK trên Linux
Huong dan cai dat flutter sdk tren

Hướng dẫn cài đặt Flutter SDK trên Linux (Ubuntu distro) nhanh và dễ dàng nhất.

Flutter Firebase login với Facebook
Flutter login with Facebook

Hướng dẫn chi tiết cách tích hợp facebook login vào app flutter với firebase

Thêm Firebase vào Flutter và login với Google
FlutterFire Sign in with Google

Hướng dẫn chi tiết cách thêm Firebase vào Flutter và login với Google

Subscribe
Notify of
guest
4 Comments
Inline Feedbacks
View all comments
Quốc Thịnh

Anh khiêm comeback

Thành

Ghê nha

[…] giúp các bạn nha. Bạn nào chưa biết cách cài trên Windows đừng quên tham khảo bài viết này nha. Đừng quên chia sẻ cho mọi người nếu bạn thấy hay! Cảm ơn các bạn […]

Vinh

Rất cảm ơn anh!!!