GDSC Flutter Forward Workshop.pptx

Introduction
Flutter Forward is an annual event hosted by Google's Flutter team that brings
together developers, designers, and enthusiasts to learn about the latest
advancements and best practices in building mobile and web applications with
Flutter.
Flutter Forward Event

• Flutter Forward Website
https://flutter.dev/events/flutter-forward
• 2023 Flutter Forward Event Livestream:
https://www.youtube.com/watch?v=zKQYGKAe5W8
Introduction
Flutter Forward Event

Introduction
Flutter
● Flutter is a free and open-source user interface (UI) software
development kit (SDK) that was developed by Google.
● It enables developers to create high-quality, cross-platform applications
for a range of operating systems including Android, iOS, Linux, macOS,
Windows, and the web using a single codebase.

● One codebase for all platforms
● “It’s all Widgets” principle offers countless possibilities
● Rich libraries
● Flutter is fast
● Flutter is beautiful
Introduction
Why Flutter?

Flutter architecture
Dart App:
Composes widgets into the desired UI.
Implements business logic.
Owned by app developer.
Framework (source code)
Provides higher-level API to build high-
quality apps (for example, widgets, hit-
testing, gesture detection, accessibility, text
input).
Composites the app’s widget tree into a
scene.

Engine (source code)
Responsible for rasterizing composited scenes.
Provides low-level implementation of Flutter’s core APIs (for example, graphics,
text layout, Dart runtime).
Exposes its functionality to the framework using the dart:ui API.
Integrates with a specific platform using the Engine’s Embedder API.
Embedder (source code)
Coordinates with the underlying operating system for access to services like
rendering surfaces, accessibility, and input.
Manages the event loop.
Exposes platform-specific API to integrate the Embedder into apps.

Runner
Composes the pieces exposed by the platform-specific API of the Embedder into
an app package runnable on the target platform.
Part of app template generated by flutter create, owned by app developer.

● Dart is a programming language developed by Google.
● The programming language is designed for client development such as for
the web and mobile apps, and it can also be used to build server and
desktop applications.
● Dart also forms the foundation of Flutter. Dart provides the language and
runtimes that power Flutter apps, but Dart also supports many core
developer tasks like formatting, analyzing, and testing code.
Dart
Programming language

It can be compiled to multiple targets like
● ARM64 machine code for iOS and android
● JavaScript for web browsers
● .exe for Windows, MacOS and Linux
Dart
Programming language

void main() {
print('Hello, World!');
}
main is the function which first gets executed!
Dart Basics
Hello World

var name = ‘Dart';
var year = 1977;
var value = 3.7;
You can declare most variables without explicitly
specifying their type using var.A variable is “a named
space in the memory” that stores values. In other words,
it acts a container for values in a program. Variable
names are called identifiers.
Variables and Data types
var

int lineCount = 0;
Data types
Numbers
double
double value = 10.09;
int
Numbers in Dart are used to represent numeric literals.

bool check = true;
Data types
String
Boolean
String workshop = “flutter”; OR ‘flutter’;

var lst = new List(3);
lst[0] = 12;
lst[1] = 13;
lst[2] = 11;
var num_list = [1,2,3];
var lst = new List();
lst.add(12);
lst.add(13);
Data types:
list
Dart represents arrays in the form of List
objects. A List is simply an ordered
group of objects
Fixed Length
Dynamic Length

1)
var details = {'Usrname':’Flutter', ‘Password’: ‘admin@123’};
2)
var details = new Map();
details['Usrname'] = 'admin';
details['Password'] = 'admin@123';
Data types:
Map
The Map object is a simple key/value
pair.

if (value>10) {
print(‘Value is greater than 10');
} else if (value<0) {
print(‘value is less than 0');
}
.
Decision Making Statements : If-else

void main() {
var grade = "A";
switch(grade) {
case "A": { print("Excellent"); }
break;
case "B": { print("Good"); }
break;
case "C": { print("Fair");}
.
Decision Making Statements : Switch
break;
case "D": { print("Poor"); }
break;
default: { print("Invalid choice");
}
break;
}
}

for (int month = 1; month <= 12; month++) {
print(month);
}
while (year < 2016) {
year += 1;
}
.
Looping Statements : while and for

for (final i in Objects) {
print(i);
}
var n = 10;
do {
print(n);
n--;
}
while(n>=0);
.
Looping Statements : for in and do while

Dart comments usually start with //.
// This is a normal, one-line comment.
/* Comments like these are also
supported. */
Dart Comments:

// Importing core libraries
import 'dart:math';
// Importing libraries from external
packages
import 'package:test/test.dart';
// Importing files
import 'path/to/my_other_file.dart';
Imports:

1)Defining function
void function_name() {
//statements
}
1)Calling function
function_name();
Functions:

3) Returning Functions
return_type function_name(){
//statements
return value;
}
4) Parameterized Functions
Function_name(data_type param_1, data_type param_2[…]) {
//statements
}
Functions:

Optional Positional Parameters:
To specify optional positional parameters, use square [] brackets. If an
optional parameter is not passed a value, it is set to NULL.
Syntax: void function_name(param1, [optional_param_1]) { }
eg:
void main() {
test_param(123);
}
test_param(n1,[s1]) {
print(n1);
print(s1);
}
Functions:
Output??

Optional Named Parameters:
The parameters’ name must be specified while the value is being
passed. Curly brace {} can be used to specify optional named
parameters.
Syntax: void function_name(param1, {optional_param_1}) { }
Eg: void main() {
test_param(123);
test_param(123,s1:'hello');
}
test_param(n1,{s1}) {
print(n1);
print(s1);
}
Functions:
Output
?

Optional Parameters with Default values:
Function parameters can also be assigned values by default. However,
such parameters can also be explicitly passed values..
Syntax: void function_name(param1, {param2 = default_value}) { }
Eg: void main() {
test_param(123);
}
void test_param(n1,{s1:1}) {
print(n1);
print(s1);
}
Functions:
Output
?

To raise an exception, use throw:
void test_age(int age) {
if(age<0) {
throw new FormatException();
}
}
Exceptions:
throw:

To catch an exception, use a try statement with catch (or both):
try {
// code that might throw an exception
}
catch Exception2 {
// code for handling exception
}
Exceptions:
try catch:

Exceptions:
try catch:
void main() {
String message = "Hello";
try {
print("The character at the position 5 is ${message[5]}.");
} catch (e) {
print(e);
}
print('Bye!');
}

const String greet1 = “Hello”;
const greet2 = “Heyy”;
print(greet1);
print(greet2);
print(geek2);
If we try to reassign the same variable then it will display error.
const keyword:

final String greet1 = “Hello”;
final greet2 = “Heyy”;
print(greet1);
print(greet2);
print(geek2);
If we try to reassign the same variable then it will display error.
final keyword:

The only difference between the final and const keyword is that final
is a runtime-constant, which in turn means that its value can be
assigned at runtime instead of the compile-time that we had for the
const keyword.
final - runtime constant -> its value can be assigned at runtime
const - compile time constant -> its value is assigned at compile-time
const vs final:

import 'dart:io';
void main() {
task1();
task2();
task3();
}
void task1() {
print('Task1 Complete');
}
void task2() {
}
void task3() {
}

import 'dart:io';
void main() {
task1();
task2();
task3();
}
void task1() {
}
void task2() {
Duration FiveSeconds =
Duration(seconds: 5);
sleep(FiveSeconds);
}
void task3() {
}

import 'dart:io';
void main() {
task1();
task2();
task3();
}
void task1() {
}
void task2() {
Duration FiveSeconds =
Duration(seconds: 5);
Future.delayed(FiveSeconds, () {
});
}
void task3() {
print('Task3 Complete');}

import 'dart:io';
void main() {
task1();
String result = task2();
task3(result);
}
void task1() {
}
String task2() {
Duration FiveSeconds = Duration(seconds: 5);
String value = 'task2';
Future.delayed(FiveSeconds, () {
value = 'Task2 Completed!';
print(value);
});
return value;
}
void task3(String value) {
print('Task3 Complete and $value');
}

import 'dart:io';
void main() async {
task1();
String result = await task2();
task3(result);
}
void task1() {
}
Future<String> task2() async {
Duration FiveSeconds = Duration(seconds: 5);
String value = 'task2';
await Future.delayed(FiveSeconds, () {
value = 'Task2 Completed!';
print(value);
});
return value;
}
void task3(String value) {
print('Task3 Complete and $value');
}

Asynchronous Language:
Asynchronous operations let your program complete work
while waiting for another operation to finish. Here
are some common asynchronous operations:
● Fetching data over a network.
● Writing to a database.
● Reading data from a file.

● Null safety means that a variable cannot have a null
or void value.
● This feature improves user satisfaction by reducing
errors and app crashes.
● Null safety ensures that all runtime null-dereference
problems are shown at compile-time.
Null Safety

● Non-nullable: Variables by default cannot be null.
● Adoptable: It is entirely up to you to make the switch
to null safety.
● Fully Sound: All variables that require values must be
initialized appropriately.
Principles of Null Safety in
Dart

Nullable types (?):
If you want a variable of some datatype to accept any
object of that type or the value null, give the variable a
nullable type by adding a question mark (?) after the type
name. For example, a variable of type String? can contain
a string, or it can be null.
Syntax:
datatype? var_name …
Null Safety in Dart

Non nullable variable
void main() {
int a;
a = null;
print('a is $a.');
}
Nullable variable
void main() {
int? a;
a = null;
print('a is $a.');
}
Error: The value 'null' can't be assigned to a variable of
type 'int' because 'int' is not nullable.
a = null;
^
Error: Compilation failed.
Output:
a is null.

The null assertion operator (!):
If you’re sure that an expression with a nullable type isn’t
null, you can use a null assertion operator (!) to make Dart
treat it as non-nullable. By adding ! just after the
expression, you tell Dart that the value won’t be null, and
that it’s safe to assign it to a non-nullable variable.
Syntax:
var_name!
Null Safety in Dart

void main() {
String? a = getValue();
int b = a.length;
print('b is ${b}.');
}
String? getValue() {
return "GDSC"; //We know this cannot be null
}
void main() {
String? a = getValue();
int b = a!.length;
}
String? getValue() {
return "GDSC"; //We know this cannot be null
}
Output:
b is 4.
Error: Property 'length' cannot be accessed on 'String?'
because it is potentially null.
int b = a.length;
^^^^^^

void main() {
int? a;
a = 100;
print('a is $a!.');
}
void main() {
int? a;
a = null;
print('a is $a!.');
}
Output:
a is 100.
Uncaught TypeError: Cannot read properties of null
(reading 'toString')Error: TypeError: Cannot read
properties of null (reading 'toString')

Null-aware operators (?. or ??):
To handle potentially you can instead use the conditional
property access operator (?.) or null-coalescing
operators (??) to conditionally access a property or
provide a default value if null respectively.
Syntax:
nullableObject?.action();
nullableString ??= 'alternate';
variable = nullableString ?? 'alternate'
Null Safety in Dart

void main() {
String? a = null;
int? b = a.length;
}
void main() {
String? a = null;
int? b = a?.length;
}
Output:
b is null.
Error: Property 'length' cannot be accessed on
'String?' because it is potentially null.
int? b = a.length;
^^^^^^

void main() {
String? a = null;
String b = (a != null) ? a : 'GDSC';
}
void main() {
String? a = null;
String b = a ?? 'GDSC';
}
Output:
b is GDSC.

Late keyword:
Sometimes variables—fields in a class, or top-level
variables—should be non-nullable, but they can’t be
assigned a value immediately. For cases like that, use the
late keyword.
Syntax:
late datatype var_name;
Null Safety in Dart

Basic object oriented programming
Type of computer programming
in which the objects and
their interactions with one
another are considered
central.
It is based on the concept
that all items in a program
such as variables, data
structures, and functions
should be treated as
objects.
OOPs Concepts

A class is a template for creating objects. It defines the
data and behavior that all objects of that type will
share. In object-oriented programming, you create classes
by defining a set of attributes and methods. It is a user
defined Data type.
Class
Object
In object-oriented programming, you instantiate a class by
creating an object. An object can be thought of as a
particular instance of a class. It contains its own copy
of each property defined in the class, and each method is
executed independently on that object.

Methods are useful for re-usability or keeping functionality
encapsulated inside one object at a time.
In dart to create a class you need to use the class keyword
followed by the name of the class and then open and close
curly braces.

class Car {
// attributes
String? color;
int? width;
int? petrol;
// methods
void drive()
{
print("OK");
}
}
void main() {
// constructor
final maruti = Car();
// accessing class attributes & methods
Using the dot operator “.”
maruti.color = "White";
maruti.width = 80;
maruti.petrol = 90;
maruti.drive();
}

Creating objects
We can create an object of a defined class using one of its
constructors.
The Constructor is the first thing that is called when you
construct any Object from the Class
Important Properties of Constructor:
● The Constructor name should same as the Class Name.
● The Constructor doesn't return anything. It doesn't have
any return type.
● The Constructor is called only once in its lifetime,
which is when the Object is created.

Types of constructors
1.Default Constructor: A Constructor which has no parameter is
called a default constructor or no-arg constructor. If we
don't define it in the class, the Dart compiler will
automatically generate it.
1.Parameterized Constructor: When you pass some
parameters/arguments to the constructor, it is called a
Parameterized Constructor. This type of constructor is
usually used when you want to initialize the properties of
an object.
1.Named Constructor: Sometimes we need more than one
constructor to perform different functionalities. But you
can't create multiple constructors with the same name. To
overcome this problem, dart allows the user to make multiple
constructors with a different names.

It is a set of rules and definitions that allows one to
understand a topic or issue without actually knowing about
it in person or how it was developed.
Pillars of OOPs
Abstraction
An Abstract class in Dart is defined as those classes which
contain one or more than one abstract method (methods
without implementation) in them. To declare an abstract
class we make use of the abstract keyword.
A class declared as abstract can’t be instantiated.
An abstract class can be extended, but if you inherit an
abstract class then you have to make sure that all the
abstract methods in it are provided with implementation.

Inheritance
Allows one class, called the base or superclass, to be inherited
by another class, called the derived or child class. The child
class then gains all the members of the superclass, including
data and behavior, unless they are overridden in the class. This
allows for code reuse and a more concise way of developing
software. The super keyword is used to refer to immediate parent
of a class.

Polymorphism
It is the ability of an object to take on different forms or
be polymorphic. This is usually achieved through inheritance,
where the child class can redefine the behavior of the members
inherited from the superclass. Polymorphism allows for more
flexible code and a greater degree of abstraction.
If a class has multiple methods
having the same name but different
parameters, It is known as method
overloading.
If subclass (child class) has
the same method as declared in
the parent class, it is known
as method overriding.
Method Overloading

Encapsulation
The process of combining data and behavior together into a
single unit is called an object. The data and behavior
should be made hidden from the other objects and the
developer. The object can then be assigned to a variable
that can be passed around as if it is an element of code.
To make any variable or function private, we just
need to append _ (Underscore) at the starting of
the variable name (ex: _variableName).

Why Flutter?
Using a single platform-agnostic codebase, Flutter
helps developers build high-performance, scalable
applications with attractive and functional user
interfaces for Android or iOS. Flutter relies on a
library of pre-made widgets that make it simple
for even people with limited programming or
development experience to launch their own mobile
applications quickly.
Flutter Introduction

●Flutter is a newer framework compared to any other
development platform present at the moment.
●Flutter can be used to create apps using the Material
UI, a beautiful open-source UI component library
developed by Google.
●Flutter provides quick and handy features like Hot
Reload and Hot Restart, which you’ll be using quite
much later on in the workshop.
●Extensive community support and ready bug fixes
available.
More Reasons to Use Flutter

Let’s take a simple
Flutter code for a
basic demo page.
A basic Hello World!
Output code in
flutter looks like
this:
You’ll be learning
each of these widgets
and attributes
throughout the
session!

ANDROID OUTPUT iOS OUTPUT
Web OUTPUT

Widgets
“Everything is a Widget in Flutter!”
Flutter widgets are built using a modern
framework that takes inspiration from
React. The central idea is that you build
your UI out of widgets. Widgets describe
what their view should look like given
their current configuration and state.

Basic widgets in Flutter
Material Components
Flutter provides a number of widgets that
help you build apps that follow Material
Design. A Material app starts with the
MaterialApp widget.

Scaffold is a class in flutter which provides
many widgets or we can say APIs like
Drawer, Snack-Bar, Bottom-Navigation-Bar,
Floating-Action-Button, App-Bar, etc.
Scaffold will expand or occupy the whole
device screen. It will occupy the available
space. Scaffold will provide a framework to
implement the basic material design layout
of the application.
The two main properties of Scaffold are:
AppBar and body.
Scaffold

AppBar is he topmost component of the app which
contains the toolbar and some other common action
buttons. As all the components in a flutter application
are a widget or a combination of widgets. So AppBar
is also a built-in class or widget in flutter which gives
the functionality of the AppBar out of the box
AppBar

● title: This property usually takes in the main widget as a parameter to be
displayed in the AppBar.
● backgroundColor: This property is used to add colors to the background of the
Appbar.
● elevation: This property is used to set the z-coordinate at which to place this app
bar relative to its parent.
● shape: This property is used to give shape to the Appbar and manage its shadow.
Properties of AppBar Widget

Container class in flutter is a convenience
widget that combines common painting,
positioning, and sizing of widgets. A Container
class can be used to store one or more widgets
and position them on the screen according to
our convenience. Basically, a container is like a
box to store contents. A basic container
element that stores a widget has a margin,
which separates the present container from
other contents.
Container
The fundamental properties of the Container Class are- child, color, height
and width, padding, alignment and Decoration.

Elevated Button
Elevated Button is a flutter component included inside
the material package i.e.
“package:flutter/material.dart“. The main
characteristic these buttons hold is the slight
elevation in their surface towards the screen on
getting tapped by the user. In simple language,
elevated buttons are un-deprecated raised buttons
with no explicitly defined button styling. Elevated
Buttons cannot be styled.
The parameters of Elevated button are:
1. child: this represents the button’s label.
2. onPressed: this represents the action to be
executed when the button is tapped

A TextField or TextBox is an input element which holds the alphanumeric
data, such as name, password, address, etc. It is a GUI control element that
enables the user to enter text information using a programmable code. It can
be of a single-line text field or multiple-line text field.
The common attributes of TextField in Flutter are:
● decoration: It is used to show the decoration around TextField.
● border: It is used to create a default rounded rectangle border around
TextField.
● labelText: It is used to show the label text on the selection of TextField.
● hintText: It is used to show the hint text inside TextField.
TextField

Row and Column are the two most important and
powerful widgets in Flutter. These widgets let you
align children horizontally and vertically as per
the requirement. As we know that when we
design any UI(User Interface) in a flutter, we need
to arrange its content in the Row and Column
manner so these Row and Column widgets are
required when designing UI.
Columns and Rows

● children: This property takes in List<Widget>, that is a list of widgets to display inside
the Row or the Column widget.
● crossAxisAlignment: The crossAxisAlignment takes in CrossAxisAlignment enum as the
object to how the children’s widgets should be placed in crossAxisAlignment. For Row
it is vertical and for Column it is horizontal.
● mainAxisAlignment: This property takes in MainAxisAlignment enum as the object to
decide how the children widgets should be placed in mainAxisAlignment. For Row it is
horizontal and for Column it is vertical.
● textDirection: This property controls the text direction of the Row or Column widget,
which can either be from left-to-right (by default) or right-to-left.
Properties of Row and Column Widget

This, as the name suggests, is used to add images in your application. A flutter app
when built has both assets (resources) and code. Assets are available and deployed
during runtime.
Syntax: Image.asset(‘image name’)
Asset Image
This is used to display images directly from the internet. To display
images from the internet, the Image.network() function is used.
Syntax: Image.network(source_url)
Network Image

So that was about the basic Widgets. Flutter
uses a variety of other Widgets and Classes to
build a complete and a beautiful application.
The application we will be making over the next
two days will involve many other widgets. You
can learn more about them and how to use them
here:
https://docs.flutter.dev/development/ui/widgets

The UI or display in Flutter comprises stacks of widgets popularly called a
widget tree.
The widget tree is constructed by the build method of the stateful or
stateless widget, and it is rebuilt whenever there is a change in the state
of the application.
Each widget tree has a root widget. This is the widget from which other
widgets are stacked upon.
Flutter Widget Tree
Everything in Flutter is a widget...

● A typical widget tree
depicted using the Widget
Tree Inspector
● Selecting a widget shows
the properties and details of
the widget
Widget Inspector

BuildContext
BuildContext is a locator that is used to track
each widget in a tree and locate them and their
position in the tree.
Thus, every widget has its own BuildContext as
the location inside the widget tree is unique.

BuildContext
Some of the key methods of BuildContext in Flutter include:
inheritFromWidgetOfExactType: This method allows a widget to access the nearest widget of a
given type in the widget tree. It can be used to pass data down the widget tree hierarchy, such as
theme data or localization data.
findAncestorStateOfType: This method returns the state object of the nearest ancestor widget of
a given type. It can be used to access and modify the state of an ancestor widget from a
descendant widget.
findRenderObject: This method returns the RenderObject associated with the widget. A
RenderObject is a low-level object that represents the layout and rendering of a widget. It can be
used to perform custom layout and painting operations.

BuildContext is directly usable in every method of State class when using
StatefulWidget. However, if you are using a StatelessWidget, this is not
the case. You have to pass it down the tree you are building.
That’s because a StatelessWidget is immutable. Every member variable of
the class must be final and thus can not be altered after the object has
been constructed. The BuildContext, however, is known later, when the
build() method is called.
BuildContext

The build() method
The build() method is a required method that defines the
configuration of a widget.
Flutter maintains the current
state of the app at every given
time, so anytime we update the
User Interface we say that we
are updating the state.

Widgets and Classes
Every widget is implemented as a
Widget class in Flutter
The widget class hierarchy in Flutter is
very flexible, allowing to build complex
user interfaces by combining and
nesting different types of widgets.

Selecting the right folder structure for your
Flutter application
When building large Flutter apps, one of the first things
we should decide is how to structure our project.
This ensures that the entire team can follow a clear
convention and add features in a consistent manner.
File Structure

This is how a default folder
structure of Flutter app looks like.

These two widgets are the building blocks of every
widget that flutter provides.
But before we get into what Stateless and Stateful is,
we need to understand what State is. The simplest
way to put it, State is something that can change within
a widget.

For example, let’s say we have a like button.
The button can either be filled in, or not
filled in depending on whether it has been
clicked. That’s a state right there. The state of
that button can either be filled in or not filled
in. If a widget is constant and does not
change no matter what is done, then it does
not have a State.

Stateless widgets are widgets that do not store any mutable state
within themselves. This means that every time the widget is rebuilt,
it will appear exactly the same as the previous time it was built.
Stateless widgets are usually simpler to implement and use fewer
resources.
Stateful widgets store mutable state within themselves. This means
that their appearance and behavior may change depending on the
values of the internal state. The state of a stateful widget can be
updated by calling setState() method, which rebuilds the widget and
updates its appearance.
Stateless and Stateful
widgets

Stateless widgets are like photographs that always look the
same. Every time you see the photo, it looks exactly as it did
before. Similarly, a stateless widget always looks the same
whenever it's displayed.
Stateful widgets are like a chameleon that can change its
appearance depending on the environment. Similarly, a
stateful widget can change its appearance and behavior
depending on the values of its internal state, which can be
updated by the application.
In much more Simpler
Ways..

class ItemCount extends StatelessWidget {
final String name;
final int count;
const ItemCount({super.key, required this.name, required this.count});
@override
Widget build(BuildContext context) {
return Text('$name: $count');
}
}
Stateless Widget

class ItemCount extends StatefulWidget {
final String name;
const ItemCount({super.key, required this.name});
@override
State<ItemCount> createState() => _ItemCountState();
}
class _ItemCountState extends State<ItemCount> {
int count = 1;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
count = count + 1;
});
},
child: Center(child: Text('${widget.name}: ${count}')));
}
}
Stateful Widget

Pub is the package manager for the Dart programming
language, containing reusable libraries & packages for
Flutter and general Dart programs.
Many developers around the world can contribute to
Flutter’s growth by writing packages and publishing
them at https://pub.dev. It’s a big public repository
where you can find packages for any platform (web,
mobile, or desktop)
Pub.dev

GDSC Flutter Forward Workshop.pptx

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to GDSC Flutter Forward Workshop.pptx

Similar to GDSC Flutter Forward Workshop.pptx (20)

More from GDSCVJTI

More from GDSCVJTI (7)

Recently uploaded

Recently uploaded (20)

GDSC Flutter Forward Workshop.pptx