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

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