Module 1

Introduction to Flutter
Intended Learning Outcomes
At the end of the lesson, you should be able to:
1. Learn the basics of Flutter framework.
2. Install Flutter SDK and set up Android Studio to develop Flutter
based application,
3. Understand the architecture of Flutter framework
4. Develop a simple mobile application using Flutter framework.
What is Flutter?
• Flutter is an open source framework to create high quality, high
performance mobile applications across mobile operating systems -
Android and iOS.
• It provides a simple, powerful, efficient and easy to understand SDK
to write mobile application in Google’s own language, Dart.
Introduction
• There are many frameworks available to develop a mobile application.
Android provides a native framework based on Java language and iOS
provides a native framework based on Objective-C / Swift language.
• To develop an application supporting both the OSs, we need to code in two
different languages using two different frameworks. To help overcome this
complexity, there exists mobile frameworks supporting both OS.
• 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.
Setting Up for Flutter
Development
Flutter 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://docs.flutter.dev/get-started/install/windows and
download the latest Flutter SDK. As of Jan 2022, the version is 2.8.1 and the
file is flutter_windows_v2.8.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.
flutter doctor
Step 3 − Update the system path to include flutter bin directory
Click Search icon > Type edit the system environment> Click Environment Variables
In User variables for User > Click Path > Edit
Click New > Copy/paste the path of the flutter bin folder
Installation in Windows
Step 5 − Running the above command will analyze the system and
show its report as shown below
Installation in Windows
Step 6 − Install the latest Android SDK, if reported by flutter doctor
Step 7 − Install the latest Android Studio, if reported by flutter doctor. Download:
https://developer.android.com/studio
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.,
Open Android Studio.
Click File → Settings → Plugins.
Select the Flutter plugin and click Install.
Click Yes when prompted to install the Dart plugin.
Restart Android studio.
YouTube Video
• If you’re stuck, watch this video:
• https://www.youtube.com/watch?v=6VxMWJV8Mm4
The Anatomy of a Flutter App
Create an Android Virtual Device (AVD)
 Click Phone > Choose your
Click Create Device preferred Phone e.g Nexus 6P
Click Next

Select a System Image > Click

Download API 32
Click Next
Creating Simple Application in Android Studio
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, Projects>Click New Flutter
Project
Creating Simple Application in Android Studio
Step 3 − Browse your Flutter SDK path. Click Next.
Creating Simple Application in Android Studio
Step 4 − Provide other details.
Example:
Project name: firstapp
Project location: (where you want to save)
Description: Describe your app
Project Type: Application
Organization: com.yourname
*Leave other default settings
Step 5 – Click Finish
Project Structure The structure of the application and its
purpose is as follows −

Android Studio creates a fully working

flutter application with minimal
functionality.
Let us check the structure of the
application.
Various components of the structure of the
application are
• 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
• 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
Creating Simple Application in Android Studio
Step 6 – Run the App on the Emulator
Creating Simple Application in Android Studio
import 'package:flutter/material.dart';

Step 7 – Replace the dart void main() {

code in the lib/main.dart }
runApp(const MyApp());
file with the below code class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Demo App'),
),
body: Center(
child:
Text(
'Hello World',
)
),
)
);
}
}
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-5 − 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 6-11 − 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 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.
• Line 12 − MyApp returns Scaffold Widget.

• Scaffold is a top level widget next to MaterialApp widget, it is 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.
Adding an Image
• Create a new folder in your project.
Named it as images.

• Configure settings in pubspec.yaml

• Call the image

Adding font family
• Create a new folder in your project.
Named it as fonts.

• Copy and paste your preferred font.

Adding font family
• Configure pubspec.yaml and
add the font family

• Call the font-family

Basic widgets
Flutter comes with a suite of powerful basic
widgets, of which the following are commonly
used: Text
The Text widget lets you create a run of styled text within your application.
Row, Column
These flex widgets let you create flexible layouts in both the horizontal (Row)
and vertical (Column) directions. The design of these objects is based
on the web’s flexbox layout model.
Stack
Instead of being linearly oriented (either horizontally or vertically),
a Stack widget lets you place widgets on top of each other in paint
order. You can then use the Positioned widget on children of a Stack to
position them relative to the top, right, bottom, or left edge of the stack.
Stacks are based on the web’s absolute positioning layout model.
Container
The Container widget lets you create a rectangular visual element. A
container can be decorated with a BoxDecoration, such as a
background, a border, or a shadow. A Container can also have margins,
padding, and constraints applied to its size. In addition, a Container can
be transformed in three dimensional space using a matrix.
Lay out multiple widgets vertically and horizontally

• One of the most common layout patterns is to arrange widgets vertically or

horizontally. You can use a Row widget to arrange widgets horizontally, and
a Column widget to arrange widgets vertically.
• Row and Column are two of the most commonly used layout patterns.
• Row and Column each take a list of child widgets.
• A child widget can itself be a Row, Column, or other complex widget.
• You can specify how a Row or Column aligns its children, both vertically
and horizontally.
• You can stretch or constrain specific child widgets.
• You can specify how child widgets use the Row’s or Column’s available
space.
• To create a row or column in Flutter, you add a list of children widgets
to a Row or Column widget. In turn, each child can itself be a row or
column, and so on. The following example shows how it is possible to
nest rows or columns inside of rows or columns.
The left column’s widget tree nests rows and
columns.
Aligning widgets
You control how a row or
column aligns its children using
the mainAxisAlignment and
crossAxisAlignment properties.
For a row, the main axis runs
horizontally and the cross axis
runs vertically.
For a column, the main axis
runs vertically and the cross
axis runs horizontally.
https://docs.flutter.dev/development/ui/layout
https://docs.flutter.dev/development/ui/layout
Sizing widgets
When a layout is too large to fit a device, a yellow and black striped pattern appears along the affected edge.
Here is an example of a row that is too wide:
My Gem Stone App
Mobile App Requirements
• My Gem Stone App
• Create an that will
• Display an image (Gem image)
• Display a text (change the font family, font size,
color etc.)
• Change the default app icon
main.dart
pubspec.yaml
import 'package:flutter/material.dart';
name: mygemstone
void main() {
description: A new Flutter project.
runApp(const MyApp());
}
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
class MyApp extends StatelessWidget {
version: 1.0.0+1
const MyApp({Key? key}) : super(key: key);
environment:
@override
sdk: ">=2.15.1 <3.0.0"
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
dependencies:
flutter:
appBar: AppBar(
sdk: flutter
title: Text(
'My Gem Stone'
),
cupertino_icons: ^1.0.2
backgroundColor: Colors.blueGrey.shade900,
),
dev_dependencies:
body: Column(
flutter_test:
mainAxisAlignment: MainAxisAlignment.center,
sdk: flutter
children: <Widget>[
Text('Diamond',
style: TextStyle(
flutter_lints: ^1.0.0
color: Colors.blue.shade900,
fontSize: 40.0,
fontFamily: 'Parisienne',
flutter:
fontWeight: FontWeight.bold
uses-material-design: true
),
assets:
),
- images/
Image(image: AssetImage('images/gem.png'))
fonts:
],
- family: Parisienne
),
fonts:
),
- asset: fonts/Parisienne-Regular.ttf
);
}
}