What is Networking in flutter?
Networking in Flutter involves establishing and managing communication between a Flutter app and a remote server or API over the network. It encompasses tasks such as making HTTP requests, handling responses, sending and receiving data, and managing errors. Essentially, networking enables your Flutter app to interact with external services, retrieve data, and update information over the internet.
Here are some common networking tasks in Flutter:
Making Authenticated Requests: When your app needs to access protected resources on a server, it can send authenticated requests by including authentication tokens or credentials.
Parsing JSON in the Background: Many APIs return data in JSON format. Flutter allows you to parse this data efficiently, transforming it into usable objects within your app.
Fetching Data from the Internet: Your app can retrieve data from external APIs, databases, or other web services. This data can be used to display information to users or perform other actions.
Sending Data to the Internet: If your app collects user input or generates data, it can send that data to a server for processing or storage.
Updating Data Over the Internet: Apps often need to update information on the server, such as saving user preferences, marking items as read, or modifying user profiles.
Communicating with WebSockets: WebSockets allow real-time communication between the app and a server. They are useful for features like chat applications, live updates, and notifications.
Flutter provides a powerful and flexible framework for networking, enabling developers to implement various networking techniques and interact with web services efficiently.If you’re building a Flutter app that requires data exchange with external servers or APIs, understanding networking concepts is essential for a smooth user experience.
Popular networking library of Flutter - HTTP
Certainly! When it comes to networking in Flutter, there are several popular libraries that can simplify making HTTP requests and handling network-related tasks. Here are some of the most widely used ones:
http :
Description: The http package is maintained by the Dart team and is one of the most-liked HTTP packages on pub.dev.
Features:
Sample Usage:
import 'package:http/http.dart' as http;
void sendPostRequest() async {
try {
void sendPostRequest() async {
final url = Uri.parse('put your API here');
final response = await http.post(url, body: {
'title': '[Your title]',
'body': 'Your body',
});
print('Response status: ${response.statusCode}');
print('Response body: ${response.body}');
}
} catch (e) {
print(e.toString());
}
}
Libraries offer different features and capabilities, so choose the one that best fits your project’s requirements.
HTTP Package in Flutter for Networking and Data Parsing
Step 1: Setting Up a Flutter Project
Ensure that you have Flutter and Dart installed. If you haven’t already, follow the official Flutter installation guide.
Create a new Flutter project using the following command:
flutter create api_example
Step 2: Add the HTTP Package
- To add the http package as a dependency, run the following command:
flutter pub add http
or
- To make HTTP requests, add the http package to your
pubspec.yaml file:
dependencies:
flutter:
sdk: flutter
http: ^1.2.1
Step 3: Import the HTTP Package
- Import the package in your Dart file:
import 'package:http/http.dart' as http;
Step 4: Make a Network Request
- Use the
http.get() method to fetch data from an API:
Future<http.Response> fetchPosts() {
return http.get(Uri.parse('Put your API here'));
}
Step 5: Handle Authentication
- For basic authentication, include the credentials in the request headers:
final url = Uri.parse('Put your API here');
final response = await http.get(url, headers: {
'Authorization': 'Basic your_base64_encoded_credentials',
});
- For token-based authentication, set the token in the request headers:
final token = 'your_access_token';
final response = await http.get(url, headers: {
'Authorization': 'Bearer $token',
});
Step 6: Parse the Response
- Convert the response into a Dart object. Create a class that represents the data from the network request:
class PostModel {
final int userId;
final String title;
final String body;
PostModel({
required this.userId,
required this.title,
required this.body,
});
factory PostModel.fromJson(Map<String, dynamic> json) {
return PostModel(
userId: json['userId'] as int,
title: json['title'] as String,
body: json['body'] as String,
);
}
Map<String, dynamic> toJson() {
return {
'userId': userId,
'title': title,
'body': body,
};
}
}
Step 7: Display the Data
In your widget tree, wrap the part where you want to display the data with a FutureBuilder.
Set the future parameter of FutureBuilder to the function that fetches the data (in this case, fetchPosts()).
The builder callback will be called with the data once it’s available. You can use this data to build your UI.
FutureBuilder<List<Map<String, dynamic>>>(
future: fetchPosts(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('Error loading data');
} else 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']),
);
},
);
} else {
return Text('No data available');
}
},
)
Step 8: Error Handling
- Test your network requests thoroughly, handle errors, and ensure graceful handling of exceptions. If the status code is not 200 (OK), throw an exception:
if (response.statusCode == 200) {
return PostModel.toJson(jsonDecode(response.body));
} else {
throw Exception('Failed to load album');
}
Some common http status code
Certainly! HTTP status codes are three-digit numbers returned by a server in response to a client’s request. They provide information about the outcome of the request. Here are some common HTTP status codes:
1xx (Informational):
2xx (Successful):
3xx (Redirection):
4xx (Client Errors):
5xx (Server Errors):
Remember that these are just a few examples, and there are many other status codes with specific meanings. When working with APIs or web services, understanding these status codes is crucial for handling responses effectively.
Mastering networking in Flutter with the HTTP package is crucial for efficient communication between apps and servers. Understanding networking concepts, utilising the HTTP package for requests, handling authentication, parsing data, and managing errors are key for creating robust Flutter applications. Happy coding and networking in Flutter!
