Scribd
Upload
4 views

Intro to Flutter

Flutter is a Google mobile SDK/UI framework that enables developers to create native applications for both Android and iOS using a single codebase. It is open-source, free, and utilizes the Dart programming language, providing high productivity, exceptional quality, and improved performance. The framework consists of key components like the Flutter engine, foundation library, and design-specific widgets, with a focus on both stateless and stateful widgets for building user interfaces.

Uploaded by

sultanimay599
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

Intro to Flutter

Flutter is a Google mobile SDK/UI framework that enables developers to create native applications for both Android and iOS using a single codebase. It is open-source, free, and utilizes the Dart programming language, providing high productivity, exceptional quality, and improved performance. The framework consists of key components like the Flutter engine, foundation library, and design-specific widgets, with a focus on both stateless and stateful widgets for building user interfaces.

Uploaded by

sultanimay599
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

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

You might also like