[go: up one dir, main page]

0% found this document useful (0 votes)
74 views18 pages

MD 102 Module 1 2

Flutter is an open-source UI toolkit that allows developers to build mobile applications from a single codebase to target both Android and iOS. This module provides an overview of Flutter, including its advantages like writing code once that runs on both platforms, high performance rendering, and features like hot reload. It also covers installing Flutter on Windows and MacOS which involves downloading the Flutter SDK, configuring environment variables, and ensuring requirements like the Android SDK are met.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
74 views18 pages

MD 102 Module 1 2

Flutter is an open-source UI toolkit that allows developers to build mobile applications from a single codebase to target both Android and iOS. This module provides an overview of Flutter, including its advantages like writing code once that runs on both platforms, high performance rendering, and features like hot reload. It also covers installing Flutter on Windows and MacOS which involves downloading the Flutter SDK, configuring environment variables, and ensuring requirements like the Android SDK are met.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

Introduction to Flutter Development

Introduction to Flutter Development


MODULE OVERVIEW

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


applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a
single codebase.

This module, you will learn basics of Flutter its advantages and features and different versions.

MODULE LEARNING OBJECTIVES

At the end of this module, students are expected to:


1. Learn the basics of Flutter including its advantages and features, and the framework.

LEARNING CONTENTS

I. Futter: An Overview

 Flutter – a simple and high performance framework based on Dart language,


provides high performance by rendering the UI directly in the operating system’s
canvas rather than through native framework.
 Flutter also offers many ready to use widgets (UI) to create a modern application.
These widgets are optimized for mobile environment and designing the application
using widgets is as simple as designing HTML.
 Flutter application is itself a widget. Flutter widgets also supports animations and
gestures. The application logic is based on reactive programming. Widget may
optionally have a state. By changing the state of the widget, Flutter will automatically
(reactive programming) compare the widget’s state (old and new) and render the
widget with only the necessary changes instead of re-rendering the whole widget.

 The first version of Flutter was known as codename "Sky" and ran on
the Android operating system. It was unveiled at the 2015 Dart developer
summit, with the stated intent of being able to render consistently at 120 frames per
second.
 On December 4, 2018, Flutter 1.0 was released at the Flutter Live event, denoting
the first "stable" version of the Framework.

Source: www.wikipedia.com
 On December 11, 2019, Flutter 1.12 was released at the Flutter Interactive event

PANGASINAN STATE UNIVERSITY 1


Introduction to Flutter Development

 On May 6, 2020, the Dart SDK in version 2.8 and the Flutter in version 1.17.0 were
released, where support was added to the Metal API, improving performance on iOS
devices (approximately 50%), new Material widgets, and new network tracking.

 On December 11, 2019, Flutter 1.12 was released at the Flutter Interactive event

 On May 6, 2020, the Dart SDK in version 2.8 and the Flutter in version 1.17.0 were
released, where support was added to the Metal API, improving performance on iOS
devices (approximately 50%), new Material widgets, and new network tracking.

I. 1. Features

Flutter comes with beautiful and customizable widgets for high performance and outstanding
mobile application. It fulfills all the custom needs and requirements. Besides these, Flutter
offers many more advantages as mentioned below:

 Dart has a large repository of software packages which lets you to extend the
capabilities of your application.
 Developers need to write just a single code base for both applications (both Android
and iOS platforms). Flutter may to be extended to other platform as well in the future.
 Flutter needs lesser testing. Because of its single code base, it is sufficient if we
write automated tests once for both the platforms.
 Flutter’s simplicity makes it a good candidate for fast development. Its
customization capability and extendibility makes it even more powerful.
 With Flutter, developers has full control over the widgets and its layout.
 Flutter offers great developer tools, with amazing hot reload.

I.2. Advantages

Flutter comes with beautiful and customizable widgets for high performance and outstanding
mobile application. It fulfills all the custom needs and requirements. Besides these, Flutter
offers many more advantages as mentioned below:

 Dart has a large repository of software packages which lets you to extend the
capabilities of your application.

 Developers need to write just a single code base for both applications (both
Android and iOS platforms). Flutter may to be extended to other platform as well in
the future.

 Flutter needs lesser testing. Because of its single code base, it is sufficient if we
write automated tests once for both the platforms.

 Flutter’s simplicity makes it a good candidate for fast development. Its


customization capability and extendibility makes it even more powerful.

 With Flutter, developers has full control over the widgets and its layout.

PANGASINAN STATE UNIVERSITY 2


Introduction to Flutter Development

 Flutter offers great developer tools, with amazing hot reload .

I.3. Disadvantages

Despite its many advantages, flutter has the following drawbacks in it:

 Since it is coded in Dart language, a developer needs to learn new language


(though it is easy to learn).

 Modern framework tries to separate logic and UI as much as possible but, in


Flutter, user interface and logic is intermixed. We can overcome this using smart
coding and using high level module to separate user interface and logic.

 Flutter is yet another framework to create mobile application. Developers are


having a hard time in choosing the right development tools in hugely populated
segment.

II. Flutter Installation

Installation in Windows

In this section, let us see how to install Flutter SDK and its requirement in a
windows system.

Step 1: Go to URL, https://flutter.dev/docs/get-started/install/windows and download


the latest Flutter SDK. As of April 2019, the version is 1.2.1 and the file is
flutter_windows_v1.2.1-stable.zip.
Step 2: Unzip the zip archive in a folder, say C:\flutter\
Step 3: Update the system path to include flutter bin directory.
Step 4: Flutter provides a tool, flutter doctor to check that all the requirement of
flutter development is met.

Step 5: Running the above command will analyze the system and show its report as
shown below:

PANGASINAN STATE UNIVERSITY 3


Introduction to Flutter Development

The report says that all development tools are available but the device is not connected.
We can fix this by connecting an android device through USB or starting an android
emulator.

Step 6: Install the latest Android SDK, if reported by flutter doctor


Step 7: Install the latest Android Studio, if reported by flutter doctor
Step 8: Start an android emulator or connect a real android device to the system.
Step 9: Install Flutter and Dart plugin for Android Studio. It provides startup template
to create new Flutter application, an option to run and debug Flutter
application in the Android studio itself, etc.,

Installation in Windows

To install Flutter on MacOS, you will have to follow the following steps:

Step 1: Go to URL, https://flutter.dev/docs/get-started/install/macos and download


latest Flutter SDK. As of April 2019, the version is 1.2.1 and the file is
flutter_macos_v1.2.1- stable.zip.
Step 2: Unzip the zip archive in a folder, say /path/to/flutter
Step 3: Update the system path to include flutter bin directory (in ~/.bashrc file).

Step 4: Enable the updated path in the current session using below command
and then verify it as well.

Flutter provides a tool, flutter doctor to check that all the requirement of flutter
development is met. It is similar to the Windows counterpart.
Step 5: Install latest XCode, if reported by flutter doctor
Step 6: Install latest Android SDK, if reported by flutter doctor
Step 7: Install latest Android Studio, if reported by flutter doctor
Step 8: Start an android emulator or connect a real android device to the system to
develop android application.
Step 9: Open iOS simulator or connect a real iPhone device to the system to
develop iOS application.
Step 10: Install Flutter and Dart plugin for Android
Studio. It provides the startup template to create a new Flutter application,
option to run and debug Flutter application in the Android studio itself, etc.

 Open Android Studio.


 Click Preferences > Plugins.
 Select the Flutter plugin and click Install.
 Click Yes when prompted to install the Dart plugin.
 Restart Android studio.

PANGASINAN STATE UNIVERSITY 4


Introduction to Flutter Development

III. Flutter Project using Android Studio

In this chapter, let us create a simple Flutter application to understand the basics of
creating a flutter application in the Android Studio.

Step 1: Open Android Studio

Step 2: Create Flutter Project. For this, click File -> New -> New Flutter Project

Step 3: Select Flutter Application. For this, select Flutter Application and click Next.

PANGASINAN STATE UNIVERSITY 5


Introduction to Flutter Development

Step 4: Configure the application as below and click Next.


 Project name: hello_app
 Flutter SDK Path:
 Project Location:
 Description: Flutter based hello world application

PANGASINAN STATE UNIVERSITY 6


Introduction to Flutter Development

Step 5:: Configure Project.

Set the company domain as flutterapp.tutorialspoint.com and click Finish

Step 6:: Enter Company domain.

Android Studio creates a fully working flutter application with minimal


functionality. Let us check the structure of the application and then, change
the code to do our task.

PANGASINAN STATE UNIVERSITY 7


Introduction to Flutter Development

The structure of the application and its purpose is as follows:

Various components of the structure of the application are explained here:

 android - Auto generated source code to create android application

 ios - Auto generated source code to create ios application

 lib - Main folder containing Dart code written using flutter framework

 lib/main.dart - Entry point of the Flutter application

 test - Folder containing Dart code to test the flutter application

 test/widget_test.dart - Sample code

 .gitignore - Git version control file

 .metadata - auto generated by the flutter tools

 .packages - auto generated to track the flutter packages

 .iml - project file used by Android studio

PANGASINAN STATE UNIVERSITY 8


Introduction to Flutter Development

 pubspec.yaml - Used by Pub, Flutter package manager

 pubspec.lock - Auto generated by the Flutter package manager, Pub

 README.md - Project description file written in Markdown format

Let us understand the dart code line by line.

 Line 1: imports the flutter package, material. The material is a flutter package to create user
interface according to the Material design guidelines specified by Android.

 Line 3: This is the entry point of the Flutter application. Calls runApp function and pass it an
object of MyApp class. The purpose of the runApp function is to attach the given widget to the
screen.

 Line 5 - 17: Widget is used to create UI in flutter framework. StatelessWidget is a widget,


which does not maintain any state of the widget. MyApp extends StatelessWidget and
overrides its build method. The purpose of the build

PANGASINAN STATE UNIVERSITY 9


Introduction to Flutter Development

method is to create a part of the UI of the application. Here, build method uses MaterialApp, a
widget to create the root level UI of the application. It has three properties - title, theme and home.

 title is the title of the application.

 theme is the theme of the widget. Here, we set blue as the overall color of the application
using ThemeData class and its property, primarySwatch.

 home is the inner UI of the application, which we set another widget, MyHomePage

Line 19 - 38: MyHomePage is same as MyApp except it returns Scaffold Widget. Scaffold is a
top level widget next to MaterialApp widget used to create UI conforming material design. It has
two important properties, appBar to show the header of the application and body to show the
actual content of the application. AppBar is another widget to render the header of the
application and we have used it in appBar property. In body property, we have used Center
widget, which centers it child widget. Text is the final and inner most widget to show the text
and it is displayed in the center of the screen.

Step 8: Now, run the application using, Run -> Run main.dart

PANGASINAN STATE UNIVERSITY 10


Introduction to Flutter Development

Step 9: Finally, the output of the application is as follows:

IV. Widgets

The core concept of the Flutter framework is In Flutter, Everything is a widget. Widgets are
basically user interface components used to create the user interface of the application.

In Flutter, the application is itself a widget. The application is the top- level widget and its UI is
build using one or more children (widgets), which again build using its children widgets. This
composability feature helps us to create a user interface of any complexity.

For example, the widget hierarchy of the hello world application (created in previous chapter)
is as specified in the following diagram:

PANGASINAN STATE UNIVERSITY 11


Introduction to Flutter Development

Here the following points are worth notable:

MyApp is the user created widget and it is build using the Flutter native widget, MaterialApp.

 MaterialApp has a home property to specify the user interface of the home page, which is
again a user created widget, MyHomePage.

 MyHomePage is build using another flutter native widget, Scaffold.

 Scaffold has two properties – body and appBar.

 body is used to specify its main user interface and appBar is used to specify its header user
interface.

 Header UI is build using flutter native widget, AppBar and Body UI is build using Center
widget.

 The Center widget has a property, Child, which refers the actual content and it is build
using Text widget.

PANGASINAN STATE UNIVERSITY 12


Introduction to Flutter Development

 Gestures

Flutter widgets support interaction through a special widget, GestureDetector.


GestureDetector is an invisible widget having the ability to capture user interactions such as
tapping, dragging, etc., of its child widget. Many native widgets of Flutter support interaction
through the use of GestureDetector. We can also incorporate interactive feature into the
existing widget by composing it with the GestureDetector widget. We will learn the gestures
separately in the upcoming chapters.

 Concept of State

Flutter widgets support State maintenance by providing a special widget, StatefulWidget.


Widget needs to be derived from StatefulWidget widget to support state maintenance and all
other widget should be derived from StatelessWidget. Flutter widgets are reactive in native.
This is similar to reactjs and StatefulWidget will be auto re- rendered whenever its internal
state is changed. The re-rendering is optimized by finding the difference between old and new
widget UI and rendering only the necessary changes.

 Layers

The most important concept of Flutter framework is that the framework is grouped into
multiple category in terms of complexity and clearly arranged in layers of decreasing
complexity. A layer is build using its immediate next level layer. The top most layer is widget
specific to Android and iOS. The next layer has all flutter native widgets. The next layer is
Rendering layer, which is low level renderer component and renders everything in the flutter
app. Layers goes down to core platform specific code.

The general overview of a layer in Flutter is specified in the below diagram:

The following points summarize the architecture of Flutter:

PANGASINAN STATE UNIVERSITY 13


Introduction to Flutter Development

 In Flutter, everything is a widget and a complex widget is composed of already existing


widgets.

 Interactive features can be incorporated whenever necessary using GestureDetector


widget.

 The state of a widget can be maintained whenever necessary using StatefulWidget widget.

 Flutter offers layered design so that any layer can be programmed depending on the
complexity of the task. We will discuss all these concepts in detail in the upcoming chapters

We will discuss all these concepts in detail in the upcoming chapters..

Dart is an open-source general-purpose programming language. It is originally developed by


Google. Dart is an object-oriented language with C-style syntax. It supports programming
concepts like interfaces, classes, unlike other programming languages Dart doesn’t support
arrays. Dart collections can be used to replicate data structures such as arrays, generics, and
optional typing.

The following code shows a simple Dart program:

 Variables and Data types

Variable is named storage location and Data types simply refers to the type and size
of data associated with variables and functions. Dart uses var keyword to declare the
variable. The syntax of var is defined below,

The final and const keyword are used to declare constants. They are defined as
below:

Dart language supports the following data types:

 Numbers: It is used to represent numeric literals – Integer and Double.

 Strings: It represents a sequence of characters. String values are specified in either


single or double quotes.

PANGASINAN STATE UNIVERSITY 14


Introduction to Flutter Development

 Booleans: Dart uses the bool keyword to represent Boolean values – true and
false.

 Lists and Maps: It is used to represent a collection of objects. A simple List can be
defined as below:

The list shown above produces [1,2,3,4,5] list.

Map can be defined as shown here:

 Dynamic: If the variable type is not defined, then its default type is dynamic. The
following example illustrates the dynamic type variable:

 Decision Making and Loops

A decision making block evaluates a condition before the instructions are executed.
Dart supports If, If..else and switch statements.

Loops are used to repeat a block of code until a specific condition is met. Dart
supports for, for..in , while and do..while loops.

Let us understand a simple example about the usage of control statements and
loops:

The above code prints the even numbers from 1 to 10.

PANGASINAN STATE UNIVERSITY 15


Introduction to Flutter Development

 Functions

A function is a group of statements that together performs a specific task. Let us look
into a simple function in Dart as shown here:

The above function adds two values and produces 7 as the output.

Dart is an object-oriented language. It supports object-oriented programming


features like classes, interfaces, etc

. A class is a blueprint for creating objects. A class definition includes the following:

 Fields

 Getters and setters

 Constructors

 Functions Now, let us create a simple class using the above definitions:

Now, let us create a simple class using the above definitions:

PANGASINAN STATE UNIVERSITY 16


Introduction to Flutter Development

LEARNING ACTIVITY

Self test:

Directions: Test your present knowledge about computer systems by selecting the option that
corresponds to the correct word or phrase that will complete the statement. Encircle the letter of the
correct answer.

1. Open-source UI software development kit created by Google.


A. Android B. Flutter C. Java D. C#

2. On___, Flutter 1.0 was released at the Flutter Live event

A. May 14, 2019 B. January 4, 2018 C.February 4, 2018 D. December 4, 2018

3. Flutter also offers many ready to use ______ to create a modern application.
A. Widget B. Flutter C. Tree D. Python

4. Flutter uses a new language called____.


A. Kotlin B. Dart C. C# D. Python

5. Folder containing Dart code to test the flutter application.


A. test B. .getdata C. README.md D. lib

6. Main folder containing Dart code written using flutter framework


A. test B. .getdata C. README.md D. lib

7. Project description file written in Markdown format


A. test B. .getdata C. README.md D. lib

8. Auto generated by the flutter tools.


A. .metadata B. ..packages C. ios D. .gitignore

9. Git version control file.


A. .metadata B. ..packages C. ios D. .gitignore

10. Project file used by Android studio


A.android B .iml C.packages D.lib

SUMMARY

Flutter – a simple and high performance framework based on Dart language, provides high
performance by rendering the UI directly in the operating system’s canvas rather than through
native framework.
The first version of Flutter was known as codename "Sky" and ran on the Android operating system.
It was unveiled at the 2015 Dart developer summit, with the stated intent of being able
to render consistently at 120 frames per second.

PANGASINAN STATE UNIVERSITY 17


Introduction to Flutter Development

Flutter’s simplicity makes it a good candidate for fast development. Its customization capability and
extendibility makes it even more powerful.

REFERENCES

Tutorials point. (2019). Flutter tutorials point simply learning ), pages 1-14

Online Reading Materials:


https://www.youtube.com/watch?v=fq4N0hgOWzU
https://www.youtube.com/watch?v=1ukSR1GRtMU
https://www.youtube.com/watch?v=FLQ-Vhw1NYQ
https://www.youtube.com/watch?v=TSIhiZ5jRB0
https://www.youtube.com/watch?v=C5lpPjoivaw

PANGASINAN STATE UNIVERSITY 18

You might also like