Making API calls in
Flutter
Shuja Akbar
Import the http Package
HTTP Package
• Add the http package to your [Link] file:
dependencies:
http: ^1.0.0
• Import the http Package
import 'package:http/[Link]' as http;
import 'dart:convert';
Making a GET Request
Future<void> fetchData() async {
final url =
[Link]('[Link]
.com/posts');
• [Link]() is used to make a GET request.
• jsonDecode parses the JSON response into try {
a Dart object. final response = await [Link](url);
• Check [Link] to see if the
request was successful (status code 200 if ([Link] == 200) {
means success). final data =
jsonDecode([Link]);
print('Data: $data');
} else {
print('Error:
${[Link]}');
}
} catch (e) {
print('An error occurred: $e');
}
}
Making a POST Request
Future<void> sendData() async {
final url =
[Link]('[Link]
final body = jsonEncode({
'title': 'Hello',
'body': 'This is a sample post',
• [Link]() 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 [Link](
url,
of the resource.
headers: {'Content-Type': 'application/json'},
body: body,
);
if ([Link] == 201) {
final data = jsonDecode([Link]);
print('Post created: $data');
} else {
print('Error: ${[Link]}');
}
} 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,
[Link](); 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: [Link]
@override ? Center(child:
void initState() {
[Link](); CircularProgressIndicator())
fetchData(); : [Link](
}
itemCount: [Link],
Future<void> fetchData() async {
final url =
itemBuilder: (context, index)
[Link]('[Link] {
try { final post = posts[index];
final response = await [Link](url); return ListTile(
if ([Link] == 200) { title:
setState(() {
posts = jsonDecode([Link]); Text(post['title']),
});
} else {
subtitle:
print('Error: ${[Link]}'); Text(post['body']),
}
} catch (e) { );
print('An error occurred: $e'); },
}
} ),
USING FUTURE BUILDER
import 'package:flutter/[Link]';
import 'package:http/[Link]' as http;
import 'dart:convert';
Future<List<dynamic>> fetchPosts() async {
final url =
[Link]('[Link]
posts');
try {
final response = await [Link](url);
if ([Link] == 200) {
// Parse the JSON response into a list
return jsonDecode([Link]);
} 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 ([Link] ==
[Link]) {
return Center(child: CircularProgressIndicator());
}
// Handle errors
if ([Link]) {
return Center(child: Text('Error:
${[Link]}'));
}
if ([Link]) {
final posts = [Link]!;
return [Link](
itemCount: [Link],
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'));