Back to blog

Feb 09, 2025

Tìm hiểu flutter - cách làm 1 ứng dụng mobile CRUD đơn giản (phần 1)

PH

Phineas

@Phineas

cover

Để học flutter, điều đầu tiên bạn phải biết đến ngôn ngữ Dart.

Giới Thiệu Về Ngôn Ngữ Dart

Dart là một ngôn ngữ lập trình do Google phát triển, được thiết kế để xây dựng các ứng dụng mobile, web và desktop với hiệu năng cao. Dart được giới thiệu lần đầu tiên vào năm 2011 và từ đó đã trở thành nền tảng chính cho phát triển ứng dụng với Flutter.

Các Đặc Điểm Nổi Bật Của Dart:

  1. Cú Pháp Dễ Tiếp Cận: Dart có cú pháp tương tự như các ngôn ngữ lập trình hiện đại như JavaScript, Java và C#, giúp cho các lập trình viên dễ dàng làm quen và sử dụng.
  2. Hiệu Năng Cao: Dart biên dịch sang mã máy với hiệu năng cao, đồng thời hỗ trợ biên dịch JIT (Just-In-Time) và AOT (Ahead-Of-Time), giúp ứng dụng chạy mượt mà và nhanh chóng.
  3. Phát Triển Đa Nền Tảng: Dart là nền tảng chính cho Flutter, cho phép phát triển các ứng dụng di động, web và desktop từ cùng một codebase.
  4. Tính Bảo Mật và An Toàn: Dart hỗ trợ các tính năng như null safety, giúp giảm thiểu lỗi runtime và tăng cường tính ổn định của ứng dụng.
  5. Thư Viện Phong Phú: Dart đi kèm với một bộ thư viện phong phú, cung cấp các công cụ và API cần thiết để xây dựng các ứng dụng mạnh mẽ.

Các Tính Năng Chính Của Dart:

  1. Null Safety: Null safety là một tính năng quan trọng của Dart, giúp giảm thiểu các lỗi null reference, cải thiện độ ổn định và an toàn của mã nguồn.
  2. Asynchronous Programming: Dart hỗ trợ lập trình bất đồng bộ thông qua async/await, giúp xử lý các tác vụ như đọc/ghi file, truy vấn API một cách dễ dàng và hiệu quả.
  3. Dart VM: Dart VM (Virtual Machine) là môi trường chạy mã Dart, hỗ trợ biên dịch JIT cho phép thực thi mã nguồn nhanh chóng trong quá trình phát triển.
  4. Ahead-of-Time (AOT) Compilation: Dart cũng hỗ trợ biên dịch AOT, giúp tối ưu hóa mã nguồn cho các ứng dụng di động và máy tính để bàn, đảm bảo hiệu năng cao khi triển khai.
  5. Strong Typing: Dart là một ngôn ngữ strongly-typed, giúp phát hiện lỗi biên dịch sớm và tăng cường tính rõ ràng của mã nguồn.

Một Số Ví Dụ Cơ Bản Về Dart:

Hello World:

dart
void main() {
  print('Hello World! I am Phineas');
}

Biến và Kiểu Dữ Liệu:

dart
void main() {
  String name = 'John';
  int age = 25;
  double height = 1.75;
  bool isStudent = true;

  print('Name: $name, Age: $age, Height: $height, Student: $isStudent');
}

Hàm và Phạm Vi:

dart
void greet(String name) {
  print('Hello, $name!');
}

void main() {
  greet('Alice');
  greet('Bob');
}

Lập Trình Bất Đồng Bộ:

dart
Future<void> fetchData() async {
  await Future.delayed(Duration(seconds: 2));
  print('Data fetched');
}

void main() async {
  print('Fetching data...');
  await fetchData();
  print('Done');
}

Giới Thiệu Về Flutter:

Flutter là một bộ công cụ phát triển ứng dụng giao diện người dùng mã nguồn mở do Google phát triển. Với Flutter, bạn có thể tạo ra các ứng dụng di động, web và desktop từ cùng một codebase. Điều đặc biệt về Flutter là nó sử dụng ngôn ngữ Dart và cung cấp một loạt các widget có khả năng tùy chỉnh cao, giúp việc xây dựng giao diện người dùng trở nên dễ dàng và nhanh chóng.

Ưu Điểm Của Flutter:

  • Hiệu Năng Cao: Flutter biên dịch mã nguồn thành mã gốc, mang lại hiệu năng gần như ứng dụng native.
  • Hot Reload: Cho phép nhà phát triển thấy các thay đổi trong code ngay lập tức mà không cần phải khởi động lại ứng dụng.
  • Widget Tùy Chỉnh: Flutter cung cấp rất nhiều widget có thể tùy chỉnh, giúp việc xây dựng giao diện người dùng dễ dàng hơn.
  • Cross-Platform: Bạn có thể phát triển ứng dụng cho Android, iOS, web và desktop chỉ với một codebase.

Cách Làm Ứng Dụng CRUD Đơn Giản Với Firebase

Bước 1: Thiết Lập Môi Trường

  1. Cài đặt Flutter:
  2. Tải về và cài đặt Flutter SDK từ trang chủ của Flutter
  3. Thiết lập biến môi trường để sử dụng Flutter từ command line
  4. Chạyđể kiểm tra cấu hình môi trường

Bước 2: Tạo Dự Án Mới:

  • Nếu các bạn dùng terminal có thể gõ lệnh sau:
dart
flutter create crud_app
cd crud_app
  • Nếu các bạn dùng VSCode và đã cài các extension mình đã nói ở phía trên, các bạn có thể bấm tổ hợp phím Command + Shift + P (Mac) hoặcCtrl + Shift + P (Window) sau đó gõ Flutter: New project và chọn Application

Bước 3: Cài đặt một số package cần thiết:

Mở file

pubspec.yaml

và thêm các dependencies:

dart
dependencies:
  flutter:
    sdk: flutter
  firebase_core:
  firebase_auth:
  cloud_firestore:
  date_picker_timeline:
  get:

Sau đó chạy lệnh:

dart
flutter pub get

Bước 4: Connect đến firebase:

  • Đăng nhập vào firebase console https://console.firebase.google.com/ sau đó tạo mới 1 project
  • Tiếp theo bật terminal của Vscode và đăng nhập và khởi tạo ứng dụng firebasebằng các lệnh sau
dart
firebase login
flutter pub global activate flutterfire_cli
export PATH="$PATH":"$HOME/.pub-cache/bin"
flutterfire configure

Sau khi login và chọn dự án, vào firebase các bạn có thể thấy ứng dụng mobile và ios được khởi tạo:

  • Chỉnh sửa rule cho firestore database như hình

Chạy ứng dụng đầu tiên bằng flutter:

  1. Ở Vscode, tiếp tục ấn Command + Shift + P (Mac) hoặcCtrl + Shift + P (Window) sau đó gõ Flutter: Select device và chọn Device mà bạn muốn chạy. Ở đây mình sài mac nên mình sẽ chạy IOS
  2. Sau khi chọn và khởi động thiết bị, chọn Run và debug

Vậy là phần 1, mình đã hoàn thành xong việc tìm hiểu sơ về flutter, khởi tạo firebase và chạy ứng dụng đầu tiên. Hẹn gặp lại vào phần 2 CRUD ứng dụng.