MODULE 5.pptx MODULE 4 (1).pptx flutter dart programming

TRAINING
Transforming Lives Through
Skilling

Networking
and APIs in
Flutter

Networking is a key part of modern mobile applications, allowing apps to fetch data, interact
with external services, and synchronize with backends. Flutter provides robust tools to handle
networking and APIs efficiently.
What is an API?
An Application Programming Interface (API) allows communication between apps and
external data sources.
Common APIs in Apps:
● Weather APIs (e.g., OpenWeather).
● Map APIs (e.g., Google Maps).
● Payment Gateways (e.g., Stripe, PayPal).
● Data Format: JSON (JavaScript Object Notation).

Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem ipsum
has been industry’s standard dummy text ever
since the 1500s, when an unknown printer took
a gallery of ty. Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem ipsum has been industry’s standard
dummy text ever since the 1500s, when an
unknown printer took a gallery of type.
Image
a) HTTP Protocol
● Most networking in Flutter uses the HTTP protocol to send requests and receive responses.
● Common HTTP methods:
○ GET: Fetch data from a server.
○ POST: Submit data to a server.
○ PUT: Update existing data on a server.
○ DELETE: Delete data from a server.
b) Asynchronous Nature
● Network calls are asynchronous, meaning they don’t block the main thread.
● Use Future, async, and await to handle asynchronous operations.
Core Concepts of Networking in Flutter

HTTP Package
The http package is the most commonly used library for making HTTP requests in Flutter.
a) Adding the Package
1. Add http to your pubspec.yaml file:
dependencies
http: ^0.15.0
2. Install dependencies:
flutter pub get
b) Basic HTTP GET Request
import 'dart:convert';
import 'package:http/http.dart' as http;
Future<void> fetchData() async {
Image

Image Image Image
final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
if (response.statusCode == 200) {
var data = jsonDecode(response.body);
print(data);
} else {
print('Failed to load data: ${response.statusCode}');
}
}

c) HTTP POST Request
var data = jsonDecode(response.body);
print(data);
} else {
print('Failed to load data: ${response.statusCode}');
}
}

JSON Parsing
Most APIs return data in JSON (JavaScript Object Notation) format. Flutter provides tools to parse and convert JSON data
into Dart objects.
Example:
{
"id": 1,
"title": "Flutter Networking",
"completed": false
}

Create a model class:
class Task {
final int id;
final String title;
final bool completed;
Task({required this.id, required this.title, required this.completed});
factory Task.fromJson(Map<String, dynamic> json) {
return Task(
id: json['id'],
title: json['title'],
completed: json['completed'],
);

}
}
Use the model:
Future<void> fetchTask() async {
final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/todos/1'));
Task task = Task.fromJson(jsonDecode(response.body));
print('Task: ${task.title}, Completed: ${task.completed}');
}
}

Error Handling in Networking
Always handle errors to avoid app crashes due to network failures or unexpected server responses.
try {
print('Data: ${response.body}');
} else {
throw Exception('Failed to load data');
}
} catch (e) {

print('Error: $e');
}
}
State Management with Networking
To update the UI based on network data, combine state management with networking.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
// Data Provider
class PostProvider with ChangeNotifier {

List<dynamic> posts = [];
Future<void> fetchPosts() async {
final response = await
http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
posts = jsonDecode(response.body);
notifyListeners();
}
}
}
// Main App

void main() {
runApp(
ChangeNotifierProvider(
create: (context) => PostProvider(),
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override

Widget build(BuildContext context) {
return MaterialApp(
home: PostScreen(),
);
}
}
// UI Screen
class PostScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final provider = Provider.of<PostProvider>(context);
return Scaffold(

appBar: AppBar(title: Text('Posts')),
body: provider.posts.isEmpty
? Center(
child: ElevatedButton(
onPressed: provider.fetchPosts,
child: Text('Load Posts'),
),
)
: ListView.builder(
itemCount: provider.posts.length,
itemBuilder: (context, index) {

return ListTile(
title: Text(provider.posts[index]['title']),
);
},
),
);
}
}

Handling Authentication in APIs
Token-Based Authentication
● Send tokens (e.g., JWT) in the request headers.
Future<void> fetchDataWithToken() async {
final response = await http.get(
Uri.parse('https://example.com/protected-resource'),
headers: {'Authorization': 'Bearer YOUR_TOKEN_HERE'},
);
print('Protected Data: ${response.body}');
}
}

Common Networking Use Cases
● Fetching Data
○ Use GET requests to retrieve data from an API.
● Sending Data
○ Use POST requests to submit forms or send JSON data to a server.
● Pagination
○ Fetch data in chunks using query parameters like page or limit.
● File Uploads
○ Use the dio package or http package for multipart file uploads.
Hands-On Activities
● Activity 1: Build a weather app to fetch and display current weather data using an API.
● Activity 2: Create a basic CRUD app using an API to manage user data.
● Activity 3: Implement error handling for failed API requests.

THANK YOU
+91 78150 95095 codemithra@ethnus.com www.codemithra.com

MODULE 5.pptx MODULE 4 (1).pptx flutter dart programming

More Related Content

Similar to MODULE 5.pptx MODULE 4 (1).pptx flutter dart programming (20)

More from trwdcn (20)

Recently uploaded (20)

MODULE 5.pptx MODULE 4 (1).pptx flutter dart programming