GDSC-FlutterBasics.pdf

This work is licensed under the Apache 2.0 License
Basics of Flutter
GDSC - SSN College Of
Engineering

What is Mobile Development?
Mobile development involves the development of
software that is intended to run on mobile devices
(smartphones, tablets, etc).
Differentiating factor- mobile development will utilize
unique features and hardware from mobile devices like
touch, Bluetooth, GPS, cameras, and more.
Mobile applications depend upon the device itself.

2 Popular types of Mobile Development
Native app: applications developed to support a specific platform like Android
or iOS. For Android applications, you will use Java or Kotlin. Developers often
prefer native applications because of their ability to fully utilize mobile device
functionality.
Hybrid app: Combines elements from both native apps and web apps. Like
web applications; much of the app is written using technologies like HTML, CSS,
and JavaScript, which is then encapsulated into a native application. Allow
developers to use web technologies.

What is Flutter?

What is Flutter?
Flutter is an open-source Software Development
Kit (SDK) for “building beautiful, natively compiled
applications for mobile, web, and desktop from a
single codebase.”
If a developer has created an amazing application. However, the application is only
supported on iOS. So, the developer decides to spend numerous hours learning
Android to support more users on their application. Even after learning how to build
Android apps, they realize that their application must support all types of Android
screen resolutions. That’s where Flutter comes in.

Flutter essentially consists of two parts:
● Software Development Kit (SDK): A
collection of tools that aid you in
developing your application.
● Framework: A collection of widgets, or UI
elements, that you can add to develop
your application.

● Open-source
● Cross-platform development
● Expansive widget library
● Hot reload
● Thriving Large Developer
Community Support
Features of Flutter

Understanding Widgets
● Basic building blocks of the Flutter UI. Unlike many other frameworks
that separate views, layouts, view controllers, and other elements, Flutter
offers a consistent, unified object model: the widget.
● Widgets are the central class hierarchy in the Flutter framework. A
widget is an immutable description of part of a user interface.
● Like components in React, widgets form a hierarchy and can be nested
within each other. Furthermore, widgets inherit properties from their
parents.

The Dart
Programming
Language

What is Dart?
Dart, a programming language crafted by
Google, is tailored for client-side development,
including web and mobile applications, while
also versatile for creating server-side and
desktop applications.

2
3
1 Optimized for UI
Productive Development
Fast on all platforms
Create using a programming language specifically
designed for UI development needs.
Iteratively refine your app using hot reload to
instantly reflect changes; compiled both
ahead-of-time (AOT) and just-in-time (JIT).
Compile to ARM and x64 machine code for mobile and
desktop platforms, or compile to JavaScript for web
deployment.
Why Dart?

Dart
● Variables
● Conditionals
● Control Flow
● Functions
● Classes
Note: You can use the DartPad online @ https://dartpad.dev/ to play around with Dart. You
can also get the Dart SDK @ https://dart.dev/get-dart

Variables
● Similar to Java/C++/JS
● Very easy to learn
● Dart supports data types
such as int, double, String,
bool, List, Set, Map, etc
● Declared using ‘var’ keyword
● Constants are declared using
‘const’ or ‘final’ keyword
● Comments - //
var name = "Dart"; // String
var year = 2024; // int
const pi = 3.14; // double constant
var planets = ['Mercury', 'Venus', 'Earth', 'Mars']; // List
var path = {
'planet': 'Earth',
'index': 2,
'isHabitable': true
}; // Map

Conditionals
● if statement
● if..else statement
● if..elif..else statement
● switch..case statement
if (num > 0) {
print('$num is positive');
} else if (num < 0) {
print('$num is negative');
} else {
print('$num is neither positive nor negative');
}
switch (fruit) {
case 'apple':
print('Selected fruit is apple');
break;
case 'banana':
print('Selected fruit is banana');
break;
default:
print('Unknown fruit');
}

Control Flow
● Loops
● for loop
● while loop
● do..while loop
for (int i = 0; i < 5; i++) {
print('Count: $i');
}
while (count < 5) {
print('Count: $count');
count++;
}
do {
print('Count: $count');
count++;
} while (count < 5);

Functions
Syntax:
<return_type> <function_name>([<param1>, <param2>,..]){
<body of function>
}
main() - entry point for the execution of dart program. Return type is always void
for main() function.
int add(int a, int b) {
return a + b;
}
void main() {
var result = add(5,10);
print("$result");
}

Classes
Syntax:
class <class_name>{
<body of class>
}
● Constructor of class - no return type, same name as the class.
● Object is created with the help of ‘new’ keyword.
● ‘this’ keyword is used to refer to the current instance of the class.
● Classes can be imported in other dart files using the ‘import’ keyword.
● Dart classes supports many types of inheritance.
● Classes can be extended (inherited) by using ‘extends’ keyword.
● Mainly Dart classes in Flutter extends from Stateless and Stateful classes.

Classes
class Person {
// Properties
String name;
int age;
// Constructor
Person(String name, int age) {
this.name = name;
this.age = age;
}
// Function within the class
void printDetails() {
print('Name: $name, Age: $age');
}
}
void main() {
// Create an object of the Person class
Person person1 = new Person('John',
25);
// Call the function on the object
person1.printDetails();
}

Stateless vs
Stateful Widgets

Stateless and Stateful Widgets
In Flutter, there are 2 kinds of widgets - Stateless and Stateful widgets.
● Stateless widgets are immutable, meaning their properties cannot change once the
widget is built.
● Used in UI components, that do not require mutable state.
● The build() method should be overridden for a stateless widget.
● Stateful widgets are mutable, meaning they can maintain and update their internal
state during their lifetime.
● Used in UI components that need to change dynamically based on user interaction
● The createState() should be overridden for a stateful widget.
● The widget should implement build() and setState() methods.

Stateless Widget
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
...
}
}

Stateful Widget
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
void _incrementCounter() {
setState(() {
...
});
}
@override
Widget build(BuildContext context) {
...
}
}

GDSC-FlutterBasics.pdf

Recommended

Recommended

More Related Content

Similar to GDSC-FlutterBasics.pdf

Similar to GDSC-FlutterBasics.pdf (20)

Recently uploaded

Recently uploaded (20)

GDSC-FlutterBasics.pdf