Chapter 3

Basics of Flutter and Dart Programming language

3.1 Introduction to Dart Programming Language
Dart is a programming language developed by Google, first introduced in October 2011 to address
performance issues in JavaScript and offer a viable alternative. Dart's syntax is influenced by C-style
languages like C++, Java, and JavaScript, making it familiar and accessible to developers with a
background in these languages. The language became production-ready with the release of Dart 1.0 in
November 2013. Over the years, Dart has evolved significantly. In 2015, Dart 1.11 introduced "Strong
Mode" for enhanced type safety and performance. The real turning point came in 2017 when Google
launched Flutter, a UI framework built on Dart, which substantially increased its popularity. Dart 2.0
was released in August 2018, bringing with it improved performance, a more robust type system, and
enhanced developer tools. In 2021, Dart 2.12 introduced sound null safety, further solidifying its
reliability by making null safety a core part of the language and reducing runtime errors. These milestones
showcase Dart's continuous evolution and its growing significance in the world of programming.
Basic of dart program
In every Dart program, there must be at least one function named main(), which serves as the entry point
for the application. This is where the execution of the program begins. The main() function in Dart is
similar to the main() functions in other programming languages such as C, C++, and Java, providing a
familiar structure for developers transitioning to Dart.

The above code show he sample dart program to print text Hello, CS IT SE!
Dart comment
Dart supports single-line comments, which start with //, and multi-line comments, enclosed within /* and
*/, providing flexibility in documenting different parts of the code.

COMPILED BY TADESSE SHEFERA 1

Dart datatypes
Data types are used to define the type of data that variables can hold. Here are the built-in data types in
Dart.

➢ Numbers
int represents integer values, which are whole numbers without a decimal point. Example: 7, 5, -10.
double represents floating-point numbers, which are numbers that can have a fractional part. Example:
3.14, -2.7, 0.0.
➢ Strings
String represents a sequence of characters. Strings are used to store text. Example: "Hello, Dart!".
➢ Booleans
bool represents a Boolean value, which can be either true or false.
➢ Lists
List represents an ordered collection of items, also known as an array in other languages.
Example: List<String> fruits = ['Apple', 'Banana', 'Cherry'];.
➢ Sets
Set represents a collection of unique items, meaning no duplicate values are allowed.
Example: Set<int> numbers = {1, 2, 3, 4, 5};
➢ Records
Record introduced in Dart 3.0; records are a way to group multiple related values without creating a full
class. They are simple data structures. Example: var record = (name: 'Alice', age: 30);.
➢ Maps
Map: Represents a collection of key-value pairs, where each key is unique. Maps are useful for storing
associative arrays or dictionaries.

COMPILED BY TADESSE SHEFERA 2

Example: Map<String, int> scores = {'Alice': 95, 'Bob': 85, 'Charlie': 80};.

void main() {
//sinle line comment
print('Hello, CS IT SE!');
/* multi line comment
hi cs
hi IT
hi SE
*/
//number
int num1 = 10;
print(num1);//10
double num2 = 10.50;
print(num2);//10.5
//string
String name = 'CS_IT_SE';
print(name);//CS_IT_SE
//boolean
bool isTrue = true;
print(isTrue);//true
//list
List<int> list = [1, 2, 3, 4, 5];
print(list);//[1, 2, 3, 4, 5]
List department = ['CS', 'IT', 'SE'];
print(department);//[CS, IT, SE]
//set
Set<int> intSet = {1, 2, 3, 4, 5};
print(intSet);//{1, 2, 3, 4, 5}

COMPILED BY TADESSE SHEFERA 3

 Set<String> departmentSet = {'CS', 'IT', 'SE', 'CS'};
print(departmentSet);//{CS, IT, SE}
//map
Map<String, String> map = {
'name': 'Tadesse',
'department': 'CS',
'year': '2021'
};
print(map);//{name: Tadesse, department: CS, year: 2021}
}

Read https://dart.dev/language
<<Lab Task 2>>
3.2 Introduction to Flutter
Flutter is a mobile app development framework that enables developers to create high-quality, visually
appealing, and performant mobile applications for Android and iOS platforms. With Flutter, developers
can write code once and use it to build apps that look and feel native on multiple platforms. Flutter used
to develop cross-platform applications from a single codebase, meaning you can write one set of code
and deploy it to both iOS and Android devices. It uses the Dart programming language, which is known
for its fast performance and flexibility. The Flutter framework provides a rich set of pre-designed widgets
that allow developers to create beautiful and responsive user interfaces with ease.

Flutter, first introduced in 2015, and officially released in May 2017. Since its release, it has rapidly
gained popularity among developers for its ability to create high-quality, natively compiled applications
for mobile, web, and desktop from a single codebase. This versatile framework has continued to evolve,
driven by a robust community and support from Google, making it a go-to choose for cross-platform
development.
3.3 Why Flutter?
Flutter is not the only way for mobile application development. But at this time most developer like this
cross platform mobile application development. The reasons why it is selected are highlighted below.

COMPILED BY TADESSE SHEFERA 4

Cross-Platform Capability
Flutter allows developers to create applications from a single codebase that work seamlessly on both iOS
and Android, and it reducing development time and costs.
High Performance
The combination of Flutter's architecture and the Dart programming language ensures smooth app
performance, fast rendering, and quick load times.

Rich Set of Widgets

Flutter offers a wide array of customizable widgets that conform to the design languages of each platform,
allowing developers to create visually appealing and interactive user interfaces easily.
Hot Reload
This feature lets developers see changes in real-time without restarting the entire application, significantly
speeding up the development process and enhancing productivity.
Strong Community and Support
Backed by Google and supported by a large and active community, Flutter benefits from extensive
resources, regular updates, and a wealth of libraries and plugins.
Integration with Other Technologies
Flutter integrates well with other technologies and tools, making it flexible and versatile for various
project requirements. It supports the seamless incorporation of native functionality when needed.

3.4 Flutter project structure (lib, pubspec.yaml, assets, etc.)

COMPILED BY TADESSE SHEFERA 5

The above image show that the default flutter templet. This flutter is sample flutter project templet with
application name cs_it_sw. it contains folder or directories and files. Below is an explanation of each
directory and file in the structure and their usages.
dart_tool
Basically, you don’t interact with this directory, since it manages automatically dependencies and builds
caches. This directory contains tools and metadata used by the Dart SDK and Flutter.
.idea
It Contains project configuration files for IntelliJ-based IDEs (e.g., Android Studio). And it is Relevant
for IDE-specific settings like code style, breakpoints, and project modules.

COMPILED BY TADESSE SHEFERA 6

 android
This directory contain build.gradle to Build configuration for Android and MainActivity.kt/java for
entry point for the Android platform. It Contains native Android-specific files for building and running
the app on Android devices. it Modify if you need to integrate Android-specific functionalities.
assets
this director used to stores resources like images, fonts, JSON files, etc. And the assets must declare in
pubspec.yaml to use them in the app.
Ios
This directory contains Info.plist to Configuration file for app metadata and AppDelegate.swift for entry
point for the iOS platform. It contains native iOS-specific files for building and running the app on iOS
devices. It Modify for iOS-specific customizations, such as permissions.
lib
The directory that contain the main code for our flutter application. The main entry point since it contain
main.dart file that contain main() function. It used to Write all app logic, UI, and functionality here. You
can create additional subdirectories (e.g., screens, widgets, models) for organization.
linux
This directory contains native Linux-specific files for building the app on Linux platforms. It used to
modify for Linux-specific functionality, such as window properties.
macos
this directory contains native macOS-specific files for building the app on macOS platforms.it used to
for macOS-specific integrations.
test
This director contains unit and widget test files for the app. it used for test cases to ensure your app works
as expected. Example:
web
This directory contains web-specific files for running the Flutter app in a browser. The key file is
index.html which is the main HTML file for the web app. It used for Modify for web-specific settings,
such as metadata and scripts.

Windows
This directory contains native Windows-specific files for building the app on Windows platform. It
COMPILED BY TADESSE SHEFERA 7
 used for Modify for Windows-specific functionality.
.gitignore
It used for Specifying which files and directories Git should ignore. Add files (like build artifacts) that
shouldn't be version-controlled.
.metadata
Automatically generated and managed. Tracks metadata about the Flutter project (e.g., SDK version).
analysis_options.yaml
It customizes the Dart analyzer's behavior for linting and static code analysis. And add rules to enforce
coding standards.
pubspec.lock
It records the exact versions of dependencies used in the project. It automatically updated when pub get
is run.
pubspec.yaml
this file is used or configuration file for the Flutter project. it has key sections dependency which Lists
the packages used by the app and flutter which declares assets, fonts, etc. The pubspc.yaml used to
modify to add/remove packages or resources.
README.md
This file contains documentation about the project. And used for add details about the project, its setup,
and usage.

3.5 Flutter UI Architecture and Components

Flutter app runs in a VM that offer hot reload without full recompile. At release compile directly to
machine code (intel x64 or ARM, or js) Flutter SDK is written in dart and the Engine is in c++
Flutter has flexible layered architecture, which are independent and extensible. Every part of the
framework level is designed to be optional and replicable

COMPILED BY TADESSE SHEFERA 8

https://docs.flutter.dev/resources/architectural-overview
Embedder
➢ It is platform specific that provide an entry point, coordinate with the underlying OS.
➢ Using the embedder, Flutter code can be integrated into an existing application as a module.
➢ Flutter includes a number of embedders for common target platforms
Engine
➢ Written in c++ and supports the primitives necessary to support all Flutter applications.
➢ The engine is responsible for rasterizing composited scenes whenever a new frame needs to be
painted.
➢ It provides the low-level implementation of Flutter's core API, including graphics.
➢ It exposed to the Flutter framework through dart:ui which wraps the underlying C++ code in Dart
classes.

COMPILED BY TADESSE SHEFERA 9

Flutter framework

➢ provides a modern, reactive framework written in the Dart language.

➢ Basic foundational class and building block services such as animation, painting, and gestures are
the bottom layer
➢ The rendering layer provide abstraction for dealing with layout in which updates reflect the
change automatically
➢ The widget layer is composition abstraction and each render object in rendering layer has a
corresponding class in the widget layer

Anatomy of Flutter APP

Dart APP:
➢ Composes widgets into the desired UI, implements
business logic and it is owned by app developer
Framework:
➢ Provides higher-level API to build high-quality apps
(for example, widgets, hit-testing, gesture detection,
accessibility, text input).
Engine:
➢ Responsible for rasterizing composited scene and
Integrates with a specific platform using the
Engine's Embedder API.
Embedder:
➢ Coordinates with the underlying operating system
for access to services like rendering surfaces,
accessibility, and input.
➢ Manages the event loop and exposes platform-
specific API to integrate the Embedder into apps.
Runner:
➢ Part of app template generated by flutter create and
it Composes the pieces exposed by the platform-

COMPILED BY TADESSE SHEFERA 10

 specific API of the Embedder into an app package
runnable on the target platform.

3.5.1 Widgets
Flutter emphasizes widgets as a unit of composition. Widgets are the building blocks of a Flutter app's
user interface, and each widget is an immutable declaration of part of the user interface. Widgets form a
hierarchy based on composition. Each widget nests inside its parent and can receive context from the
parent.
Widget composition

COMPILED BY TADESSE SHEFERA 11

Widget state
➢ Flutter framework introduce two major classes of widget:
1. StatelessWideget
➢ This widget does not have any mutable state.
➢ It used for static content that does not change over time.
➢ Many built-in widgets are stateless, such as Padding, Text, and Icon.
➢ When you create your own widgets, you'll create Stateless widgets most of the time.
2. StatefulWideget
➢ A widget that maintains mutable state that can change during the widget's lifetime.
➢ Used for dynamic content that may change in response to user interactions or other factors.
➢ StatefulWidgets don't have a build method; instead, their user interface is built through their
State object.
➢ setState(): Method in State object to update the UI in a StatefulWidget.
Important widgets
➢ Container
➢ Text
➢ Scaffold
➢ AppBar
➢ Row and Column

COMPILED BY TADESSE SHEFERA 12

 ➢ ElevatedButton
➢ Image
➢ Icon
<<Lab Task 3 and 4>>

3.5.2 Navigation and Routes

Flutter provides a complete system for navigating between screens and handling deep links. Small
applications without complex deep linking can use Navigator. While apps with specific deep linking and
navigation requirements should also use the Router.
Using the Navigator

➢ The Navigator widget displays screens as a stack using the correct transition animations for the
target platform
➢ To navigate to a new screen, access the Navigator through the route's BuildContext and call
imperative methods such as push() or pop().
Using the Router

COMPILED BY TADESSE SHEFERA 13

➢ Flutter applications with advanced navigation and routing requirements should use a routing
package such as go_router.
➢ go_router can parse the route path and configure the Navigator whenever the app receives a
new deep link.
➢ It is declarative, they will always display the same screen(s) when a deep link is received.
3.5.3 Flutter App Lifecycle
1. createState()
➢ When the Framework is instructed to build a StatefulWidget, it immediately calls
createState()
2. Mounted is true
➢ All widget have this.mounted properties that check buildContext is assigned to state created
by createState().
3. initState()
➢ This is the first method called when the widget is created and it is called once and only once.
➢ It must call super.initState()
4. didChangeDependencies()
➢ This method is called immediately after initState on the first time the widget is built.
5. build()
➢ This method is called often. It is required, and it must return a Widget.
6. didUpdateWidget(Widget oldWidget)
➢ If the parent widget changes and has to rebuild this widget

COMPILED BY TADESSE SHEFERA 14

7. setState()
➢ Its used to notify the framework that data has changed
8. deactivate()
➢ Deactivate is called when State is removed from the tree, but it might be reinserted before
the current frame change is finished.
9. dispose()
➢ dispose() is called when the State object is removed, which is permanent. This method is
where you should unsubscribe and cancel all animations, streams, etc.
10. mounted is false
➢ The state object can never remount, and an error is thrown is setState is called.

COMPILED BY TADESSE SHEFERA 15