WEEK 8
UNDERSTANDING API INTEGRATIONS
GovindDev | Flutter Dev | Kan Myint Htun
What is an API?
API (Application Programming Interface):
A way for two software applications to communicate with each other.
APIs allow apps to send and receive data from external services.
UNDERSTANDING
Simple Analogy
Imagine a restaurant:
API
The customer (your app) wants food (data).
INTEGRATIONS The chef (the server) prepares it.
The waiter (the API) takes the customer’s order and delivers the food.
waiter(api)
C response
response Client-Server Architecture
request
A B
(client)customer chef(server)
GovindDev | Flutter Dev | Kan Myint Htun
How APIs Work?
1. Client (Your App) sends a request to the server via an API.
2. API Server processes the request and retrieves the data.
3. Response is sent back to the client.
Why are APIs Important?
UNDERSTANDING
Dynamic Data:
Fetch live data like weather updates, stock prices, or news articles.
API
INTEGRATIONS Reusability:
Apps like payment gateways (e.g., Stripe, PayPal, KBZPay) use APIs
across multiple platforms.
Industry Standards:
Modern apps rely on APIs to connect with databases, third-party
services, and other systems.
Interoperability:
Connect apps written in different programming languages.
GovindDev | Flutter Dev | Kan Myint Htun
What is REST?
REST (Representational State Transfer):
A style of architecture for designing APIs. REST APIs are stateless and
commonly use HTTP methods.
Common HTTP Methods in REST API
GET: Retrieve data from the server.
REST API
Example: Fetching a list of products (data). (READ)
POST: Send data to the server.
Example: Submitting a new user registration. (CREATE/ADD)
PUT: Update existing data on the server.
Example: Changing user details. (UPDATE)
DELETE: Remove data from the server.
Example: Deleting a post. (DELETE)
GovindDev | Flutter Dev | Kan Myint Htun
JSON (JavaScript Object Notation)
A lightweight format for data exchange between a client and server.
Human-readable and easy to parse in Dart.
Data is organized in key-value pairs.
Example JSON
JSON "id": 1,
"name": "John Doe",
"email": "[Link]@[Link]",
"isPremiumUser": true,
}
How to Work with JSON in Flutter
Convert JSON strings to Dart objects using jsonDecode.
Convert Dart objects to JSON strings using jsonEncode.
GovindDev | Flutter Dev | Kan Myint Htun
JSON (JavaScript Object Notation)
Nested JSON DATA Example:
Data is organized in key-value pairs.
"id": 1,
"name": "John Doe",
"address": {
JSON "street": "123 Main St",
"city": "New York"
//jsonData
{},
{},
...
} GovindDev | Flutter Dev | Kan Myint Htun
JSON
GovindDev | Flutter Dev | Kan Myint Htun
JSON
GovindDev | Flutter Dev | Kan Myint Htun
Converting json data to dart code
String jsonString = '''
"id": 1,
"name": "John Doe",
"address": {
"street": "123 Main St",
JSON }
"city": "New York"
''';
void main() {
Map<String, dynamic> user = jsonDecode(jsonString);
print(user['name']); // Output: John Doe
print(user['address']['city']); // Output: New York
GovindDev | Flutter Dev | Kan Myint Htun
WHAT IS MAP?
A Map in Dart is a key-value pair collection, meaning it associates
keys with values. Keys must be unique, and they can map to any type
of value.
Map<KeyType, ValueType> myMap = {};// ‘key’: ‘value’
Example of Map<String, dynamic>
MAP The type Map<String, dynamic> is commonly used in Flutter because it
can store
A string as a key
Any data type (dynamic) as a value.
Map userData = {
'id': '123',
'name': 'John Doe',
'age': 25,
'isPremiumUser': true,
};
GovindDev | Flutter Dev | Kan Myint Htun
Necessary Concepts for API
Implementation
Endpoint
A specific URL where the client (your app) can access a resource.
Example: API Base URL: [Link]
UNDERSTANDING
Query Parameters
Additional information sent with a request.
API
Example: Fetching posts by user ID:
INTEGRATIONS [Link]
[Link]
Request Header
Metadata sent with requests, such as authentication tokens or content
type. Example:
"Authorization": "Bearer <your_token>",
"Content-Type": "application/json"
}
GovindDev | Flutter Dev | Kan Myint Htun
Necessary Concepts for API
Implementation - CONT
Request Body
Data sent to the server with POST, PUT, or DELETE requests.
Example (JSON Body):
UNDERSTANDING
{
"title": "Learning APIs",
API
"body": "This is a beginner tutorial",
INTEGRATIONS }
"userId": 1
Note : Response body will be dynamic in the Flutter project.
success data error data
GovindDev | Flutter Dev | Kan Myint Htun
Status Codes
When working with APIs, the server responds with status codes to
indicate the result of your request. Understanding these is crucial for
handling API responses.
Status Code Category Meaning
UNDERSTANDING
API
200/201 Success Request was successful, and the response
contains the expected data.
INTEGRATIONS 400 Bad Request The request was invalid (e.g., missing required
fields).
401 Unauthorized Authentication is required or failed.
403 Forbidden You do not have permission to access the
resource.
404 Not Found The requested resource was not found.
500 Internal Server Error The server encountered an error
GovindDev | Flutter Dev | Kan Myint Htun
HTTP Status Codes
Categories
2xx: Succes
200: O
UNDERSTANDING
201: Created
API
4xx: Client Error
INTEGRATIONS 400: Bad Request (e.g., missing fields)
401: Unauthorized (e.g., invalid token)
404: Not Found (e.g., invalid endpoint).
5xx: Server Error if ([Link] == 200) {
print('Success');
500: Internal Server Error } else if ([Link] == 404) {
503: Service Unavailable. print(‘Page not found');
} else {
print('Error: ${[Link]}');
GovindDev | Flutter Dev | Kan Myint Htun
Best Practices When Working with APIs
Always Handle Errors:
Check statusCode to determine if the request was successful.
Use try-catch for network timeouts or connection issues.
UNDERSTANDING
Use Constants for Endpoints:
Define API URLs and endpoints as constants for reusability.
API
INTEGRATIONS Modularize API Calls:
Create a separate api_service.dart file to manage all API-related
logic.
Secure Sensitive Data:
Avoid hardcoding API keys or tokens in the code. Use environment
variables or secure storage.
GovindDev | Flutter Dev | Kan Myint Htun
Understanding enum in Flutter
An enum (short for "enumeration") is a special data type in Dart that
lets you define a set of named constant values.
It's great for representing options, states, or categories in your Flutter
app.
In this week , enum is used for defining states for api responses,
making your code cleaner, easier to read, and handle error.
ENUM
CLASS Key Features of enum
Named Constants: Instead of using plain strings or integers, you
can use meaningful names for constants
Type Safety: Enums are type-safe, meaning you can't assign invalid
values
Cleaner Code: Enums make code easier to understand and
maintain.
//example
enum ApiStatus { initial, loading, success, error }
GovindDev | Flutter Dev | Kan Myint Htun
Understanding enum in Flutter
class RespObj {
dynamic data;
ApiStatus status;
RespObj([Link], [Link]);
ENUM
// Example usage
void main() {
CLASS RespObj respObj = RespObj('Learn Flutter', [Link]);
// Check status
if ([Link] == [Link]) {
print(Response is not started yet.');
// Update status
[Link] = [Link];
print(“Loaded Successfully.');
} GovindDev | Flutter Dev | Kan Myint Htun
Why Use Enums in Flutter?
State Management
Enums can define states in apps like LoadingState { idle, loading,
success, error }.
Dropdown Menus
Enums are perfect for options in drop-downs or selections.
ENUM
Navigation Logic
CLASS Manage different views or routes with enums.
Theming or Configurations
Define modes like AppTheme { light, dark }.
GovindDev | Flutter Dev | Kan Myint Htun
Why Use Enums in Flutter?
//enum
enum UserRole { admin, user, guest }
void checkAccess(UserRole role) {
switch (role) {
case [Link]:
ENUM
print('Admin access granted.');
break;
CLASS case [Link]:
print('User access granted.');
break;
case [Link]:
print('Guest access limited.');
break;
GovindDev | Flutter Dev | Kan Myint Htun
ERROR HANDLING
try-catch for Error Handling
Purpose: To catch exceptions during API calls and prevent the app
from crashing.
Why Needed
ENUM
Network issues (e.g., no internet connection)
API issues (e.g., invalid URL, rate limits)
CLASS Server errors (e.g., internal server issues).
How It Helps
Displays meaningful error messages to users
Handles specific errors (e.g., 404, 500) differently.
GovindDev | Flutter Dev | Kan Myint Htun
WHAT IS DIO?
Dio is a third-party library for making HTTP requests in Flutter. It is more
advanced than the http package and provides additional features
like
Interceptors: Modify requests or responses globally
Retry mechanism: Automatically retry failed requests
DIO
Timeouts: Set time limits for requests
File Upload/Download: Handle files efficiently.
PACKAGE Why Use Dio Over http
Dio is feature-rich and supports more complex use cases
Cleaner syntax for handling requests and responses
Built-in error handling and advanced customization.
dependencies:
dio: ^5.0.0
GovindDev | Flutter Dev | Kan Myint Htun
USING DIO
const baseUrl = '[Link]
void fetchData() async {
Dio dio = Dio();
try {
DIO
final response = await [Link](baseUrl);
// Prints the response JSON
PACKAGE }
print([Link]);
on DioException catch (e) {
/*
if(){}
else{}
*/
throw Exception([Link]());
GovindDev | Flutter Dev | Kan Myint Htun
Features of Dio
1. Customizing Base URL
Set a base URL for your API calls using BaseOptions:
Dio dio = Dio(BaseOptions(
baseUrl: baseUrl
DIO
));
PACKAGE void fetchPosts() async {
final response = await [Link]('/posts');
// Automatically appends "/posts" to baseUrl
print([Link]);
GovindDev | Flutter Dev | Kan Myint Htun
Features of Dio - Cont
2. Query Parameters
Add query parameters to a request
void fetchWithQuery() async {
final response = await [Link](baseURL, queryParameters: {
DIO
'userId': 1,
});
PACKAGE // Fetch posts by userId=1
print([Link]);
queryParameter is basically the specific information that we want to
showcase in the application.
For example : getting a response for a specific user with userId
assigned to 1.
GovindDev | Flutter Dev | Kan Myint Htun
NEWS APP
enum
enum ApiState { initial, loading, success, error }
api_response Class
IMPLEMENTING
class RespObj {
ApiState apiState;
NEWS APP
dynamic data;
WITH
}
RespObj([Link], [Link]);
DIO PACKAGE [Link]
const baseUrl = "[Link]
const apiKey = "0f755dabcd514d15bfe9721c0aeb3444";
GovindDev | Flutter Dev | Kan Myint Htun
NEWS APP
api_service.dart
class APIService {
final Dio dio = Dio();
List lists =[];
IMPLEMENTING
Future<RespObj> getData() async {
RespObj respObj;
NEWS APP
try {
WITH
final response = await [Link](baseUrl,
queryParameters: {
DIO PACKAGE "user": 1,
},
);
if ([Link] == 200) {
respObj = RespObj([Link], [Link]);
} else {
respObj = RespObj([Link], "Something went wrong");
return respObj;
} GovindDev | Flutter Dev | Kan Myint Htun
NEWS APP
api_service.dart - cont.
on DioException catch (e) {
RespObj respObj;
if ([Link] != null) {
IMPLEMENTING
final statusCode = [Link]!.statusCode;
if (statusCode == 404) {
NEWS APP
respObj = RespObj([Link], "Not found");
WITH
} else if (statusCode == 500) {
respObj = RespObj([Link], "Server error");
DIO PACKAGE } else {
respObj = RespObj([Link], "Unknown error");
return respObj;
throw Exception([Link]());
}
GovindDev | Flutter Dev | Kan Myint Htun
Practical json data
[
{"id": 1, "name": "Alice"},
{"id": 2, "name": "Bob"},
]
String jsonString = '''
JSON [
{"id": 1, "name": "Alice"}, //UserModel
{"id": 2, "name": "Bob"}, //UserModel
''';
void main() {
List<dynamic> users = jsonDecode(jsonString);
for (var user in users) {
print(user['name']);
} GovindDev | Flutter Dev | Kan Myint Htun