Flutter

Creating Your First Project

Dr. Haitham Al-Sinani
Agenda
• Introduction
• Assumptions: The Flutter Environment
• Running Android Studio
• Creating New Flutter Project
• Creating New Emulator
• Running the Flutter Project
• Explaining the Code!
• Changing the Primary Color
• Conclusions
• References
Introduction

• These slides offer a straightforward, image-

assisted guide to help you create and run your
very first Flutter project, one step at a time.
• Additionally, we offer explanations and ongoing
comments as needed, all aimed at facilitating
your understanding of the code underpinning
your Flutter project.
• By the end of these slides, you'll be equipped to
create a new Flutter project, grasp its default
structure, and customize the primary color.
Assumptions: The Flutter Environment
• We assume that you previously downloaded and installed both Android Studio and Flutter.
• We also assume that you have already properly configured the Flutter environment on your Windows
or MacOS device.
• Please execute the "flutter doctor" command to ensure that everything is configured correctly.
Agenda
• Introduction
• Assumptions: The Flutter Environment
• Running Android Studio
• Creating New Flutter Project
• Creating New Emulator
• Running the Flutter Project
• Explaining the Code!
• Changing the Primary Color
• Conclusions
• References
Running Android Studio
• Run Android Studio.
• Click on “New Flutter Project”.
Flutter SDK Path
• Ensure that the Flutter SDK Path is set up correctly.
• To confirm, click on "Flutter" and ensure it directs to the correct location where you have previously
unpacked the Flutter SDK. [Note that this should be automatically done if you've already installed the
Flutter SDK; if not, navigate to and select the Flutter SDK directory manually.]
New Flutter Project
• Fill-in the required
details, including:
– setting the project
name, location,
description and
domain;
– choosing the
“Application”
project type; and
– selecting the
platforms that your
project is designed
to run on.
• Click on Create.
Create New Directory

• If you encounter a prompt to confirm the creation of a

new project directory, please choose "Create."
New Project Created!

• Congratulations! Your first flutter project is now created!

Agenda
• Introduction
• Assumptions: The Flutter Environment
• Running Android Studio
• Creating New Flutter Project
• Creating New Emulator
• Running the Flutter Project
• Explaining the Code!
• Changing the Primary Color
• Conclusions
• References
Emulators [1/4]
• To be able to run our project, we need either a
physical or virtual device.
• Let’s create a virtual device (an emulator).
– Click on the “Device Manager”, as shown here.
– Then, click on “Create Device”, as shown
below.
Emulators [2/4]

• Select your
preferred
virtual
phone.
• Click “Next”.
Emulators [3/4]

• Select a system
image, (e.g.
“S” – API 31).
• Click “Next”.
Emulators [4/4]

• Please wait until

the download
and installation
process has fully
completed.
• Finally, click
“Finish”.
Agenda
• Introduction
• Assumptions: The Flutter Environment
• Running Android Studio
• Creating New Flutter Project
• Creating New Emulator
• Running the Flutter Project
• Explaining the Code!
• Changing the Primary Color
• Conclusions
• References
Running the Project
• Choose a virtual
device to run
your project on. If
you don't have
one installed, you
can create a new
one.
• Run your project,
e.g. by clicking
the green arrow.
Emulators View Mode
• Congratulations! Your project is now up and running.
• As shown below, you can change the view mode of the
emulator, by following these steps: right-click on the Emulator
tab, choose View Mode, and then select your preferred view,
such as Float.
Agenda
• Introduction
• Assumptions: The Flutter Environment
• Running Android Studio
• Creating New Flutter Project
• Creating New Emulator
• Running the Flutter Project
• Explaining the Code!
• Changing the Primary Color
• Conclusions
• References
The main.dart file
• The `main.dart` file serves as the primary entry point for a Flutter application. When you run a Flutter app, it
starts by executing the code within `main.dart`.
• Contained within this file is the essential main method, which is the starting point of the app's execution,
accompanied by three interrelated classes: MyApp, MyHomePage, and _MyHomePageState.
• While this structure is commonly used in many Flutter projects, it's worth noting that the content and
organization of the main.dart file can be tailored to suit specific application needs.
The main.dart file: The import statement
• The import statement, shown below, imports the Flutter Material
Design library, which provides a rich set of pre-designed and
customizable UI elements.
The main.dart file: The main Function
• Every Flutter app must have a main function. This is where the execution of the app begins.
• Inside this function, the runApp method is called to inflate the root widget of the app. Here, an
instance of the MyApp widget is being created.
• The const keyword indicates that this widget instance is immutable (unchangeable), meaning
once it's created, it can't be changed. Using const for widgets that don't change can improve
performance.
• In summary, the main function initializes the Flutter app and sets MyApp as its starting widget.
When the app is launched, the UI described by the MyApp widget will be the first thing users
see.
Widgets in Flutter
• In Flutter, everything is a widget. Whether it's a button, text, image,
layout, or even padding, it's represented as a widget.
• Think of widgets as the building blocks you use to construct your
app.
• Classes that extend either StatelessWidget or StatefulWidget are
also widgets. These are used to describe a part of the UI.
• In a nutshell, widgets are the core building blocks used to define
how the application looks and feels. They simplify complex UI design
by breaking it down into manageable, composable pieces, resulting
in a modular and reusable codebase.
The MyApp Widget
• MyApp is a stateless widget,
meaning it describes part of the
user interface which is immutable
(unchangeable).
• MyApp’s main responsibility in this
code is to set up some app-wide
configurations.
– title: This is just a descriptive
label for the app used by the
OS or within some widgets.
– theme: This sets a global
theme for the app,
determining colors, fonts, etc.
– home: This property
designates MyHomePage as
the primary user interface of
the app, passing it the title
'Flutter Demo Haitham Page'."
The MyHomePage Widget
• MyHomePage is a
stateful widget,
meaning that it can
have mutable
(changeable) state that
can change during its
lifecycle.
• This widget receives a
title parameter from
MyApp and defines its
mutable state through
_MyHomePageState.
The _MyHomePageState Widget [1/2]
• The _MyHomePageState class maintains the
mutable state for MyHomePage.
– _counter: A variable that keeps track of how
many times a button has been pressed.
– The _incrementCounter method increments
the _counter variable by 1.
– The setState method is crucial in Flutter: it
indicates that the state of the widget has
changed, prompting the framework to
rebuild the widget with the new state.
• Notice that the _MyHomePageState class starts
with an underscore, which makes it private.
Consequently, this class cannot be accessed or
instantiated from other Dart files (libraries) in the
project. This privacy convention is a way to
encapsulate and protect certain parts of the code
from unintended external access.
• The pattern of having a private state class
(_MyHomePageState) associated with a
StatefulWidget (MyHomePage) is standard in
Flutter.
The _MyHomePageState Widget [2/2]
• The build method describes the UI for this state.
• It returns a Scaffold, which is a basic visual layout
structure of the Flutter app.
– AppBar: This part of the Scaffold provides a
top bar, often used for navigation or
displaying a title. Here, the title for the
AppBar is taken from the parent
MyHomePage widget.
– Body: The body of the Scaffold is set to a
Center widget, which centers its child widget.
• Column: Inside the Center, there's a Column
widget, which arranges its children vertically.
– The first child is a Text widget displaying a static
message.
– The second child displays the _counter variable,
showing how many times the button has been
pressed.
The FloatingActionButton Widget
• The floatingActionButton, which is part of Scaffold and located at the
bottom-right by default, will increment the counter when pressed. It uses
the _incrementCounter method as its onPressed callback.
• In summary, the _MyHomePageState class defines the mutable state for
the MyHomePage widget, mainly revolving around the _counter variable.
The UI consists of an AppBar showing a title, a centered message about
button presses, and a floating action button to increment the counter.
Agenda
• Introduction
• Assumptions: The Flutter Environment
• Running Android Studio
• Creating New Flutter Project
• Creating New Emulator
• Running the Flutter Project
• Explaining the Code!
• Changing the Primary Color
• Conclusions
• References
Changing the Primary Color
• To change the primary color of your Flutter app,
replace Colors.blue with the color you prefer, e.g.
purple (see below).
• After making this change and hot-reloading your
app ( ), the primary color of your app should be
red.
• You can replace Colors.purple with any other color
from the Colors class or define your custom color if
needed.
Agenda
• Introduction
• Assumptions: The Flutter Environment
• Running Android Studio
• Creating New Flutter Project
• Creating New Emulator
• Running the Flutter Project
• Explaining the Code!
• Changing the Primary Color
• Conclusions
• References
Conclusions

• Within these slides, we presented a clear,

visually-guided, sequential tutorial to assist
you in initiating and executing your inaugural
Flutter project.
• Furthermore, we provided clarifications and
continuous commentary as required, all with
the goal of enhancing your comprehension
of the code supporting your Flutter project.
• You should now be equipped to create a new
Flutter project, grasp its default structure,
and customize the primary color.
Agenda
• Introduction
• Assumptions: The Flutter Environment
• Running Android Studio
• Creating New Flutter Project
• Creating New Emulator
• Running the Flutter Project
• Explaining the Code!
• Changing the Primary Color
• Conclusions
• References
References
• Flutter Official Guidance & Documentation
• https://api.flutter.dev/flutter/painting/BoxD
ecoration-class.html
• Online Tutorials
• Google
• YouTube
Flutter
Creating Your First Project
Dr. Haitham Al-Sinani