Scribd
Upload
75 views15 pages

Flutter Basics

Flutter is an open-source UI toolkit for building natively compiled applications across mobile, web, and desktop platforms using a single codebase in Dart. Its architecture consists of three layers: the Framework, Engine, and Embedder, which work together to manage rendering, interactions, and platform services. The primary components of a Flutter app are widgets, which can be either stateless or stateful, and are essential for creating the user interface.

Uploaded by

Surya Dharshini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
75 views15 pages

Flutter Basics

Flutter is an open-source UI toolkit for building natively compiled applications across mobile, web, and desktop platforms using a single codebase in Dart. Its architecture consists of three layers: the Framework, Engine, and Embedder, which work together to manage rendering, interactions, and platform services. The primary components of a Flutter app are widgets, which can be either stateless or stateful, and are essential for creating the user interface.

Uploaded by

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

K.

Leelarani, AP-CSE
Kamaraj College of Engineering and
Technology
Flutter Basics

Topics:
•What is Flutter?
•Why Flutter?
•Flutter Architecture
•Widget
•Structure of Flutter App
What is Flutter

 Flutter is a UI toolkit for building fast, beautiful,
natively compiled applications for mobile, web,
and desktop with one programing language and
single codebase.
 It is free and open-source.
 Flutter apps use Dart programming language for
creating an app.
Why Flutter

Flutter Architecture
 Flutter's architecture, which is ingeniously


divided into three primary layers:

 Framework,

 Engine

 Embedder
Flutter Architecture


Flutter Architecture


Framework
Developed with the Dart programming language, it consists of a series of libraries
and layers that handle animations, interactions, rendering, among other components.

Engine
It is the core of the framework, mostly written in C++ and designed to be platform-
independent. It provides a low-level implementation of services handling everything from
rendering to managing connections, animations, and gesture recognition.

Embedder
The embedder coordinates with the host OS for access to different services the app might
need. Using the embedder, existing applications can be integrated as if they were modules.
Anatomy of an App


Anatomy of an App

Dart App: 
– Composes widgets into the desired UI.
– Implements business logic.
– Owned by the app developer.

Framework:
– Provides a higher-level API to build high-quality apps (e.g.,
widgets, hit-testing, gesture detection, accessibility, text input).
– Composites the app’s widget tree into a scene.
Anatomy of an App


Engine:
– Responsible for rasterizing composited scenes.
– Provides a low-level implementation of Flutter’s core APIs (e.g.,
graphics, text layout, Dart runtime).
– Exposes its functionality to the framework using the dart:ui API.
– Integrates with a specific platform using the Engine’s Embedder API.
Embedder:
– Coordinates with the underlying operating system for access to
services like rendering surfaces, accessibility, and input.
– Manages the event loop.
– Exposes a platform-specific API to integrate the Embedder into apps.
Anatomy of an App


Runner:
•Composes the pieces exposed by the platform-specific API of the
Embedder into an app package runnable on the target platform.

•Part of the app template generated by ‘flutter create’, owned by the


app developer.

» UI = f(state)
You have surely heard countless times that the UI is built to
reflect the application's state.
Widget


• The blocks that make up the UI in Flutter are called widgets.
• Widgets are the primary component of any flutter application.
It acts as a UI for the user to interact with the application.
Flutter Widget Types
1. Stateless Widget
2. Stateful Widget
Structure of Flutter App



You might also like