Introduction To Flutter Framework.......pptx

Flutter Framework
By
Hiran D. A. Walawage
CEO, Co-Founder
Efito Solutions (Pvt) Ltd
hiran123@live.com
0711904976

What is Flutter ?
 Flutter is an open-source UI software development kit created by Google.
 It is used to develop applications for Android, iOS, Windows, Mac, Linux and
the web.
 Flutter uses Dart language.
 100+ contributions from the open source community.

So what is Flutter ?
 Flutter uses hybrid approach.
 Flutter is Google’s UI toolkit for building beautiful, natively compiled
applications for mobile, web, and desktop from a single codebase.

Who is Flutter for?
 Designers converge on a brand-driven experience on Android and iOS.
 Prototypers enjoy a high-fidelity and fast way to build working prototypes.
 Developers benefit from fantastic developer tools, an easy-to-use
language, a rich set of widgets and great IDE support. Flutter frees up
valuable time for working on features and delightful experiences.

Diagram the Layout
Look for rows and columns Is there a grid?
Any overlapping elements?
Do we need tabs?
Padding, alignment or borders needed?

HTML/CSS Analogs for Flutter
<div class="greybox">
Lorem ipsum
</div>
.greybox {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Georgia;
}
var container = new Container( // grey box
child: new Text(
"Lorem ipsum",
style: new TextStyle(
fontSize: 24.0
fontWeight: FontWeight.w900,
fontFamily: "Georgia",
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);

$ flutter doctor
Checks your environment and displays a report to
the terminal window
$ flutter upgrade
Updates both the Flutter SDK and your packages

pubspec.yaml
App configurations & dependency libraries
name: flutter_project
description: An amazing Flutter project using Firebase Auth
dependencies:
flutter:
sdk: flutter
firebase_auth: "^0.2.5"

HOT RELOAD
Injecting updated source code files into the running Dart
VM
Stateful
App state is retained after a reload.
Quickly iterate on a screen deeply nested in your app

What makes Flutter unique?
 Compiles to native code (ARM Binary Code)
 No reliance on OEM widgets
 No bridge needed
 Structural Repainting

What language is Flutter built with?

 Let’s create first Flutter project
flutter create project_name

Goodbye, global layout system
new Center(
child: new Text('Centered Text', style: textStyle),
)
Local layouts: Every Widget defines it’s own layout. No need to tell the parent
that it’s children are supposed to be centered.

What are Widgets in Flutter?
Everything in flutter consist of Widgets including but not limited to,
 Visible Screen
 Text
 Button
 Material Design
 Application Bar
 As well as invisible container
 Layout

Stateful Widget vs. Stateless Widget
A single StatelessWidget can build
in many different BuildeContexts.
A StatefulWidget creates a new
State object for each BuildContext

Stateless Widget
We create a Stateless widget by extending our class from StatelessWidget and
a bare minimum implementation shall look like

Stateless Widget are immutable once
drawn
The build(...) function of the StateLessWidget is called only ONCE and no
amount of changes in any Variable(s), Value(s) or Event(s) can call it again.
To redraw the StatelessWidget, we need to create a new instance of the
Widget.

Stateful Widget
Stateful Widgets are mutable and can be drawn multiple times within its
lifetime.

The End.
Next Week
 Let’s dive into widgets & services on Flutter development…

Introduction To Flutter Framework.......pptx

More Related Content

Similar to Introduction To Flutter Framework.......pptx

Recently uploaded

Introduction To Flutter Framework.......pptx