Introduction to flutter

Introduction to Flutter
Developing a simple mobile app
By Wan Muzaffar Wan Hashim

Muzaffar
Founder of MDR-Tech, Co-founder of Anak2U
Worked with mobile industry since 2011
Different industry: M-Commerce, Newsfeed, Media Broadcasting, Food Delivery ,
Airline,Loyalty, Education.
2

Mobile App Development
● A mobile application is a software application designed to run on
smartphones, tablet computers and other mobile devices.
● Users on smartphones typically check the news, weather, email
or their social networks. They have a choice between the mobile
web version or a specially-created mobile app.
5

Mobile App Dev: Current State
Native Development Hybrid Development
● Android
● iOS
● Ionic
● React Native
● Flutter
● Native Script
● Xamarin

Mobile App
Types
● Native
○ Programmed using Swift/Objective C on the iPhone or
using Java/Kotlin on Android devices.
● Hybrid
○ Mix between these two types of mobile applications.
○ Normally based on web programming language, eg: HTML,
CSS, Javascript, Dart
○ Built once to be run on Android and iOS.
● Web Apps / Progressive Web Apps.
○ Web based.
Runs in the phone’s browser.
○ Can have native features based on HTML5
7

What is Flutter
Open source UI Framework by Google
Able to create iOS, Android and web application
using Dart
High performance, high fidelity, low latency, as it
renders the Native UI.
Use DART as main programming language
Open source / github.

About Dart
Dart is a programming language developed by
Google
Learning it isn’t hard if you have experience with
Java or JavaScript. You will quickly get it.
You can use dartpad as an online compiler of Dart
https://dartpad.dev/

Who uses Flutter
https://flutter.dev/showcase

Malaysia Google Trend (over 5 years)

Bridge gap between designer and developer - XD Flutter integration

Bridge gap between designer and developer - Supernova io

Setup your Editor
https://flutter.dev/docs/get-started/editor
You will need to configure an emulator after setting up the SDK.

Online Editor (Demo purposes - no setup)
https://codepen.io/pen/editor/flutter

Everything is a widget
You build widget upon widget.
Your screen, a section in a screen, a tiny little section is
also a Widget.
You create and customize your own widget.

Widget catalog
https://flutter.dev/docs/development/ui/widgets

The boilerplate code of an app - Scaffold
Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
body: Center(child: Text('Hello World')),
floatingActionButton: FloatingActionButton(
onPressed: () => {},
tooltip: 'Increment Counter',
child: const Icon(Icons.add),
),
);

Scaffold
A scaffold is a basic structure of an application having the following property by
default:
● appbar
● body
● floatingActionButton
● bottomNavigationBar
● drawer

Appbar
An app bar consists of a toolbar and
potentially other widgets,
For example, if you would like to add a
button on the left side you use leading and
actions on the right side.
You may change the property
backgroundColor to change the
background color of the AppBar.

Floating Action Button
A floating action button is a circular icon
button that hovers over content to promote
a primary action in the application
floatingActionButton:
FloatingActionButton(
onPressed: () {
// Add your onPressed code
here!
},
child: Icon(Icons.navigation),
backgroundColor:
Colors.green,

Body
This is where you build the content of your application.

Widgets for layouting
We will discover the widgets that are used to position items within a page. Here
are some important/main widgets:
● Container
● Center
● Column
● Row
● SingleChildScrollView

Container
Center(
child: Container(
margin: EdgeInsets.all(10.0),
color: Colors.amber[600],
width: 48.0,
height: 48.0,
padding:EdgeInsets.all(10.0)
),
A container is a box! You can specify the width, height, color, padding and margin.
In the below example, EdgeInsets.all means all direction (top, bottom, left, right)

Center
A widget that centers its child within itself.
Center(child: Text('Hello World')),

Row
A widget that displays its children in a horizontal array.
Row(
children: <Widget>[
Expanded(
child: Text('Deliver features faster', textAlign:
TextAlign.center),
),
Expanded(
child: Text('Craft beautiful UIs', textAlign:
TextAlign.center),
),
Expanded(
child: FittedBox(
fit: BoxFit.contain,
child: const FlutterLogo(),
),
),
],

Column
A widget that displays its children in a vertical
array.
Column(
children: <Widget>[
Text('Deliver features faster'),
Text('Craft beautiful UIs'),
Expanded(
child: FittedBox(
fit: BoxFit.contain,
child: const FlutterLogo(),
),
),
],
)

SingleScrollView
A box which allows a single widget to be scrolled.
You will use this when you have a single box that will normally be
entirely visible, for example a clock face in a time picker, but you need
to make sure it can be scrolled if the container gets too small in one
axis

Visible widget in Flutter
Once you know how to position items on a page, we will see some of the widgets
that you can use in your application. Here are some important/main widgets:
● Text
● Image
● Button
● Icon
● Slider

Text
Text(
'Hello World',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold,
color:Colors.red),
),
This widget is used to displays a text with
single style.
You might need to use TextStyle widget as
well with this widget to add styling to the
text, for example to add color, set to bold

Image
Image(
image:
NetworkImage('https://flutter.github.io/assets-for-api
-docs/assets/widgets/owl.jpg'),
)
To show an image. You may show an image
from:
● Downloaded from a URL
● Stored locally in assets folder

Icon
Icon(
Icons.audiotrack,
color: Colors.green,
size: 30.0,
),
As per its name, an icon is a widget that is
predefined, and can be used directly within
your application.
You may refer to Icon documentation, to see
all available icon ready to be used in your
application
https://api.flutter.dev/flutter/material/Icons-class.html

RaisedButton
RaisedButton(
child: Text('Color Changed'),
color: Colors.green,
onPressed: () {
print(“Hello World”)},
),
A raised button, follows Material
design principle is a button that
raises slightly, configurable via
elevation property.
You will need to declare what
should happen when the button is
pressed via it’s onPress property.
Other type of button includes
FlatButton

Slider
Slider(
value: _value.toDouble(),
min: 1.0,
max: 10.0,
onChanged: (double newValue) {
setState(() {
_value = newValue.round();
});
},
A slider can be used to select
from either a continuous or a
discrete set of values.
We will use onChanged property
to update the value of item, once
the value of slider changed.

Stateless Widget
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container()
}
}
Stateless Widget is a widget that
is immutable.
Stateless widgets cannot change
their state during the runtime of
the app, which means the
widgets cannot be redrawn while
the app is in action.

Stateful Widget
class MyWidget extends StatefulWidget {
@override
_MyWidget createState() => _MyWidget();
}
class _MyWidget extends State<MyWidget>{
@override
Widget build(BuildContext context){
return Container();
}
}
Stateful Widget is a widget that
stores variable (state).
This widget will rebuild itself
whenever there is a change of its
state (variable)
For example when user interact
with a button, you might change
the state/variable within the
widget => Widget will be
refreshed.

Demo
We will create a simple BMI calculator app that will calculate BMI based on height
and weight entered by user.
● An application using stateful widget since we are storing height, weight and
bmi
● Create the structure using scafffold
● Add Scrollview and container
● The container will contain a Column with:
○ Image (logo of our app)
○ App title and subtitle
● Two containers containing slider for user to choose height and weight
● Button when the button is pressed you will do the BMI calculation

BMI Calculator
Full source code can be found here: https://codepen.io/wanmuz86/pen/LYpBGej

Path to learn to build mobile app
● How to create UI element (focus on one page first)
● Navigation, multiple page = Stack, Tab, Drawer
● Passing data from one page to another page
● Retrieving data from Internet
● Storing data in local storage/Shared Preference
● Use device features : Camera, Geolocation, Social Sharing, Photo Library
● Improve architecture
● Finetune - Localization
Create a weather app using API from Open Weather that will show weather based
on Geolocation

Contact me
The Moose Academy
Common Room Bangi
Wan Muzaffar Wan Hashim (LinkedIn)

Notes
During the QnA Session I mistakenly quote price for Apple is 99USD per month, it
is actually 99USD per year.
iOS : 99 USD per year - Need a MAC or Rent macbook on cloud ->
Apple Developer Account
Android - 25 USD per life time -> PC or MAC -> Google Developer
Account

Introduction to flutter

More Related Content

What's hot (20)

Similar to Introduction to flutter (20)

Recently uploaded (20)

Introduction to flutter