Cơ sở dữ liệu thời gian thực cho ứng dụng Flutter

Cơ Sở dữ liệu thời gian thực trong Flutter: Làm chủ Firebase Realtime Database

Trong kỷ nguyên ứng dụng di động hiện nay, tính năng "thời gian thực" (real-time) không còn là một lựa chọn mà đã trở thành tiêu chuẩn. Cho dù bạn đang xây dựng một ứng dụng chat, một hệ thống theo dõi đơn hàng hay bảng điều khiển chứng khoán, việc dữ liệu được cập nhật ngay lập tức mà không cần tải lại trang là vô cùng quan trọng. Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách tích hợp Firebase Realtime Database vào Flutter một cách chi tiết và dễ hiểu nhất.

Mục lục bài viết

• 1. Firebase Realtime Database là gì?
• 2. Tại sao nên chọn Firebase cho dự án Flutter?
• 3. Các bước chuẩn bị và cài đặt
• 4. Thao tác với dữ liệu (CRUD Operations)
• 5. Lắng nghe dữ liệu thời gian thực với StreamBuilder
• 6. Một số lưu ý về bảo mật và tối ưu chi phí
• 7. Kết luận

1. Firebase Realtime Database là gì?

Firebase Realtime Database là một cơ sở dữ liệu NoSQL được lưu trữ trên đám mây. Khác với các cơ sở dữ liệu truyền thống sử dụng các truy vấn HTTP, Firebase sử dụng WebSockets để đồng bộ hóa dữ liệu giữa tất cả các thiết bị khách (clients) trong thời gian thực.

Dữ liệu trong Firebase được lưu trữ dưới dạng một cây JSON khổng lồ. Khi có bất kỳ thay đổi nào xảy ra tại một node dữ liệu, mọi thiết bị đang kết nối tới node đó sẽ nhận được cập nhật chỉ trong vài mili giây.

2. Tại sao nên chọn Firebase cho dự án Flutter?

Flutter và Firebase đều là "con cưng" của Google, do đó sự tương thích giữa chúng gần như là hoàn hảo. Dưới đây là những lý do bạn nên sử dụng cặp bài trùng này:

• Tốc độ phát triển: Bạn không cần phải xây dựng Backend phức tạp. Firebase cung cấp sẵn mọi thứ.
• Khả năng ngoại tuyến: Ứng dụng vẫn hoạt động khi mất mạng và tự động đồng bộ khi có kết nối trở lại.
• Miễn phí bắt đầu: Gói Spark của Firebase rất hào phóng cho các dự án nhỏ và cá nhân.

3. Các bước chuẩn bị và cài đặt

Để bắt đầu, bạn cần thực hiện các bước cấu hình cơ bản sau:

Bước 1: Tạo dự án trên Firebase Console

Truy cập Firebase Console, tạo một dự án mới và thêm ứng dụng Android/iOS của bạn vào.

Bước 2: Thêm thư viện vào Flutter

Mở file pubspec.yaml và thêm các dependencies cần thiết:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^latest_version
  firebase_database: ^latest_version

Sau đó chạy lệnh flutter pub get để tải thư viện về.

4. Thao tác với dữ liệu (CRUD Operations)

Trong Flutter, để thao tác với Firebase Realtime Database, chúng ta sử dụng class DatabaseReference.

Ghi dữ liệu (Create/Update)

Để lưu một thông tin mới, ví dụ như tên người dùng:

final ref = FirebaseDatabase.instance.ref("users/123");
await ref.set({
  "name": "Thanh Tran",
  "email": "thanhtran@example.com",
  "age": 25
});

Đọc dữ liệu một lần (Read)

Nếu bạn chỉ muốn lấy dữ liệu một lần duy nhất mà không cần lắng nghe thay đổi:

final snapshot = await ref.child('name').get();
if (snapshot.exists) {
    print(snapshot.value);
}

5. Lắng nghe dữ liệu thời gian thực với StreamBuilder

Đây là phần quan trọng nhất giúp ứng dụng Flutter của bạn trở nên "sống động". StreamBuilder sẽ tự động xây dựng lại giao diện mỗi khi dữ liệu trên Firebase thay đổi.

StreamBuilder(
  stream: FirebaseDatabase.instance.ref("messages").onValue,
  builder: (context, AsyncSnapshot<DatabaseEvent> snapshot) {
    if (snapshot.hasData && !snapshot.hasError) {
      final data = snapshot.data!.snapshot.value as Map?;
      if (data == null) return Text("Không có dữ liệu");
      
      return ListView(
        children: data.values.map((v) => ListTile(title: Text(v['text']))).toList(),
      );
    }
    return CircularProgressIndicator();
  },
)

Mẹo nhỏ: Luôn kiểm tra snapshot.hasData để tránh lỗi hiển thị khi dữ liệu đang được tải hoặc bị trống.

6. Một số lưu ý về bảo mật và tối ưu chi phí

Firebase Realtime Database tính phí dựa trên lưu lượng băng thông và dung lượng lưu trữ. Để tránh những hóa đơn bất ngờ, bạn cần lưu ý:

• Quy tắc bảo mật (Security Rules): Đừng bao giờ để quy tắc ở chế độ .read: true, .write: true cho mọi người. Hãy thiết lập để chỉ người dùng đã đăng nhập mới có quyền truy cập.
• Cấu trúc dữ liệu phẳng: Tránh lồng các object quá sâu. Nếu bạn tải một node cha, Firebase sẽ tải về toàn bộ các node con bên trong nó, gây lãng phí băng thông.
• Sử dụng Index: Thiết lập index cho các trường thường xuyên dùng để tìm kiếm (query) để tăng hiệu suất.

7. Kết luận

Việc kết hợp Firebase Realtime Database với Flutter mở ra khả năng sáng tạo không giới hạn cho các lập trình viên. Từ những ứng dụng đơn giản đến những hệ thống phức tạp, khả năng đồng bộ dữ liệu tức thời sẽ mang lại trải nghiệm người dùng tuyệt vời nhất.

Hy vọng bài viết này đã giúp bạn có cái nhìn tổng quan và bắt đầu những dòng code đầu tiên với Firebase. Đừng quên theo dõi blog để cập nhật thêm các kiến thức hữu ích về lập trình di động nhé!

---

Biên soạn: Thanh Tran
Nguồn tham khảo: Firebase Documentation & Flutter Community.

Read More

Ngôn ngữ lập trình Dart [Phụ lục: Dart] [ Tự học Flutter]

Ngôn ngữ lập trình Dart.

Nếu bạn đã từng học qua C++, Java hay C# ở trường, các bạn sẽ thấy Dart cực kỳ gần gũi và rất dễ học. 

1. Tổng quan về ngôn ngữ Dart

Dart là một ngôn ngữ lập trình mã nguồn mở do chính Google phát triển và ra mắt lần đầu vào năm 2011. Mặc dù ban đầu được định hướng để thay thế JavaScript trên nền tảng web, nhưng ngày nay Dart nổi tiếng nhất với vai trò là "linh hồn" của framework Flutter, cho phép lập trình viên phát triển ứng dụng di động, web và desktop từ một nguồn code duy nhất.

Những điểm "ăn tiền" của Dart:

• Vừa biên dịch JIT vừa AOT: Trong lúc code, Dart dùng cơ chế JIT (Just-In-Time) để biên dịch cực nhanh, hỗ trợ tính năng Hot Reload hiển thị thay đổi ngay lập tức. Khi phát hành app, Dart dùng AOT (Ahead-Of-Time) để biên dịch code ra thẳng mã máy (ARM hoặc x64), giúp ứng dụng chạy mượt mà như app native.
• An toàn Null (Sound Null Safety): Dart áp dụng cơ chế ép buộc biến không được phép chứa giá trị null trừ khi các em cho phép. Điều này giúp loại bỏ hoàn toàn nỗi ám ảnh lỗi "NullPointerException" khi app đang chạy.

2. Cú pháp và các thành phần cơ bản

Hàm main()

Cũng giống như C hay Java, mọi chương trình Dart đều bắt buộc phải bắt đầu từ hàm main(). Đây là cánh cửa đầu tiên để ứng dụng khởi chạy.

Khai báo biến (Variables)

Dart là ngôn ngữ có kiểu tĩnh, nhưng lại rất thông minh trong việc tự suy luận kiểu dữ liệu. Các bạn có thể chỉ định rõ kiểu dữ liệu như int (số nguyên), double (số thực), String (chuỗi), bool (đúng/sai) hoặc dùng từ khóa var để Dart tự đoán kiểu. Lưu ý: Mọi câu lệnh trong Dart đều phải kết thúc bằng dấu chấm phẩy ;.

Hàm (Functions)

Trong Dart, các em có thể viết hàm truyền thống hoặc viết hàm cực kỳ ngắn gọn bằng cú pháp mũi tên => nếu hàm đó chỉ có một dòng code trả về giá trị.

Ví dụ minh họa cơ bản:

// 1. Hàm tính tổng hai số (dùng cú pháp mũi tên ngắn gọn)
int tinhTong(int a, int b) => a + b;

// 2. Hàm main khởi chạy chương trình
void main() {
  // Khai báo biến có định kiểu rõ ràng
  String loiChao = "Chào mừng các em sinh viên IT!";
  int namHoc = 2024;

  // Dùng 'var', Dart tự hiểu đây là số thập phân (double)
  var diemTrungBinh = 8.5;

  // In ra màn hình console
  print(loiChao);
  print("Năm học: $namHoc"); // Chèn biến vào chuỗi bằng dấu $

  // Gọi hàm
  int ketQua = tinhTong(5, 7);
  print("Kết quả 5 + 7 = $ketQua");
}

3. Lập trình Hướng đối tượng (OOP) với Dart

Dart là một ngôn ngữ thuần hướng đối tượng (Object-Oriented Programming). Điều này có nghĩa là mọi thứ trong Dart (thậm chí cả số nguyên, hay chuỗi) đều là các đối tượng (Objects). Dart hỗ trợ đầy đủ các tính chất của OOP như: Lớp (Class), Kế thừa (Inheritance), và Đa hình (Polymorphism).

Dưới đây là một ví dụ minh họa cách tạo Class và Kế thừa trong Dart:

// Tạo một Class cơ sở (Class cha)
class Nguoi {
  // Các thuộc tính
  String ten;
  int tuoi;

  // Hàm khởi tạo (Constructor) viết cực kỳ ngắn gọn của Dart
  Nguoi(this.ten, this.tuoi);

  // Phương thức (Method)
  void gioiThieu() {
    print("Xin chào, tôi là $ten, $tuoi tuổi.");
  }
}

// Lớp SinhVien kế thừa từ lớp Nguoi (dùng từ khóa extends)
class SinhVien extends Nguoi {
  String maSV;

  // Kế thừa Constructor của lớp cha dùng từ khóa super
  SinhVien(String ten, int tuoi, this.maSV) : super(ten, tuoi);

  // Ghi đè (Override) phương thức của lớp cha để thể hiện tính Đa hình
  @override
  void gioiThieu() {
    print("Xin chào, em là sinh viên $ten (Mã SV: $maSV). Em $tuoi tuổi.");
  }
}

void main() {
  // Tạo đối tượng từ Class
  Nguoi giangVien = Nguoi("Thầy Hùng", 35);
  giangVien.gioiThieu(); // In ra: Xin chào, tôi là Thầy Hùng, 35 tuổi.

  SinhVien sinhVien = SinhVien("An", 20, "SV12345");
  sinhVien.gioiThieu(); // In ra: Xin chào, em là sinh viên An (Mã SV: SV12345). Em 20 tuổi.
}

Giải thích nhanh: Trong ví dụ trên, class SinhVien đã kế thừa (extends) lại các thuộc tính ten và tuoi từ class Nguoi. Dart cung cấp một cách viết hàm khởi tạo Constructor rất ưu việt là gán thẳng tham số vào thuộc tính this.ten giúp tiết kiệm rất nhiều dòng code.

📝 Bài tập củng cố

Để biến kiến thức vừa học thành kỹ năng của mình, các bạn hãy mở DartPad - công cụ chạy code Dart trực tuyến ngay trên trình duyệt, và thực hiện bài tập nhỏ sau:

Yêu cầu:

1. Tạo một class có tên là SanPham (Sản phẩm).
2. Class này có 3 thuộc tính: tenSP (String), donGia (double), và soLuong (int).
3. Tạo một hàm khởi tạo (Constructor) để gán giá trị cho 3 thuộc tính này.
4. Viết một phương thức tinhTongTien() trả về kết quả là donGia * soLuong.
5. Viết một phương thức inThongTin() để in ra màn hình: "Sản phẩm: [tenSP] - Tổng tiền: [Kết quả của hàm tinhTongTien]".
6. Trong hàm main(), hãy tạo 2 đối tượng sản phẩm bất kỳ (ví dụ: Điện thoại, Laptop) và gọi hàm inThongTin() của từng đối tượng.

Read More

Tổng quan về Flutter [Phụ lục Flutter] [Tự học Flutter]

1. Tổng quan về Flutter

Flutter là gì? Flutter là một bộ công cụ giao diện người dùng (UI framework) mã nguồn mở do Google tạo ra và ra mắt phiên bản ổn định vào năm 2018. Đặc điểm "ăn tiền" nhất của Flutter là khả năng phát triển ứng dụng đa nền tảng chỉ với một mã nguồn (single codebase). Điều này có nghĩa là các bạn chỉ cần viết code một lần bằng ngôn ngữ Dart, ứng dụng có thể biên dịch và chạy mượt mà trên cả Android, iOS, Web, Windows, macOS và Linux.

Hiệu năng ấn tượng: Khác với nhiều framework đa nền tảng cũ, code Flutter được biên dịch trực tiếp ra mã máy (ARM hoặc Intel) và không cần thông qua các "cầu nối" (bridge) làm chậm ứng dụng. Nhờ đó, ứng dụng Flutter mang lại hiệu năng cao và cảm giác mượt mà y hệt như ứng dụng thuần (native app). Rất nhiều "ông lớn" công nghệ đang sử dụng Flutter như chính Google (Google Pay), Alibaba, BMW, Toyota.

2. Cấu trúc của Flutter

Để hiểu tại sao Flutter lại mạnh mẽ đến vậy, các bạn cần nắm được cấu trúc phân tầng (layered architecture) của nó. Cấu trúc này được chia làm 3 lớp chính từ dưới lên trên:

• Lớp Embedder (Nền tảng): Đây là lớp thấp nhất, giao tiếp trực tiếp với hệ điều hành (Android, iOS, Web...). Nó quản lý các tác vụ mức hệ thống như luồng (thread), hiển thị đồ họa, và đầu vào từ người dùng.
• Lớp Engine (Động cơ C/C++): Là "trái tim" của Flutter. Lớp này hỗ trợ các nguyên thủy cốt lõi để vẽ đồ họa (sử dụng engine Skia hoặc Impeller), xử lý văn bản, mạng và biên dịch mã Dart. Thay vì dùng các thành phần giao diện có sẵn của điện thoại, Flutter tự vẽ từng pixel lên màn hình bằng engine này, giúp giao diện nhất quán trên mọi thiết bị.
• Lớp Framework (Dart): Đây là lớp trên cùng và là nơi các bạn sẽ tương tác 100% thời gian khi code. Lớp này cung cấp các nền tảng (Foundation), Animation, Painting và đặc biệt là hệ thống Widgets.

Quy tắc vàng trong Flutter: "Mọi thứ đều là Widget" Trong Flutter, UI được xây dựng theo hướng khai báo (declarative). Các bạn sẽ thiết kế giao diện bằng cách lắp ráp các "khối lego" gọi là Widget. Một nút bấm, một đoạn văn bản, một căn lề, hay thậm chí toàn bộ ứng dụng đều là các Widget lồng vào nhau tạo thành một Cây Widget (Widget Tree).

3. Các bước tạo ứng dụng với Flutter

Bây giờ, chúng ta hãy xắn tay áo lên và tạo ứng dụng đầu tiên bằng Android Studio nhé!

• Bước 1: Khởi tạo Project
  • Mở Android Studio, chọn New Flutter Project (hoặc File -> New -> New Flutter Project).
  • Ở phần Flutter SDK path, trỏ đường dẫn đến thư mục các bạn đã giải nén Flutter (Ví dụ: C:\src\flutter).
  • Đặt tên project ở ô Project name (lưu ý viết chữ thường và dùng dấu gạch dưới, VD: hello_flutter), sau đó nhấn Create/Finish.
• Bước 2: Hiểu cấu trúc thư mục
  • Khi project được tạo ra, các bạn sẽ thấy rất nhiều thư mục. Hãy ghi nhớ: 90% thời gian các bạn sẽ chỉ làm việc trong thư mục lib/.
  • Tìm và mở file lib/main.dart. Đây là điểm bắt đầu (entry point) của mọi ứng dụng Flutter.
• Bước 3: Viết đoạn code đầu tiên
  • Các bạn hãy xóa toàn bộ code mẫu có sẵn trong file main.dart và gõ lại đoạn code sau:

import 'package:flutter/material.dart';

// Hàm main là nơi ứng dụng bắt đầu chạy
void main() {
  runApp(const MyApp());
}

// Widget cao nhất của ứng dụng
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            'Hello World - Chào lớp mình nhé!',
            style: TextStyle(fontSize: 24, color: Colors.blue),
          ),
        ),
      ),
    );
  }
}

• Bước 4: Chạy ứng dụng
  • Các bạn chọn một máy ảo Android (Emulator) đã cài đặt sẵn trên thanh công cụ, hoặc chạy trực tiếp trên trình duyệt Chrome (Web).
  • Nhấn nút Run (biểu tượng hình tam giác màu xanh).
  • Đợi một lát để phần mềm biên dịch.

📝 Bài tập củng cố

Để đảm bảo các bạn đã nắm bắt được nội dung bài học, hãy hoàn thành bài tập nhỏ sau đây:

Yêu cầu:

1. Tạo một Flutter project mới với tên bai_tap_1.
2. Chỉnh sửa file lib/main.dart sao cho màn hình không hiển thị "Hello World" nữa, mà thay vào đó hiển thị nội dung: "Xin chào, tôi tên là [Tên đầy đủ của bạn] - Mã SV: [Mã sinh viên của bạn]".
3. Chỉnh sửa thuộc tính style của Text để đổi màu chữ thành màu đỏ (Colors.red) và cỡ chữ (fontSize) là 30.
4. Chạy ứng dụng trên máy ảo hoặc Chrome, chụp màn hình kết quả và nộp lại lên hệ thống.

Read More

[Bài 1] Giới thiệu về Widget trong Flutter [Tự học Flutter]

Trong bài học ngày hôm nay, chúng ta sẽ tìm hiểu về một khái niệm mang tính "linh hồn" và cốt lõi nhất khi lập trình giao diện bằng Flutter, đó chính là Widget.

1. Widget là gì?

Trong thế giới của Flutter, có một quy tắc tối thượng: "Mọi thứ đều là Widget".

Về mặt kỹ thuật, một Widget là một phần khai báo bất biến (immutable) và là khối xây dựng cơ bản (building block) để tạo nên Giao diện người dùng (UI) của ứng dụng Flutter. Bạn có thể hình dung Widget giống như những viên gạch Lego. Flutter khuyến khích kỹ thuật "lắp ráp" (composition), kết hợp nhiều Widget nhỏ, đơn chức năng lại với nhau để tạo thành một màn hình UI hoàn chỉnh và phức tạp.

Các Widget sử dụng phương thức build() để khai báo giao diện của chúng. Về cơ bản, hàm này thực hiện việc chuyển đổi trạng thái của ứng dụng thành giao diện hiển thị trên màn hình theo công thức: UI = f(state). Nhờ tốc độ khởi tạo và hủy đối tượng cực nhanh của Dart, Flutter có thể gọi hàm build() này bao nhiêu lần tùy thích để cập nhật màn hình mà không làm giảm hiệu năng.

2. Hai phân loại Widget cốt lõi

Flutter phân loại các Widget vào hai nhóm chính dựa trên khả năng thay đổi trạng thái:

• StatelessWidget (Widget không trạng thái): Là những Widget không có trạng thái biến đổi (mutable state), có nghĩa là tất cả các thuộc tính của chúng không bao giờ thay đổi theo thời gian. Chẳng hạn như một đoạn văn bản (Text) tĩnh hay một biểu tượng (Icon) cố định.
• StatefulWidget (Widget có trạng thái): Là những Widget sở hữu các đặc tính có thể thay đổi dựa trên các thao tác tương tác của người dùng hoặc các yếu tố dữ liệu khác. Đi kèm với Widget này là một đối tượng State. Khi bạn gọi hàm setState(), Flutter sẽ tự động gọi lại hàm build() của State đó để cập nhật UI.

3. Cấu trúc Cây Widget (Widget Tree)

Khi các Widget lồng vào nhau, chúng sẽ tạo thành một hệ thống phân cấp gọi là Cây Widget (Widget Tree). Thông thường, gốc của cây (màn hình ngoài cùng) sẽ là một MaterialApp (dành cho giao diện chuẩn Google) hoặc CupertinoApp (dành cho giao diện chuẩn Apple).

Trong Flutter, việc xây dựng giao diện người dùng dựa trên nguyên tắc lắp ráp (composition), trong đó bạn kết hợp các Widget nhỏ, mang đơn chức năng lại với nhau để tạo thành một hệ thống phân cấp phức tạp (Cây Widget).

Dưới đây là các thành phần chính và cách để xây dựng một Widget:

4. Các thành phần chính của một Widget

Dù là Widget tự định nghĩa hay có sẵn, một Widget thường cấu thành từ các yếu tố sau:

1. Lớp (Class) kế thừa: Để tạo một Widget, lớp của bạn bắt buộc phải kế thừa từ StatelessWidget (dành cho giao diện không có trạng thái thay đổi) hoặc StatefulWidget (dành cho giao diện có dữ liệu thay đổi theo thời gian).
2. Phương thức build(): Đây là nơi bạn khai báo giao diện của Widget. Hàm này nhận vào một tham số BuildContext và luôn phải trả về một cây Widget (Widget tree) mới. Về bản chất, hàm build() thực hiện việc chuyển đổi trạng thái thành giao diện người dùng theo công thức UI = f(state).
3. Đối tượng State (Chỉ dành cho StatefulWidget): Nếu bạn dùng StatefulWidget, thành phần giao diện sẽ đi kèm với một lớp State riêng biệt chứa dữ liệu có thể thay đổi (mutable state). Lớp này cung cấp hàm setState() dùng để thông báo cho Flutter biết dữ liệu đã thay đổi, từ đó gọi lại hàm build() để cập nhật lại màn hình.

5. Cách xây dựng một Widget

Để xây dựng một Widget, bạn thực hiện theo các bước sau:

• Bước 1: Khai báo một class mới và cho kế thừa từ StatelessWidget hoặc StatefulWidget.
• Bước 2: Định nghĩa hàm khởi tạo (constructor) để nhận các tham số truyền vào từ bên ngoài (nếu có).
• Bước 3: Ghi đè (override) phương thức build(BuildContext context).
• Bước 4: Lắp ráp các Widget cơ bản có sẵn của Flutter (như Container, Text, Row, Column, Center,...) và trả về (return) chúng bên trong hàm build() để tạo hình cấu trúc giao diện mong muốn,.

Ví dụ minh họa cách xây dựng một StatelessWidget cơ bản:

import 'package:flutter/material.dart';

// Bước 1: Kế thừa StatelessWidget
class MyApp extends StatelessWidget {

  // Bước 2: Hàm khởi tạo
  const MyApp({Key? key}) : super(key: key);

  // Bước 3: Ghi đè phương thức build()
  @override
  Widget build(BuildContext context) {

    // Bước 4: Trả về cấu trúc lồng ghép các Widget có sẵn
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            'Hello World',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Nhờ tốc độ khởi tạo và hủy đối tượng rất nhanh của Dart, Flutter có thể gọi hàm build() này liên tục để cập nhật lại giao diện màn hình mà không làm giảm hiệu năng của ứng dụng. Bạn chỉ việc mô tả giao diện sẽ trông như thế nào ở một trạng thái cụ thể, và Flutter sẽ tự động lo phần hiển thị.

6. Ví dụ minh họa

Dưới đây là một đoạn code ví dụ kinh điển kết hợp nhiều Widget cơ bản để tạo ra một màn hình ứng dụng đơn giản:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My Home Page'),
        ),
        body: Center(
          child: Builder(
            builder: (BuildContext context) {
              return Column(
                children: [
                  const Text('Hello World'),
                  const SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: () {
                      print('Click!');
                    },
                    child: const Text('A button'),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

Giải thích ví dụ:

• Trong ví dụ trên, class MyApp của chúng ta là một StatelessWidget vì giao diện khung này không cần thay đổi dữ liệu động, và chúng ta ghi đè phương thức build() để khai báo UI,.
• Cây Widget được xây dựng thông qua việc lồng ghép (nesting):
  • MaterialApp: Khung ứng dụng cao nhất.
  • Scaffold: Cung cấp cấu trúc nền tảng cho trang (có app bar, body).
  • AppBar: Thanh tiêu đề trên cùng với một Text.
  • Center: Một Widget bố cục giúp căn giữa các thành phần con.
  • Column: Một Widget bố cục để xếp các Widget con (children) theo chiều dọc từ trên xuống dưới. Bên trong nó chứa một dòng chữ Text, một khoảng trống SizedBox và một nút bấm ElevatedButton.

 sơ đồ cây Widget (Widget Tree) chi tiết để bạn dễ dàng hình dung cấu trúc code:

Sơ đồ cây Widget chi tiết

• MaterialApp (Gốc của ứng dụng)

  • Scaffold (Khung sườn màn hình)

    • AppBar (Thanh tiêu đề)

      • leading: Icon (Menu)

      • title: Text ("Máy tính lãi suất")

      • actions: [Icon (More)]

    • Padding (Tạo khoảng cách lề)

      • Column (Sắp xếp theo chiều dọc)

        • Row (Hàng 1: Số tiền)

          • Expanded (Label) $\rightarrow$ Text ("Số tiền")

          • Expanded (Input) $\rightarrow$ TextField

        • SizedBox (Khoảng cách)

        • Row (Hàng 2: Lãi suất)

          • Expanded (Label) $\rightarrow$ Text ("Lãi hàng năm")

          • Expanded (Input) $\rightarrow$ TextField

        • SizedBox (Khoảng cách)

        • Row (Hàng 3: Kết quả)

          • Text ("Số năm để tiền tăng gấp đôi")

          • Text (Biến _yearsToDouble)

        • Spacer (Đẩy nút bấm xuống dưới cùng)

        • Align (Căn lề phải)

          • ElevatedButton (Nút tính toán)

            • Text ("Tính toán")

Chỉ với việc xếp chồng các Widget nhỏ này vào nhau, bạn đã tạo ra được một màn hình ứng dụng đầy đủ chức năng!

Tóm lại: Khi học Flutter, việc của các bạn phần lớn là học cách làm chủ các loại Widget có sẵn và cách tự định nghĩa các Widget mới để "vẽ" lên giao diện mong muốn. Chúc các bạn code vui vẻ!

Read More

Hướng dẫn tự học lập trình Flutter với Dart trên Android Sutudio

1. Tổng quan về Flutter

Flutter là một bộ công cụ giao diện người dùng (UI framework) mã nguồn mở do Google tạo ra và ra mắt vào năm 2017. Điểm "ăn tiền" lớn nhất của Flutter là khả năng phát triển ứng dụng đa nền tảng (Cross-platform) chỉ với một mã nguồn (single codebase).

Thay vì phải học Java/Kotlin để viết app cho Android, rồi lại phải học Swift/Objective-C để viết app cho iOS, bạn chỉ cần học Flutter là có thể build app chạy mượt mà trên cả 2 hệ điều hành này,. Hiện nay, Flutter còn hỗ trợ build ra cả Web và các ứng dụng Desktop (Windows, macOS, Linux).

Flutter không sử dụng các thành phần giao diện mặc định của hệ điều hành mà tự vẽ lại mọi pixel trên màn hình bằng engine đồ họa riêng (Skia/Impeller), giúp ứng dụng có hiệu năng cực kỳ ấn tượng (có thể đạt 60-120fps) và giao diện nhất quán trên mọi thiết bị,. Rất nhiều ông lớn đang sử dụng Flutter như: chính Google (Google Pay), Alibaba, BMW, Toyota, v.v.,.

Hướng dẫn tự học lập trình Flutter với Dart trên Android Sutudio (nguồn NotebookLM)

2. Giới thiệu ngôn ngữ lập trình Dart

Để học Flutter, bạn bắt buộc phải làm quen với ngôn ngữ lập trình Dart. Đây cũng là một ngôn ngữ do Google phát triển, được tối ưu hóa riêng cho việc xây dựng giao diện người dùng.

Nếu bạn đã từng học C++, C# hay Java ở trường đại học, bạn sẽ thấy Dart cực kỳ "quen mặt". Dart là ngôn ngữ kiểu tĩnh (statically typed), hỗ trợ lập trình hướng đối tượng (OOP) hoàn chỉnh với các khái niệm quen thuộc như Class, Interface, Mixin, Kế thừa....

Một số điểm thú vị của Dart khi kết hợp với Flutter:

• Hot Reload: Dart hỗ trợ biên dịch Just-In-Time (JIT) trong quá trình phát triển. Điều này cho phép tính năng "Hot Reload" hoạt động – bạn vừa sửa code, lưu lại là giao diện app trên điện thoại cập nhật ngay lập tức trong chưa tới 1 giây mà không cần khởi động lại app,.
• Null Safety: Dart áp dụng cơ chế an toàn null (Sound Null Safety), giúp bạn tránh được lỗi "NullPointerException" khét tiếng, làm cho code an toàn và ít lỗi vặt hơn,.

3. Các bước cài đặt Flutter trên Android Studio

Để lập trình Flutter, bạn cần cài đặt Flutter SDK và một IDE (môi trường lập trình). Android Studio hoặc Visual Studio Code là 2 lựa chọn phổ biến nhất,. Ở đây, chúng ta sẽ dùng Android Studio vì nó tích hợp sẵn các công cụ máy ảo rất tiện lợi.

Bước 1: Tải và cài đặt Flutter SDK

• Truy cập link tải chính thức: Tải Flutter SDK.
• Tải file .zip dành cho Windows (hoặc macOS/Linux tùy máy bạn).
• Giải nén thư mục (Lưu ý: Không nên để trong C:\Program Files, hãy để ở nơi dễ truy cập như C:\src\flutter).
• Cấu hình biến môi trường (PATH): Mở Environment Variables trên Windows, tìm biến Path, thêm đường dẫn C:\src\flutter\bin vào để máy tính nhận diện được lệnh flutter.

Bước 2: Tải và cài đặt Android Studio

• Truy cập link tải: Tải Android Studio.
• Cài đặt bình thường (cứ bấm Next và chọn Standard Installation). Đảm bảo Android SDK và Android Emulator được tick chọn để cài đặt.

Bước 3: Cài đặt Plugin Flutter trong Android Studio

• Mở Android Studio lên.
• Vào mục Plugins (hoặc File -> Settings -> Plugins),.
• Tìm kiếm từ khóa Flutter và nhấn Install. Nó sẽ yêu cầu bạn cài thêm plugin Dart, bạn cứ chọn đồng ý.
• Khởi động lại (Restart) Android Studio.

Bước 4: Kiểm tra cài đặt

• Mở Command Prompt (CMD) hoặc Terminal, gõ lệnh: flutter doctor,.
• Công cụ này sẽ kiểm tra xem bạn còn thiếu gì không. Nếu thấy tất cả đều có dấu tích xanh [✓], xin chúc mừng, bạn đã cài đặt thành công!. (Nếu có lỗi yêu cầu chấp nhận Android License, chỉ cần gõ flutter doctor --android-licenses và bấm 'y' cho đến hết,).

4. Các bước tạo và chạy 1 ứng dụng đầu tiên

Bây giờ chúng ta sẽ làm ứng dụng "Hello World" huyền thoại nhé:

Bước 1: Tạo project

• Mở Android Studio, chọn New Flutter Project,.
• Đảm bảo đường dẫn "Flutter SDK path" trỏ đúng vào thư mục Flutter bạn đã giải nén (VD: C:\src\flutter).
• Đặt tên project (lưu ý viết chữ thường và dùng dấu gạch dưới, ví dụ: hello_flutter), sau đó nhấn Finish,.

Bước 2: Xóa code mẫu và viết code mới Flutter sẽ tự sinh ra một thư mục project. Hãy nhớ nguyên tắc: 90% thời gian code của bạn sẽ nằm trong thư mục lib/. Mở file lib/main.dart, xóa hết toàn bộ code có sẵn đi và chép đoạn code cực kỳ đơn giản sau đây vào:

import 'package:flutter/material.dart';

// Hàm main là nơi chương trình bắt đầu chạy
void main() {
  runApp(const MyApp());
}

// Tạo một Widget cơ bản
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            'Hello World - Chào sinh viên IT!',
            style: TextStyle(fontSize: 24, color: Colors.blue),
          ),
        ),
      ),
    );
  }
}

Giải thích code nhanh: Mọi thứ trong Flutter đều là Widget (thành phần giao diện). MaterialApp là khung chứa app, Scaffold cung cấp cấu trúc màn hình cơ bản, Center giúp căn giữa nội dung, và Text dùng để hiển thị chữ.

Bước 3: Chạy ứng dụng

• Bạn có thể cắm điện thoại thật vào máy tính (nhớ bật USB Debugging) hoặc chọn một máy ảo (Emulator) ngay trên thanh công cụ của Android Studio hoặc chạy trực tiếp trên trình duyệt Chrome,.
• Nhấn nút Run (biểu tượng hình tam giác màu xanh),.
• Đợi một lát để code biên dịch, và Bùm! Dòng chữ "Hello World" đã hiện lên màn hình điện thoại của bạn.

5. Một số tài liệu tham khảo hữu ích

Để tự học Flutter ở mức cơ bản đến nâng cao, bạn có thể lưu lại các trang web "gối đầu giường" sau:

1. Trang chủ Flutter (Tiếng Anh): Nơi chứa mọi tài liệu chính thống, chính xác nhất từ Google.
   • Link: https://docs.flutter.dev/
2. Trang chủ ngôn ngữ Dart (Tiếng Anh): Giúp bạn tra cứu cú pháp và cách hoạt động của Dart.
   • Link: https://dart.dev/
3. DartPad (Lập trình trực tuyến): Nếu máy yếu chưa kịp cài đặt IDE, bạn có thể lên đây gõ code Dart/Flutter và xem kết quả ngay trên trình duyệt web.
   • Link: https://dartpad.dev/,
4. Học qua series bài viết tiếng Việt (Viblo / Cafedev / 200Lab): Rất nhiều lập trình viên Việt Nam chia sẻ các bài hướng dẫn chi tiết từ biến, hàm cho đến cách chia bố cục màn hình.
   • Ví dụ chuỗi bài học Flutter trên Viblo: Làm quen với Dart cơ bản
5. Kho mã nguồn mở (Pub.dev): Khi bạn cần dùng thư viện bên ngoài (như gọi API, lưu dữ liệu), hãy lên đây tìm kiếm.
   • Link: https://pub.dev/

Chúc các bạn sinh viên IT có những giờ phút "code dạo" thật thú vị và sớm hoàn thành được những chiếc app xịn xò của riêng mình nhé!

Nếu bạn muốn có nguồn thu tự động, hoàn toàn miễn phí và vô cùng đơn giản thì có thể tham khảo app kiếm tiền Honeygain và EarnApp tại đây.

Nguồn NotebookLM

Read More