CSE431

Mobile Programming

MODULE 4:
Flutter App Lifecycle and
Internet Access
Module 4

1. Flutter App Lifecycle

2. WebView Containers in Flutter

3. Cloud Services: Pros and Cons

4. REST API (Dio and Retrofit)

5. How to call Rest APIs in Flutter

2
Flutter App Lifecycle

3
Flutter
App
Lifecyle

4
 App Lifecycle States in Flutter

• resumed: The app has returned to the foreground and is ready to

interact with the user. It transitions from the paused or inactive
state.
• inactive: The app is in an inactive state, typically transitioning
between foreground and background. User interactions are not
processed during this state.
• hidden: The app is in a hidden state, indicating that it is not visible
to the user. This state often occurs when the app is minimized or
covered by another application.
• paused: The app is paused and not executing code. This state
occurs when the app is in the background and not visible to the user.
• detached: The app is completely detached from the framework,
indicating that it is about to be terminated.
5
Action:
- App Started
- Home Button Pressed
- User clicked on home screen

Flutter App
Lifecyle
App Lifecycle States in Flutter

2024-10-20 15:45:51.891 7873-7976 flutter com.example.applifecycle I == inactive

2024-10-20 15:45:54.255 7873-7976 flutter com.example.applifecycle I == hide
2024-10-20 15:45:54.298 7873-7976 flutter com.example.applifecycle I == pause
6
I == inactive
I == hide
I == pause
7
Action:
- App Started
- Home Button Pressed
- User clicked on home screen
- Home Button Pressed
- App reactivated
Flutter App
Lifecyle
App Lifecycle States in Flutter

2024-10-20 15:47:06.539 7873-7976 flutter com.example.applifecycle I == restart

2024-10-20 15:47:06.556 7873-7976 flutter com.example.applifecycle I == show
2024-10-20 15:47:07.168 7873-7976 flutter com.example.applifecycle I == resume
8
I == restart
I == show
I == resume
9
Action:
- App Started
- Back button Pressed

Flutter App
Lifecyle
App Lifecycle States in Flutter

2024-10-20 15:50:04.696 7873-7976 flutter com.example.applifecycle I == inactive

2024-10-20 15:50:05.787 7873-7976 flutter com.example.applifecycle I == hide
2024-10-20 15:50:05.788 7873-7976 flutter com.example.applifecycle I == pause
2024-10-20 15:50:05.800 7873-7976 flutter com.example.applifecycle I == detach 10
I == inactive
I == hide
I == pause
I == detach 11
12
WebView Containers in
Flutter

13
WebView
WebView for Flutter

WebView for Flutter

• A Flutter plugin that provides a WebView

widget.

• On iOS the WebView widget is backed by a

WKWebView.

• On Android the WebView widget is backed

by a WebView.

14
WebView
WebView for Flutter

Adding WebView to your Flutter app

https://codelabs.developers.google.com/codel
abs/flutter-webview#0

15
Cloud Services: Pros and Cons

16
Pros and Cons of Cloud Services
***

▪ Advantages
▪ Disaster Recovery (DR)
▪ Access your data anywhere
▪ Low cost
▪ Scalability
▪ Security

▪ Disadvantage
▪ Lack of total control
▪ Difficult to migrate
▪ Requires Internet
▪ Privacy
▪ Long-term contracts

17
 REST APIS:
Using Dio and Retrofit

18
HTTP client
Dio

• In Flutter development, making API calls is a cornerstone for

building dynamic applications.

• Dio is a robust HTTP client for Dart that provides a standard way to
make HTTP requests and manage responses.

• It supports interceptors, FormData, request cancellation, file

downloading, timeout, etc., making it more powerful and flexible
than native HTTP requests.

19
HTTP client
Dio

Simple and expressive API for making various HTTP requests:

Dio provides a clean and expressive API that allows developers to
make various types of HTTP requests easily. Whether you need to
perform GET, POST, PUT, DELETE, or other types of requests, Dio has
got you covered.

Built-in support for interceptors to modify request and response

data:
Interceptors are powerful features that Dio offers, allowing you to
intercept and modify both request and response data. This is useful
when you need to add custom headers, log requests, handle
authentication, or perform any other pre or post-processing tasks.

20
HTTP client
Dio

Support for sending form data, JSON, and handling multipart

requests:
Dio simplifies the process of sending form data and JSON payloads
with ease. Additionally, it supports handling multipart requests for
scenarios like uploading files to servers.

Cancellation of ongoing requests for efficient resource

management:
With Flutter Dio, you can easily cancel ongoing HTTP requests. This
feature helps in efficient resource management, preventing
unnecessary data transfers and improving the overall performance of
your application.

21
HTTP client
Dio

Efficient handling of timeouts and retries for enhanced reliability:

Dio provides built-in mechanisms for handling timeouts and retries.
This ensures that your application gracefully handles scenarios where
the server response might be delayed or when the request needs to
be retried.

Global configuration options for customizing client behaviour:

Dio allows you to set global configurations that apply to all requests
made by the client. This includes options like setting default headers,
base URLs, and more, which can save you from duplicating code
across different requests.

22
Making Simple GET Requests with Dio
Dio

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

class User {
final int id;
final String name;

User({required this.id, required this.name});

factory User.fromJson(Map<String, dynamic> json) {

return User(
id: json['id'],
name: json['name'],
);
}
}

23
Making Simple GET Requests with Dio
Dio

Installing Flutter Dio Package

Before we begin, ensure you have a Flutter project set up. If you haven't
already, you can create a new Flutter project using the following command:

dependencies:

dio: ^5.3.0

Then, run the following command to fetch the package:

flutter pub get

24
Making Simple GET Requests with Dio
Dio

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Dio Example')),
body: ListView.builder(
itemCount: users.length,
itemBuilder: (context, index) {
return ListTile(title: Text(users[index].name));
},
),
);
}
}

void main() {
runApp(MaterialApp(home: DioExample()));
}

25
Making Simple GET Requests with Dio
Dio

class DioExample extends StatefulWidget {

@override
_DioExampleState createState() => _DioExampleState();
}

class _DioExampleState extends State<DioExample> {

List<User> users = [];

@override
void initState() {
super.initState();
fetchUsers();
}

26
Making Simple GET Requests with Dio
Dio

Future<void> fetchUsers() async {

try {
Response response = await
Dio().get('https://jsonplaceholder.typicode.com/users');
List<dynamic> jsonData = response.data;

setState(() {
users = jsonData.map((user) => User.fromJson(user)).toList();
});
} catch (e) {
print('Error fetching users: $e');
}
}

27
Making Simple GET Dio
Requests with Dio

28
REST API
Retrofit

• Retrofit is a REST Client library (Helper Library) used to create an

HTTP request and also to process the HTTP response from a REST
API.

• It was created by Square, you can also use retrofit to receive data
structures other than JSON, for example SimpleXML and Jackson

• Retrofit is a Dio client that makes consuming Rest APIs easier for
Flutter applications

29
How to call Rest APIs in
Flutter

30
How to call Rest APIs in Flutter
Steps

• In Flutter development, making API calls is a cornerstone for

building dynamic applications.

• Dio is a robust HTTP client for Dart that provides a standard way to
make HTTP requests and manage responses.

• It supports interceptors, FormData, request cancellation, file

downloading, timeout, etc., making it more powerful and flexible
than native HTTP requests.

Tutorial Link
https://medium.com/mindful-engineering/retrofit-the-easiest-way-to-call-
rest-apis-is-flutter-fe55d1e7c5c2
31
End of Module 4