Học flutter: Khởi tạo chương trình đầu tiên

Chào các bạn, ở bài học trước chúng mình đã cùng tìm hiểu về Flutter là gì, vì sao chúng ta nên học Flutter và cách cài đặt IDE, Plugins để tạo nên ứng dụng của riêng mình. Tiếp tục Seris học Flutter, bài viết hôm nay sẽ giúp các bạn khởi tạo một chương trình Flutter đầu tiên trong hành trình trở thành một developer chuyên nghiệp trong tương lai. 

Để bước đầu tạo dựng một chương trình Flutter cơ bản, chúng ta cùng thực hiện 3 bước sau:

Bước 1: Tạo project flutter

Mở Android Studio → New Flutter Project.

tạo project flutter

 Đặt tên cho chương trình flutter:

cấu hình chương trình

– Chúng ta sẽ thấy một cửa sổ mới hiện lên, chọn Flutter

cấu hình sdk flutter

• Sau khi chọn Flutter, ta cần chọn “Flutter SDK path” .Vậy ở đây ta chọn đường dẫn ở đâu? “Flutter SDK path” là đường dẫn tới thư mục cài đặt Flutter trên máy tính của bạn. Đường dẫn này đã được cài đặt khi bạn thực hiện cài đặt Flutter. Bạn có thể click vào dấu 3 chấm để thực hiện chọn thư mục đó được lưu sẵn trong máy tính của bạn.
• Tiếp tục chọn next, cửa sổ mới hiện lên.

Cấu hình app flutter

– Ở cửa sổ này, chúng ta sẽ điền từng thông tin vào các ô bên phải:

• ”Project name”: tên của dự án, ở đây mình đặt tên là “first_project”, các bạn có thể đặt tên tùy thích.
• “Project location”: địa chỉ để lưu dự án Flutter.
• Các mục còn lại đã được trình duyệt chọn sẵn, tạm thời  các bạn có thể để giữ nguyên

– Tiếp tục chọn Create.

Vậy là chúng ta đã hoàn thành việc khởi tạo chương trình đầu tay của mình. Nhưng ở đây chúng ta chỉ mới thấy giao diện của IDE để tạo nên chương trình mà thôi. Vậy thì làm như nào để chúng ta thấy được ứng dụng đầu tiên của mình như những ứng dụng trên di động mà ta thấy thường ngày? Có 2 cách phổ biến để mình thấy được sản phẩm là sử dụng máy ảo và trình duyệt web.

app flutter

Cùng nhìn vào chương trình code của chúng mình nào, các bạn đừng vội mà sợ trước những dòng code hơi khó hiểu ở trên màn hình. Tạm thời mình chỉ cần quan tâm vào folder “lib” chứa file “main.dart” – file chính để khởi tạo chương trình đầu tiên. Các bạn chuyển sang bước thứ 2 cấu hình máy ảo để chạy chương trình nhé.

Bước 2: cấu hình máy ảo

Cách 1: Chạy chương trình trên trình duyệt web:

• Mình còn có thể chạy chương trình trên trình duyệt web – rất phù hợp cho những bạn muốn phát triển web bằng flutter, hoặc những bạn máy yếu chạy để test tính năng ứng dụng.
• Cách thực hiện: Chọn Flutter Device Selection → Chrome(Web) . Ở đây mình chọn trình duyệt Chrome các bạn có thể chọn tùy thích.

Chạy chương trình flutter bằng trình duyệt

Cách 2: Sử dụng máy ảo:

1. Ở thanh điều hướng, chọn Tools → Device Manager

1. Tiếp tục chọn Create device

1. Chọn Phone → Name (Ví dụ : Pixel 6 Pro) → Next

Lưu ý : 

• Tại cửa sổ này, bạn có thể thấy bên trái màn hình, Flutter hỗ trợ chạy chương trình trên rất nhiều nền tảng phổ biến hiện nay. Ở đây, mình sẽ chọn “Phone” để hiển thị một cách đẹp nhất về một chương trình Flutter.
• Ở mục “Phone”, có rất nhiều điện thoại để mình cài đặt làm máy ảo, mình sẽ chọn “Pixel 6 Pro” , các bạn có thể chọn tùy thích. Tiếp tục ấn “Next” ở phía dưới cửa sổ.

3. Chọn vào biểu tượng tải xuống:

Lưu ý :

•  Ở đây chúng ta chúng ta lựa chọn hình ảnh cho hệ thống được gán nhãn API của Google – nó bao gồm quyền truy cập vào Dịch vụ Google Play. 
• Thẻ Recommended (Đề xuất) liệt kê các hình ảnh hệ thống được đề xuất. Các thẻ khác bao gồm danh sách đầy đủ hơn. Ngăn bên phải mô tả hình ảnh hệ thống được chọn. Nếu bạn thấy biểu tượng tải xuống bên cạnh hình ảnh hệ thống, thì nghĩa là hình ảnh đó hiện chưa được cài đặt trên máy phát triển của bạn. 
• Nhấp vào biểu tượng đó để tải hình ảnh hệ thống xuống. Bạn phải có kết nối Internet để tải hình ảnh hệ thống xuống.

4. Cấu hình cho điện thoại:

• Sau khi tải xong, một cửa sổ mới xuất hiện để chúng ta cấu hình cho máy ảo của mình. 
• Chúng ta có thể đặt tên cho nó ở “AVD name” và cấu hình chi tiết ở “Show Advanced Settings”. 
• Tiếp tục ấn Finish.

5. Chọn biểu tượng mũi tên ở trên thẻ:

Sau khi thực hiện các bước trên chúng ta có thể thấy máy ảo như hình dưới:

Bước 3: Chạy chương trình flutter đầu tiên

Chọn mũi tên màu xanh lá cây ở thanh công cụ của Android Studio.

• Đến đây bạn chỉ cần chờ chương trình chạy là mình có thể xem được sản phẩm của mình rồi. 
• Ở bước này, thời gian chạy của chương trình có thể chậm , vì đây là lần build đầu tiên, nhưng các bạn yên tâm từ lần sau nó sẽ mượt mà, nhanh nhẹn hơn. Cùng chờ và xem thành của mình nào.

Sau thời gian chờ đợi, vậy là mình đã có thể quan sát và thao tác ứng dụng Flutter đầu tay rồi. Các bạn có thể thao tác những tác vụ trên màn hình như ứng dụng điện thoại thường ngày. Tương tự với chạy trên nền tảng trình duyệt web. Các bạn cùng thử nhé!

Tổng kết :

Ở bài này, mình chỉ tập trung vào cách chạy chương trình một cách ngắn gọn nhất, còn chi tiết code như nào, tại sao từ file “main.dart” mình lại có thể tạo ra một giao diện với chức năng khi ấn vào dấu cộng ở dưới màn hình thì số ở giữa màn hình ở thay đổi, hay tại sao lại là “main.dart” chứ không phải là “main.js” hay “main.cpp” . Bài sau chúng ta sẽ học ngôn ngữ lập trình Dart, các bạn nhớ ôn bài nhé!