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.
Đầ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:
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:\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.
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. Đươ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.
Ở màn hình Welcome to Android Studio, mở menu Configure (phía dưới góc phải), chọn Plugins
Ở 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.
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.
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:
Khởi động Android Studio
Vào menu Configure và chọn AVD Manager
Chọn Create Virtual Device
Chọn một thiết bị và nhấn Next
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
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.
Nhấn nút ▶ để chạy máy ảo vừa tạo
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.
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
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!