Flutter 101 - Introduction and Architecture" is an illuminating journey into the realm of Flutter, a dynamic open-source framework for crafting native-quality mobile, web, and desktop apps with a unified codebase. This course offers a foundational understanding of Flutter's architecture, highlighting its capacity for cross-platform development. You'll grasp the significance of widgets, the core building blocks of Flutter's user interface, and discover how to design and tailor them for captivating app interfaces. Additionally, explore the vibrant Flutter ecosystem, encompassing libraries, packages, and tools, enhancing your ability to create powerful and visually appealing applications. This course serves as a crucial first step in mastering Flutter's potential.

1. Flutter 101 - Introduction
and Architecture
Jenish MS
Software Engineer
PRO India

2. Agenda
● What is Flutter?
● Why Flutter?
● Flutter Architecture
● Flutter Widget
● Demo

3. What is Flutter?
● Flutter is an open-source project developed by Google in 2017 and available for
free. 3.7.9 is the latest version of Flutter.
● Flutter is a UI Toolkit that helps developers build high performance, natively
compiled applications for mobile, web and desktop from single codebase.
● Flutter uses the Dart programming language, which is a modern language that is
easy to learn and use.
● Flutter provides a set of customizable widgets that can be used to build beautiful
responsive UIs.

4. Why Flutter?
● Cross-platform development
● Fast development (Hot reload)
● Customizable widgets
● High performance
● Large community
● Dart DevTools ( Inspector, Timeline, debugger, Logging)

5. Flutter vs React Native
Flutter React Native
Initial Release 2017 2015
Created By Google Facebook
Open Source Yes Yes
Programming Language Dart Javascript
Popularity (Github) 152k stars 109k stars
Documentation Clean and easy to follow Unclear
Performance Higher at 60fps animation standards Lower as it use JS bridge for initiating
interaction
Native Appearance Better as it has access to device core functionalities Less due to its dependency on third-
party
Popular App made BMW, Google Pay, Alibaba Group, Dream11, eBay,
etc...
Facebook Ads, Instagram, Walmart,
UberEats, Airbnb, etc..

6. Flutter Architecture
● Platform-specific Embedder
● Flutter Engine
● Flutter Framework

7. Platform-specific Embedder
● Flutter applications are packaged in the same way as any other native application.
● Embedder provides an entrypoint; coordinates with the underlying operating
system for access to service like rendering surfaces, accessibility, and input; and
manage event loop.
● The embedder is written in a language that is appropriate for the platform
○ Java and C++ for Android
○ Objective-C/Objective-C++ for iOS and macOS
○ C++ for Windows and Linux
● Flutter code can be integrate into existing application as a module.
● Flutter includes a number of embedders for common target platform.

8. Flutter Engine
● Flutter Engine is the core of flutter.
● Flutter engine is written in C++ and supports the primitives necessary to support
all Flutter applications.
● The engine is responsible for rasterizing composited scenes whenever a new
frame needs to be painted.
● Flutter Engine is available to the developer through dart:ui, which wraps C++
code in dart classes.
● It Provides the low-level implementation of Flutter Core API including graphics
(Skia), text layout, file and network I/O, Plugin architecture, Dart runtime and
compile toolchain

9. Flutter Framework
01 Foundation classes provide the services like animation, geasuture, and
painting.
02
In the rendering layer, we can build the render tree with renderable objects.
The render layer provides the layout if we make any modification with
renderable objects then it updates the render tree and layout.
03
The Widget layer allows to define of widget classes and combines them to
reuse. Most important is each render object in the render layer has a
corresponding class in the widget layer.
The top most layers are material and cupertino layer. These layers
provides the set of controls to implement Material and Cupertino
design language in widgets.
04

10. Anatomy of an app

11. Flutter Widget
Widgets are the building blocks of flutter apps. Every UI element in a Flutter app is a
widget, from buttons and textfields to entire screen. There are two types of widgets
Staless widget and Stateful widget.
Flutter’s widget-based architecture allows for fast and efficient app development.
Widgets can be easily composed and combined to create complex interfaces.
Flutter provides a rich set of built-in widgets that are optimized for both Android and
iOS platforms. These widgets follow Material Design guidelines for Android and
Cupertino guidelines for iOS.
Widgets in Flutter are declarative, meaning they describe the UI that should be
rendered rather than the code that should be executed to create it. This allows for
more efficient rendering and makes it easier to reason about the code.
Flutter's layout system uses a flexible box model to allow widgets to be positioned and
sized in various ways. This makes it easy to create responsive UIs that adapt to
different screen sizes and orientations.
05
04
03
02
01

12. Stateful Widget
Stateful widgets are a type of widget in Flutter that can change their internal state
during the lifetime of the widget.
Stateful widgets have two parts: a stateful widget class that extends the
StatefulWidget class, and a state class that extends the State class.
The state class is where the widget's mutable state is stored, and where any changes
to that state are made.
When a stateful widget's state changes, Flutter automatically rebuilds the widget and
its children to reflect the updated state.
Stateful widgets are useful for building complex user interfaces that require
interactivity, such as forms, animations, and games.
05
04
03
02
01

13. Stateless Widget
Stateless widgets are a type of widget in Flutter that don't have any mutable state.
Once a stateless widget is built, its appearance and behavior won't change.
Stateless widgets are useful for building simple UI elements that don't require
interactivity, such as text labels, icons, and images.
Stateless widgets are implemented as simple functions that return a widget tree,
rather than as classes with mutable state.
Stateless widgets are more efficient than stateful widgets because they don't need to
rebuild when their state changes. This can improve performance and reduce the risk
of bugs.
04
03
02
01

14. Widget Lifecycle Methods
● createState
● initState()
● didChangeDependencies()
● build()
● didUpdateWidget()
● setState()
● deactivate()
● dispose()

15. Widget Lifecycle Diagram

16. Widget Tree

17. DEMO

18. Q A

19. Thank you!
Jenish MS
LinkedIn @jenishms
GitHub @JenishMS
Twitter @JenishMS7