VISVESVARAYA TECHNOLOGICAL UNIVERSITY

BELAGAVI

ARTIFICIAL INTELLIGENCE AND MACHINE LEARNING

ACADEMIC REPORT ON

FLUTTER TRAINING PROGRAM

NITIN HEMA RAJ

4AL20AI027

UNDER THE GUIDANCE OF

Mr. SHEIK MOHAMMED ALFAZ

TRAINER

DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND

MACHINE LEARNING

ALVA’S INSTITUTE OF ENGINEERING AND TECHNOLOGY

MOODBIDRI - 574225, KARNATAKA.

2021 – 2022
 ACKNOWLEDGEMENT

The satisfaction and euphoria that accompany a successful completion of any

task would be incomplete without the mention of people who made it possible,
success is the epitome of hard work and perseverance, but steadfast of all is
encouraging guidance.
So, with gratitude I acknowledge all those whose guidance and encouragement
served as beacon of light and crowned the effort with success.
I thank our trainer Mr. Sheik Mohammed Alfaz, Professional trainer in
Flutter, who has been our source of inspiration. He has been especially
enthusiastic in giving his valuable guidance and critical reviews.
I sincerely thank, Prof. Harish Kunder Professor and Head, Department
of Artificial Intelligence and Machine Learning who has been the constant
driving force behind the completion of the task.
I thank our beloved Principal Dr. Peter Fernandes, for his constant help
and support throughout.

I am indebted to Management of Alva’s Institute of Engineering and

Technology, Mijar, Moodbidri for providing an environment which helped me
in completing my task in Artificial Intelligence and Machine Learning domain.

Also, I thank all the teaching and non-teaching staff of Department Artificial
Intelligence and Machine Learning for the help rendered.
 I. INTRODUCTION

Flutter is an open-source UI software development kit created by Google. It is

used to develop cross platform applications for Android, iOS, Linux, macOS,
Windows, Google Fuchsia, and the web from a single codebase.

The major components of Flutter include:

 Dart platform
 Flutter engine
 Foundation library
 Design-specific widgets
 Flutter Development Tools (DevTools)

Dart platform:

Flutter apps are written in the Dart language and make use of many of the
language's more advanced features.

While writing and debugging an application, Flutter runs in the Dart virtual
machine, which features a just-in-time execution engine. This allows for fast
compilation times as well as "hot reload", with which modifications to source
files can be injected into a running application. Flutter extends this further with
support for stateful hot reload, where in most cases changes to source code are
reflected immediately in the running app without requiring a restart or any loss
of state.

For better performance, release versions of Flutter apps on all platforms use
ahead-of-time (AOT) compilation.

Flutter engine:

Flutter's engine, written primarily in C++, provides low-level rendering support

using Google's Skia graphics library. Additionally, it interfaces with platform-
specific SDKs such as those provided by Android and iOS.[16] The Flutter
Engine is a portable runtime for hosting Flutter applications. It implements
Flutter's core libraries, including animation and graphics, file and network I/O,
accessibility support, plugin architecture, and a Dart runtime and compile
toolchain. Most developers interact with Flutter via the Flutter Framework,
which provides a reactive framework and a set of platform, layout, and
foundation widgets.
Foundation library:

The Foundation library, written in Dart, provides basic classes and functions
that are used to construct applications using Flutter, such as APIs to
communicate with the engine.

Design-specific widgets:

The Flutter framework contains two sets of widgets that conform to specific
design languages: Material Design widgets implement Google's design language
of the same name, and Cupertino widgets implement Apple's iOS Human
interface guidelines.

Widgets:

Flutter uses a variety of widgets to deliver a fully functioning application. These

widgets are Flutter's framework architecture. Flutter's Widget Catalog provides
a full explanation and API on the framework.

Basics of Widgets in Flutter

Widgets are generally defined in three basic types: Stateful widgets,
Stateless widgets, and Inherited widgets. Being the central class hierarchy in the
Flutter framework the three basic types of widgets are used in the construction
of every Flutter application. Although all the instances of a widget are
immutable, the Stateful widget allows the interaction between user and
application. By giving access to the method setState, the state can be maintained
in separate state objects. Alternatively, the Stateless widget acts as a constant,
and before anything displayed can be changed, the widget has to be recreated.
The Inherited widget works by allowing another widget to subscribe to the
Inherited widget's state allowing the state to be passed down to its children.
 II. ADVANTAGES OF FLUTTER

Flutter fulfills the custom needs and requirements for developing mobile
applications. It also offers many advantages, which are listed below.

 It makes the app development process extremely fast because of the hot-
reload feature. This feature allows us to change or update the code are
reflected as soon as the alterations are made.
 It provides the smoother and seamless scrolling experiences of using the
app without much hangs or cuts, which makes running applications faster
in comparison to other mobile app development frameworks.
 Flutter reduces the time and efforts of testing. As we know, flutter apps
are cross-platform so that testers do not always need to run the same set
of tests on different platforms for the same app.
 It has an excellent user interface because it uses a design-centric widget,
high-development tools, advanced APIs, and many more features.
 It is similar to a reactive framework where the developers do not need to
update the UI content manually.
 It is suitable for MVP (Minimum Viable Product) apps because of its
speedy development process and cross-platform nature.

III. DISADVANTAGES OF FLUTTER

We have seen earlier that the Flutter has many advantages, but it also
contains some disadvantages, which are given below.

 The Flutter is a comparatively new language that needs continuous

integration support through the maintenance of scripts.
 It provides very limited access to SDK libraries. It means a developer
does not have a lot of functionalities to create a mobile application. Such
types of functionalities need to be developed by the Flutter developer
themselves.
 The Flutter apps do not support the browser. It only supports Android and
iOS platforms.
 It uses Dart programming for coding, so a developer needs to learn new
technologies. However, it is easy to learn for developers.
 IV. PROGRAMMING

1. main.py

import 'package:flutter/material.dart';
import 'package:instagram_login/instagram_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: InstagramView(),
);
}
}

2. home.dart

import 'package:flutter/material.dart';

class HomeView extends StatelessWidget {

const HomeView({Key? key, required this.token, required this.name})
: super(key: key);
final String token;
final String name;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Welcome $name'),
),
body: Center(
child: Text('Token: $token'),
),
);
}
}
 3. instagram_constant.dart

class InstagramConstant {
static InstagramConstant? _instance;
static InstagramConstant get instance {
_instance ??= InstagramConstant._init();
return _instance!;
}

InstagramConstant._init();

static const String clientID = '718353975697969';

static const String appSecret = '5497481e4a4ab34ae4fc2eeb4e6b7dba';
static const String redirectUri = 'https://www.ekspar.com.tr/';
static const String scope = 'user_profile,user_media';
static const String responseType = 'code';
final String url =
'https://api.instagram.com/oauth/authorize?
client_id=$clientID&redirect_uri=$redirectUri&scope=user_profile,user_media
&response_type=$responseType';
}

4. instagram_model.dart

import 'dart:convert';

import 'package:http/http.dart' as http;

import 'package:instagram_login/instagram_constant.dart';

class InstagramModel {
List<String> userFields = ['id', 'username'];

String? authorizationCode;
String? accessToken;
String? userID;
String? username;

void getAuthorizationCode(String url) {

authorizationCode = url
.replaceAll('${InstagramConstant.redirectUri}?code=', '')
.replaceAll('#_', '');
}
 Future<bool> getTokenAndUserID() async {
var url = Uri.parse('https://api.instagram.com/oauth/access_token');
final response = await http.post(url, body: {
'client_id': InstagramConstant.clientID,
'redirect_uri': InstagramConstant.redirectUri,
'client_secret': InstagramConstant.appSecret,
'code': authorizationCode,
'grant_type': 'authorization_code'
});
accessToken = json.decode(response.body)['access_token'];
print(accessToken);
userID = json.decode(response.body)['user_id'].toString();
return (accessToken != null && userID != null) ? true : false;
}

Future<bool> getUserProfile() async {

final fields = userFields.join(',');
final responseNode = await http.get(Uri.parse(
'https://graph.instagram.com/$userID?
fields=$fields&access_token=$accessToken'));
var instaProfile = {
'id': json.decode(responseNode.body)['id'].toString(),
'username': json.decode(responseNode.body)['username'],
};
username = json.decode(responseNode.body)['username'];
print('username: $username');
return instaProfile != null ? true : false;
}
}

5. instagram_view.dart

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:instagram_login/home.dart';
import 'package:instagram_login/instagram_constant.dart';
import 'package:instagram_login/instagram_model.dart';

class InstagramView extends StatelessWidget {

const InstagramView({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Builder(builder: (context) {
final webview = FlutterWebviewPlugin();
final InstagramModel instagram = InstagramModel();

buildRedirectToHome(webview, instagram, context);

return WebviewScaffold(
url: InstagramConstant.instance.url,
resizeToAvoidBottomInset: true,
appBar: buildAppBar(context),
);
});
}

Future<void> buildRedirectToHome(FlutterWebviewPlugin webview,

InstagramModel instagram, BuildContext context) async {
webview.onUrlChanged.listen((String url) async {
if (url.contains(InstagramConstant.redirectUri)) {
instagram.getAuthorizationCode(url);
await instagram.getTokenAndUserID().then((isDone) {
if (isDone) {
instagram.getUserProfile().then((isDone) async {
await webview.close();

print('${instagram.username} logged in!');

await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => HomeView(
token: instagram.authorizationCode.toString(),
name: instagram.username.toString(),
),
),
);
});
}
});
}
});
}

AppBar buildAppBar(BuildContext context) => AppBar(

 backgroundColor: Colors.white,
elevation: 0,
iconTheme: IconThemeData(color: Colors.black),
title: Text(
'Instagram Login',
style: Theme.of(context)
.textTheme
.headline6!
.copyWith(color: Colors.black),
),
);
}

V. CONCLUSION
 Some of the students of Alva’s Institute of Engineering and Technology
have attended a 5-day workshop about Flutter and React. Nobody had estimated
that amount of strength for the Flutter training, but there was a rocking 80
students attending the workshop every day from 15th February to 19th
February. The workshop was conducted for 2 hours every day but the interested
students extended the sessions for about 4 hours every day. React sessions were
handled by Mr. Harshad and the Flutter sessions were handled by
Mr. Mohammed Alfaz. I attended the Flutter workshop as I was more interested
in that particular framework.

The first two days were totally dedicated to the installation of Flutter and
related applications in the students’ respective systems. As the process of
installation is very long, tedious and requires supervision, the tutor himself
guided each student personally. This consumed a lot of time. Then the training
started with full interest and concentration. The tutor tried his best to convey as
much knowledge as possible. Hats off to his patience and dedication to teach.
The efforts he made to make us all understand the basics of Flutter is
remarkable. The next three days was filled with a lot of knowledge and skill
development. We were taught to make simple interfaces using Flutter and
Visual Studio Code. The currency converter for that sake, we learnt to program
in such a way it can be executed in a virtual display of a mobile phone. Then the
code was developed to display the sign-in page of Instagram. The code was
about 100 lines long and the output was just like the real page of Instagram. We
all loved the process of coding and enjoyed debugging all the errors in the code.
The training was just lit.