Skip to main content

Tự Học Flutter | Kết Hợp Flutter Với Backend API

· 2 min read

1. Cài Đặt Dependencies

dependencies:
http: ^1.1.0
dio: ^5.4.0

2. Thiết Lập HTTP Client

  • Sử dụng http package hoặc dio để thực hiện các request API
  • Cấu hình:
    • Base URL
    • Headers (Authentication, Content-Type)
    • Timeout
    • Interceptors

3. Tạo Model Classes

class User {
final int id;
final String name;
final String email;

User({
required this.id,
required this.name,
required this.email,
});

factory User.fromJson(Map<String, dynamic> json) {
return User(
id: json['id'],
name: json['name'],
email: json['email'],
);
}
}

4. Xây Dựng API Service

class ApiService {
final client = http.Client();
final baseUrl = 'https://api.example.com';

Future<List<User>> getUsers() async {
try {
final response = await client.get(
Uri.parse('$baseUrl/users'),
headers: {'Authorization': 'Bearer token'},
);

if (response.statusCode == 200) {
final List<dynamic> data = json.decode(response.body);
return data.map((json) => User.fromJson(json)).toList();
} else {
throw Exception('Lỗi lấy dữ liệu: ${response.statusCode}');
}
} catch (e) {
throw Exception('Lỗi kết nối: $e');
}
}
}

5. State Management

class UserProvider extends ChangeNotifier {
final _apiService = ApiService();
List<User> _users = [];
bool _loading = false;
String? _error;

Future<void> fetchUsers() async {
try {
_loading = true;
notifyListeners();

_users = await _apiService.getUsers();
_error = null;
} catch (e) {
_error = e.toString();
} finally {
_loading = false;
notifyListeners();
}
}
}

6. Sử Dụng Trong Widget

class UsersScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Consumer<UserProvider>(
builder: (context, provider, child) {
if (provider._loading) {
return CircularProgressIndicator();
}

if (provider._error != null) {
return Text('Lỗi: ${provider._error}');
}

return ListView.builder(
itemCount: provider._users.length,
itemBuilder: (context, index) {
final user = provider._users[index];
return ListTile(
title: Text(user.name),
subtitle: Text(user.email),
);
},
);
},
);
}
}

7. Xử Lý Lỗi

  • Implement try-catch blocks
  • Hiển thị thông báo lỗi phù hợp
  • Có cơ chế retry khi request thất bại
  • Xử lý các trường hợp:
    • Lỗi kết nối mạng
    • Lỗi server (500)
    • Lỗi authentication (401, 403)
    • Lỗi validation (400)

8. Best Practices

  • Sử dụng base client để tái sử dụng code
  • Implement caching mechanism
  • Logging và monitoring
  • Unit testing cho API calls
  • Sử dụng các pattern như Repository Pattern
  • Tách biệt logic business và UI