Intro to Flutter
CST 05206
Flutter
• Flutter is not a programming language (like JavaScript, for
example).
• It is a Google mobile SDK/UI framework that allows developers to
create native and reactive applications for Android and iOS devices.
• Developers build code that works on both platforms in a single
codebase.
• Flutter uses existing code and so is readily available to developers
around the world.
• It is the only mobile SDK framework that supports reactive styles
without the use of a JavaScript bridge.
Flutter
• The SDK is open-source and free, hosted in GitHub from
Google and the community, allowing developers to
experiment with and create powerful tracking applications.
• Flutter uses a single codebase, compiles directly to native
arm code, takes advantage of the GPU, and makes use of
the platform APIs and services.
Why use flutter
• High productivity
• Flutter comes with all the UI Widgets you need and is compatible with most IDEs
• Saves time
• Allows utilization of the same codebase for iOS and Android apps
• Exceptional Qality
• When used to create an Android app, it appears to be a standard Android app
• When used to create an iOS app, it appears to be a standard iOS app
• Improved performances
• Frames are rendered every 16ms at 60 frames per second (fps) and 120fps for capable
devices.
• Flutter codes runs natively, which provide impressive speed
• Free and Open
• Flutter and Dart are both open-source
Flutter Framework
The major components of Flutter include:
• Dart Platform
• Flutter engine
• Foundation library
• Design-specific widgets
• Flutter Development Tools(DevTools)
Dart Platform
• Flutter apps are written in Dart and make extensive use of the
language’s advanced features
• Flutter runs in the Dart virtual machine on Windows, macOS, and
Linux, which has a just-in-time execution engine
• Flutter uses Dart to create your user interface, removing the
need to use separate languages like Markup or visual designers.
Flutter Engine
• Flutter’s engine, which is mostly built in C++, uses Google’s
Skia
graphics package for low-level rendering
• It is available on GitHub at github.com/flutter/engine and
includes graphic rendering functionality as well as an interface
(through the Flutter core libraries).
• The engine also works with platform-specific SDKs, such as
those offered by Android and iOS.
Foundation Library
• The lowest-level utility classes and functions utilized by all other
levels of the Flutter framework are specified in this library.
• The Foundation library, written in Dart, provides basic classes
and functions which are used to construct applications using
Flutter, such as APIs to communicate with the engine.
Design-Specific Widgets
The Flutter framework has two sets of widgets that adhere to
different design styles:
• Material Design widgets, which use Google’s Material
Design design language, and
• Cupertino widgets, which employ Apple's iOS Human
Interface principles.
What is a Widget?
• The basic building block of a Flutter app.
• Defines both appearance and behavior.
• Placing the widgets together creates the widget tree.
Key Features:
• Declarative UI: Describe the UI in its current state, and Flutter
renders it.
• Immutable: Widgets cannot be modified; new widgets are
created for changes.
• Widget Tree: Widgets are nested in a hierarchical structure.
Widget
• Widgets are divided into two main types:
• Stateless Widgets:
• These are immutable and do not change their state during the lifetime of the
widget.
• They only build once and display static content.
• They are used when the values (state) do not change
• Example: Text, Icon, Container.
• Stateful Widgets:
• These widgets have a mutable state that can change over time, and when the
state changes, the widget rebuilds to reflect those changes.
• They are used when values (state) change.
• Example: TextField, Checkbox, ListView.
Widget
• Each stateless or stateful widget has a build method with a
BuildContext that handles the location of the widget in the
widget tree.
• The BuildContext objects are actually Element objects, an
instantiation of the Widget at a location in the tree.
Widgets
• Widgets with structuring elements such as a list, grid, text, and button
• Widgets with input elements such as a form, form fields, and keyboard listeners
• Widgets with styling elements such as font type, size, weight, color, border, and
shadow
• Widgets to lay out the UI such as row, column, stack, centering, and padding
• Widgets with interactive elements that respond to touch, gestures, dragging,
and dismissible
• Widgets with animation and motion elements such as hero animation, animated
container, animated crossfade, fade transition, rotation, scale, size, slide, and
opacity
• Widgets with elements like assets, images, and icons
• Widgets that can be nested together to create the UI needed
• Custom widgets you can create yourself
The StatelessWidget Lifecycle
• A StatelessWidget is built based on its own configuration
and does not change dynamically.
• The stateless widget is declared with one class
• The build (the UI portions) method of the stateless widget
can be called from three different scenarios.
• It can be called the first time the widget is created,
• When the widget’s parent changes, and
• When an InheritedWidget has changed
• Figure shows statelessWidget lifecycle
The StatelessWidget Lifecycle
• Example of statelessWidget base structure
The StatefulWidget Lifecycle
• A StatefulWidget is built based on its own configuration but can change
dynamically.
• For example,the screen displays an icon with a description, but values can change
based on the user’s interaction, like choosing a different icon or description.
• The stateful widget is declared with two classes, the StatefulWidget class
and the State class.
• The StatefulWidget class is rebuilt when the widget’s configuration
changes, but the State class can persist (remain), enhancing performance.
• The setState() method is called to notify the framework that this object
has changes, and the widget’s build method is calld (scheduled).
• The setState() method is used to set the new state values .
The StatefulWidget Lifecycle
• StatefulWidget base structure,
The StatefulWidget Lifecycle
• Figure below shows the StatefulWidget Lifecycle
The StatefulWidget Lifecycle
• You can override different portions of the StatefulWidget to
customize and manipulate data at different points of the widget
lifecycle.
• The build() method is used all of the time to build your UI.
• The core difference between a stateful and a stateless widget
though is that a stateless widget doesn’t automatically get re-
rendered by the Flutter core framework when its state changes,
whereas a stateful widget does.
• When the state of a stateful widget changes, regardless of what
causes the change, certain lifecycle events fire.
• Those trigger lifecycle event hook functions getting called, which
results, ultimately, in Flutter re-rendering the portion of the screen
where the widget resides
The StatefulWidget Lifecycle
• Most commonly used statefulWidget override
Widget tree and Element tree
• The Flutter framework uses the widgets as the
configurations for each element that is mounted (rendered)
on the screen.
• The mounted elements displayed on the screen create the
element tree.
• You now have two trees, the widget tree that has the
widget configurations and the element tree that represents
the rendered widgets on the screen
