Making API calls in

Flutter
Shuja Akbar
Import the http Package

HTTP Package
• Add the http package to your pubspec.yaml file:

dependencies:
http: ^1.0.0

• Import the http Package

import 'package:http/http.dart' as http;
import 'dart:convert';
 Making a GET Request
Future<void> fetchData() async {
final url =
Uri.parse('https://jsonplaceholder.typicode
.com/posts');
• http.get() is used to make a GET request.
• jsonDecode parses the JSON response into try {
a Dart object. final response = await http.get(url);
• Check response.statusCode to see if the
request was successful (status code 200 if (response.statusCode == 200) {
means success). final data =
jsonDecode(response.body);
print('Data: $data');
} else {
print('Error:
${response.statusCode}');
}
} catch (e) {
print('An error occurred: $e');
}
}
 Making a POST Request
Future<void> sendData() async {
final url =
Uri.parse('https://jsonplaceholder.typicode.com/posts');

final body = jsonEncode({

'title': 'Hello',
'body': 'This is a sample post',
• http.post() sends data to the specified URL. 'userId': 1,
• headers specify the content type as });
application/json.
• body is the JSON-encoded data you want to send. try {
• A status code of 201 indicates successful creation final response = await http.post(
url,
of the resource.
headers: {'Content-Type': 'application/json'},
body: body,
);

if (response.statusCode == 201) {
final data = jsonDecode(response.body);
print('Post created: $data');
} else {
print('Error: ${response.statusCode}');
}
} catch (e) {
print('An error occurred: $e');
}
}
Using Async/Await
• Network calls are asynchronous, use async and
await to wait for the responses. This prevents
the UI from blocking while waiting for the API
response.
@override ElevatedButton(
void initState() { onPressed: sendData,
super.initState(); child: Text('Send Data'),
fetchData(); )
}
Handling Errors
• Wrap API calls in a try-catch block to handle
any errors that might occur during network
communication, such as network failures or
invalid URLs.
 Displaying Data @override
in the UI
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
Widget build(BuildContext context) {
} return Scaffold(
class _MyWidgetState extends State<MyWidget> { appBar: AppBar(title: Text('Posts')),
List<dynamic> posts = []; body: posts.isEmpty
@override ? Center(child:
void initState() {
super.initState(); CircularProgressIndicator())
fetchData(); : ListView.builder(
}
itemCount: posts.length,
Future<void> fetchData() async {
final url =
itemBuilder: (context, index)
Uri.parse('https://jsonplaceholder.typicode.com/posts'); {
try { final post = posts[index];
final response = await http.get(url); return ListTile(
if (response.statusCode == 200) { title:
setState(() {
posts = jsonDecode(response.body); Text(post['title']),
});
} else {
subtitle:
print('Error: ${response.statusCode}'); Text(post['body']),
}
} catch (e) { );
print('An error occurred: $e'); },
}
} ),
 USING FUTURE BUILDER
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

Future<List<dynamic>> fetchPosts() async {

final url =
Uri.parse('https://jsonplaceholder.typicode.com/
posts');

try {
final response = await http.get(url);

if (response.statusCode == 200) {
// Parse the JSON response into a list
return jsonDecode(response.body);
} else {
throw Exception('Failed to load posts');
}
} catch (e) {
throw Exception('Error: $e');
}
class PostsScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Posts'),
),
body: FutureBuilder<List<dynamic>>(
future: fetchPosts(),
builder: (context, snapshot) {
// Display a loading indicator while the data is
loading
if (snapshot.connectionState ==
ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
}

// Handle errors
if (snapshot.hasError) {
return Center(child: Text('Error:
${snapshot.error}'));
}
if (snapshot.hasData) {
final posts = snapshot.data!;
return ListView.builder(
itemCount: posts.length,
itemBuilder: (context, index) {
final post = posts[index];
return ListTile(
title: Text(post['title']),
subtitle: Text(post['body']),
);},);}
// Default case when there's no data yet
return Center(child: Text('No data available'));