4 posts tagged with "dart"

Lập trình Flutter đa nền tảng Level 3 (03.2025) - Buổi 1​

Giới thiệu​

Buổi học đầu tiên của khóa học Lập trình Flutter đa nền tảng Level 3 tập trung vào việc xây dựng kiến trúc ứng dụng Flutter kết hợp với backend và thực hành gọi API. Đây là bước đầu tiên để các bạn hiểu rõ hơn về cách xây dựng một ứng dụng hoàn chỉnh từ frontend đến backend.

Nội dung chính​

1. Tổng quan về kiến trúc Flutter kết hợp với backend​

• Frontend (Flutter App): Giao diện người dùng (UI), quản lý trạng thái (State Management), và xử lý dữ liệu (Repository).
• Backend: API, cơ sở dữ liệu (Database), và các dịch vụ hỗ trợ (Services).
• Luồng dữ liệu: Cách dữ liệu được truyền từ backend lên frontend và ngược lại.

2. Các kỹ năng cần thiết để lập trình Flutter Level 3​

• Quản lý trạng thái nâng cao: Sử dụng các thư viện như Provider, Bloc, Riverpod.
• Làm việc với API: Gọi API, xử lý dữ liệu JSON, và tích hợp với backend.
• Xây dựng kiến trúc ứng dụng: Tạo sơ đồ kiến trúc rõ ràng để dễ dàng bảo trì và mở rộng.
• Triển khai ứng dụng: Đóng gói và xuất bản ứng dụng lên Google Play Store và Apple App Store.

3. Thực hành gọi API​

• Demo API: Sử dụng API mẫu để hiển thị danh sách sản phẩm trên ứng dụng Flutter.
• Các bước thực hiện:
  1. Tạo project Flutter.
  2. Thêm thư viện hỗ trợ gọi API (ví dụ: http, dio).
  3. Xây dựng model để định nghĩa dữ liệu.
  4. Gọi API và hiển thị dữ liệu lên giao diện.

Bài tập thực hành​

• Yêu cầu: Xây dựng một ứng dụng Flutter đơn giản để hiển thị danh sách sản phẩm từ API.
• Các bước thực hiện:
  1. Vẽ sơ đồ kiến trúc ứng dụng.
  2. Tạo project Flutter và cấu hình các thư viện cần thiết.
  3. Gọi API và hiển thị dữ liệu lên giao diện.

Kết luận​

Buổi học đầu tiên đã giúp các bạn nắm được tổng quan về kiến trúc ứng dụng Flutter kết hợp với backend và cách gọi API để hiển thị dữ liệu. Đây là nền tảng quan trọng để các bạn tiếp tục phát triển các kỹ năng lập trình Flutter ở mức độ nâng cao.

👉 Xem video hướng dẫn chi tiết

Flutter là một framework phát triển ứng dụng di động đa nền tảng của Google. Bài viết này sẽ giúp bạn hiểu rõ về cấu trúc thư mục của một dự án Flutter và cách tạo ứng dụng Hello World đầu tiên.

1. Cấu trúc thư mục dự án Flutter​

Khi tạo một dự án Flutter mới, bạn sẽ thấy cấu trúc thư mục như sau:

my_flutter_app/
├── android/          # Mã nguồn Android
├── ios/             # Mã nguồn iOS
├── lib/             # Mã nguồn Dart chính
├── test/            # Unit tests và widget tests
├── pubspec.yaml     # File cấu hình dự án và dependencies
└── README.md        # Tài liệu dự án

Giải thích các thư mục chính:​

1. lib/

   • Chứa mã nguồn Dart chính của ứng dụng
   • File main.dart là điểm khởi đầu của ứng dụng
   • Thường được tổ chức theo mô hình:

     lib/
     ├── main.dart
     ├── screens/      # Các màn hình
     ├── widgets/      # Các widget tái sử dụng
     ├── models/       # Các model dữ liệu
     ├── services/     # Các service (API, database)
     └── utils/        # Các tiện ích
     

2. android/ và ios/

   • Chứa mã nguồn native cho từng nền tảng
   • Thường không cần chỉnh sửa trừ khi cần tích hợp native code

3. test/

   • Chứa các file test
   • Bao gồm unit tests và widget tests

4. pubspec.yaml

   • File cấu hình quan trọng nhất
   • Định nghĩa:
     • Tên và phiên bản ứng dụng
     • Dependencies
     • Assets (hình ảnh, fonts)
     • Cấu hình build

2. Tạo ứng dụng Hello World​

Bước 1: Tạo dự án mới​

flutter create hello_world
cd hello_world

Bước 2: Cấu trúc thư mục​

lib/
├── main.dart
├── screens/
│   └── home_screen.dart
└── widgets/
    └── greeting_widget.dart

Bước 3: Tạo các file​

main.dart

import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

screens/home_screen.dart

import 'package:flutter/material.dart';
import '../widgets/greeting_widget.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hello World'),
      ),
      body: const Center(
        child: GreetingWidget(),
      ),
    );
  }
}

widgets/greeting_widget.dart

import 'package:flutter/material.dart';

class GreetingWidget extends StatelessWidget {
  const GreetingWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          'Hello, World!',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(height: 16),
        Text(
          'Welcome to Flutter',
          style: TextStyle(
            fontSize: 16,
            color: Colors.grey,
          ),
        ),
      ],
    );
  }
}

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

flutter run

3. Giải thích code​

MaterialApp​

• Widget gốc của ứng dụng
• Cung cấp các thành phần cơ bản như theme, navigation
• useMaterial3: true để sử dụng Material Design 3

Scaffold​

• Widget cung cấp cấu trúc cơ bản cho màn hình
• Bao gồm AppBar, body, bottom navigation, drawer

StatelessWidget vs StatefulWidget​

• StatelessWidget: Widget không có state
• StatefulWidget: Widget có state có thể thay đổi

4. Best Practices​

1. Tổ chức code

   • Tách biệt logic và UI
   • Sử dụng các widget có thể tái sử dụng
   • Đặt tên file và class rõ ràng

2. Quản lý state

   • Sử dụng setState cho state đơn giản
   • Sử dụng state management (Provider, Bloc) cho ứng dụng lớn

3. Performance

   • Tránh rebuild không cần thiết
   • Sử dụng const constructor khi có thể
   • Tối ưu hóa hình ảnh và assets

Kết luận​

Hiểu rõ cấu trúc dự án Flutter và cách tổ chức code là bước đầu tiên quan trọng trong việc phát triển ứng dụng Flutter. Với kiến thức này, bạn có thể bắt đầu xây dựng các ứng dụng phức tạp hơn.

Tài liệu tham khảo:

• Flutter Documentation
• Flutter Project Structure
• Material Design

Dart là một ngôn ngữ lập trình hướng đối tượng mạnh mẽ, hỗ trợ đầy đủ các tính năng của OOP. Bài viết này sẽ giúp bạn hiểu rõ về các khái niệm cơ bản của lập trình hướng đối tượng trong Dart.

1. Class và Object​

Định nghĩa Class​

Class là một khuôn mẫu để tạo ra các đối tượng. Trong Dart, chúng ta định nghĩa class như sau:

class Person {
  // Thuộc tính (Properties)
  String name;
  int age;
  
  // Constructor
  Person(this.name, this.age);
  
  // Phương thức (Methods)
  void introduce() {
    print('Xin chào, tôi là $name, $age tuổi.');
  }
}

Tạo và sử dụng Object​

void main() {
  // Tạo đối tượng từ class
  var person = Person('John', 25);
  
  // Gọi phương thức
  person.introduce();
  
  // Truy cập thuộc tính
  print(person.name);  // John
  print(person.age);   // 25
}

2. Tính đóng gói (Encapsulation)​

Dart hỗ trợ tính đóng gói thông qua các access modifier:

class BankAccount {
  // Private field (bắt đầu bằng dấu _)
  double _balance = 0;
  
  // Getter
  double get balance => _balance;
  
  // Setter
  set balance(double value) {
    if (value >= 0) {
      _balance = value;
    }
  }
  
  // Public method
  void deposit(double amount) {
    if (amount > 0) {
      _balance += amount;
    }
  }
  
  // Private method
  void _updateBalance(double amount) {
    _balance = amount;
  }
}

3. Kế thừa (Inheritance)​

Dart hỗ trợ kế thừa đơn thông qua từ khóa extends:

// Class cha
class Animal {
  String name;
  
  Animal(this.name);
  
  void makeSound() {
    print('Some sound');
  }
}

// Class con
class Dog extends Animal {
  Dog(String name) : super(name);
  
  @override
  void makeSound() {
    print('Woof!');
  }
  
  void fetch() {
    print('$name is fetching the ball');
  }
}

4. Đa hình (Polymorphism)​

Dart hỗ trợ đa hình thông qua việc ghi đè phương thức:

class Shape {
  double area() {
    return 0;
  }
}

class Circle extends Shape {
  double radius;
  
  Circle(this.radius);
  
  @override
  double area() {
    return 3.14 * radius * radius;
  }
}

class Rectangle extends Shape {
  double width;
  double height;
  
  Rectangle(this.width, this.height);
  
  @override
  double area() {
    return width * height;
  }
}

5. Interface và Abstract Class​

Abstract Class​

abstract class Vehicle {
  void start();
  void stop();
  
  // Có thể có phương thức có sẵn
  void honk() {
    print('Beep beep!');
  }
}

class Car extends Vehicle {
  @override
  void start() {
    print('Car starting...');
  }
  
  @override
  void stop() {
    print('Car stopping...');
  }
}

Interface​

Trong Dart, mọi class đều là một interface. Chúng ta có thể sử dụng từ khóa implements:

class Flyable {
  void fly() {
    print('Flying...');
  }
}

class Bird implements Flyable {
  @override
  void fly() {
    print('Bird is flying');
  }
}

6. Mixins​

Mixins cho phép tái sử dụng code giữa các class:

mixin Swimming {
  void swim() {
    print('Swimming...');
  }
}

mixin Flying {
  void fly() {
    print('Flying...');
  }
}

class Duck with Swimming, Flying {
  void quack() {
    print('Quack!');
  }
}

7. Ví dụ thực tế​

// Định nghĩa class Product
class Product {
  final String id;
  final String name;
  final double price;
  
  Product(this.id, this.name, this.price);
}

// Định nghĩa class Cart
class Cart {
  final List<Product> _items = [];
  
  void addItem(Product product) {
    _items.add(product);
  }
  
  void removeItem(String productId) {
    _items.removeWhere((item) => item.id == productId);
  }
  
  double get total => _items.fold(0, (sum, item) => sum + item.price);
  
  void displayItems() {
    for (var item in _items) {
      print('${item.name}: \$${item.price}');
    }
    print('Total: \$${total}');
  }
}

// Sử dụng
void main() {
  var cart = Cart();
  
  cart.addItem(Product('1', 'Laptop', 999.99));
  cart.addItem(Product('2', 'Mouse', 29.99));
  
  cart.displayItems();
}

Kết luận​

Lập trình hướng đối tượng trong Dart cung cấp một cách tiếp cận mạnh mẽ và linh hoạt để tổ chức và quản lý code. Hiểu rõ các khái niệm cơ bản như class, object, inheritance, polymorphism và encapsulation sẽ giúp bạn viết code Dart hiệu quả và dễ bảo trì hơn.

Tài liệu tham khảo:

• Dart Language Tour
• Dart Documentation
• Flutter Documentation

Dart là ngôn ngữ lập trình được phát triển bởi Google và là ngôn ngữ chính để phát triển ứng dụng Flutter. Bài viết này sẽ giúp bạn hiểu rõ về các khái niệm cơ bản trong Dart: biến, kiểu dữ liệu và hàm.

1. Biến trong Dart​

Khai báo biến​

Trong Dart, bạn có thể khai báo biến theo hai cách:

// Cách 1: Sử dụng var
var name = 'John';
var age = 25;

// Cách 2: Chỉ định kiểu dữ liệu
String name = 'John';
int age = 25;

Các từ khóa khai báo biến​

• var: Tự động suy luận kiểu dữ liệu
• final: Biến chỉ được gán giá trị một lần
• const: Biến hằng số, giá trị không thể thay đổi
• late: Khai báo biến sẽ được khởi tạo sau

final String name = 'John';  // Không thể thay đổi giá trị
const double pi = 3.14;      // Hằng số
late String description;     // Sẽ được khởi tạo sau

2. Kiểu dữ liệu trong Dart​

Kiểu dữ liệu cơ bản​

1. Numbers

   int age = 25;           // Số nguyên
   double height = 1.75;   // Số thực
   

2. String

   String name = 'John';
   String message = "Hello, $name!";  // String interpolation
   

3. Boolean

   bool isActive = true;
   bool isCompleted = false;
   

4. List (Mảng)

   List<String> fruits = ['apple', 'banana', 'orange'];
   var numbers = [1, 2, 3, 4, 5];
   

5. Map (Dictionary)

   Map<String, dynamic> person = {
     'name': 'John',
     'age': 25,
     'isActive': true
   };
   

6. Set (Tập hợp)

   Set<String> countries = {'Vietnam', 'USA', 'Japan'};
   

Kiểm tra kiểu dữ liệu​

var value = 42;
print(value is int);      // true
print(value is String);   // false

3. Hàm trong Dart​

Định nghĩa hàm cơ bản​

// Hàm không có tham số và không trả về giá trị
void sayHello() {
  print('Hello!');
}

// Hàm có tham số và trả về giá trị
int add(int a, int b) {
  return a + b;
}

// Hàm với tham số tùy chọn
void greet(String name, [String? title]) {
  if (title != null) {
    print('Hello, $title $name!');
  } else {
    print('Hello, $name!');
  }
}

Arrow Function​

// Cú pháp ngắn gọn cho hàm chỉ có một câu lệnh
int multiply(int a, int b) => a * b;

Tham số đặt tên​

void printUserInfo({required String name, int? age}) {
  print('Name: $name');
  if (age != null) {
    print('Age: $age');
  }
}

// Sử dụng
printUserInfo(name: 'John', age: 25);

Hàm bất đồng bộ​

// Hàm bất đồng bộ với async/await
Future<String> fetchData() async {
  // Giả lập việc tải dữ liệu
  await Future.delayed(Duration(seconds: 2));
  return 'Data loaded!';
}

// Sử dụng
void main() async {
  String result = await fetchData();
  print(result);
}

4. Ví dụ thực tế​

class User {
  final String name;
  final int age;
  final List<String> hobbies;

  User({
    required this.name,
    required this.age,
    required this.hobbies,
  });

  void introduce() {
    print('Hi, I am $name, $age years old.');
    print('My hobbies are: ${hobbies.join(", ")}');
  }
}

void main() {
  var user = User(
    name: 'John',
    age: 25,
    hobbies: ['reading', 'coding', 'gaming'],
  );
  
  user.introduce();
}

Kết luận​

Dart là một ngôn ngữ lập trình mạnh mẽ với cú pháp rõ ràng và dễ học. Hiểu rõ về biến, kiểu dữ liệu và hàm là nền tảng quan trọng để bắt đầu phát triển ứng dụng Flutter. Hãy thực hành nhiều với các ví dụ trên để nắm vững các khái niệm cơ bản này.

Tài liệu tham khảo:

• Dart Language Tour
• Dart Documentation
• Flutter Documentation