Home / Hướng Dẫn / Blogger / Flutter / Bài 3: Tạo ứng dụng Flutter đầu tiên

Bài 3: Tạo ứng dụng Flutter đầu tiên

Trong bài này, mình sẽ hướng dẫn các bạn tạo một Flutter Application đầu tiên trên Android Studio, quan đó giúp các bạn hiểu cơ bản cấu trúc của một project ứng dụng Flutter

Bước 1 − Mở Android Studio

Bước 2 − Tạo Flutter Project mới: Chon Start a New Flutter Project hoặc từ menu  File → New → New Flutter Project

Bước 3 − Có nhiều loại proect Flutter khác nhau chúng ta chọn Flutter Application và nhấn Next.

Bước 4 − Đặt tên và mô tả cho Project sau đó chọn Next.

Bạn đặt tên cho project là flutter_app hoặc tên bất kì. Chọn đường dẫn thư mục Flutter SDK, nơi lưu trữ project và mô tả của ứng dụng sau đó nhận Next

Bước  5 − Điền package_name cho ứng dụng

Bước 6 − Nhấn Finish và đợi một lúc để Android Studio tiến hành việc tạo project.

Sau khi tạo xong, chúng ta có thể thấy cấu trúc của một project Flutter như bên dưới:

Mình giải thích qua các thành phần của một Project Flutter

  • android − Thư mục code sinh tự động cho ứng dụng Android
  • ios − Thư mục code sinh tự động cho ứng dụng iOS
  • lib − Main folder chứa Dart code được viết khi sử dụng flutter framework
  • lib/main.dart − File đầu tiên là điểm khởi đầu của ứng dụng Flutter application
  • test − Folder chứa Dart code để test flutter application
  • test/widget_test.dart − Code mẫu
  • .gitignore − Git version control file – File này chứa cấu hình cho project git
  • .metadata − sinh tự động bởi flutter tools
  • .packages − sinh tự động để theo dõi flutter packages
  • .iml − project file của Android studio
  • pubspec.yaml − Được sử dụng Pub, Flutter package manager
  • pubspec.lock − Sinh tự động bởi Flutter package manager, Pub
  • README.md − Project description được viết theo cấu trúc Markdown

Bước 7 − Mặc định Android Studio đã tạo sẵn cho chúng ta một ứng dụng counter dùng để tăng một số khi nhấn vào button (+) trong file lib/main.dart

Chúng ta có thể chạy thử chương trình mẫu của Flutter như sau:

Các bạn có thể xóa hết các đoạn chú thích để xem rõ code hơn.

Chúc các bạn vui vẻ!

About TapChi CNTT

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.