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
httppackage hoặcdiođể 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
