Welcome to Flutter!

Flutter is an open-source UI toolkit by Google for building natively compiled

applications for mobile, web, and desktop from a single codebase. First
released in 2017 with a stable release in 2018, Flutter powers apps like
Google Pay, BMW, and eBay Motors, showcasing its versatility and reliability
in production environments.

This presentation will provide an introduction to the Flutter framework,

highlighting its key benefits, architecture, and the basics of developing with
Flutter. We will also explore essential concepts like widgets, layout, and
packages, equipping you with the knowledge to start building your own Flutter
applications.
Why Flutter? Key Benefits
Cross-Platform Development
Write once, deploy to multiple platforms (iOS, Android, Web, Desktop).
iOS and Android share approximately 95% of the codebase.

Fast Development
Hot reload for quick UI iteration. Hot reload allows changes in code to
appear in under a second, without recompilation, significantly speeding
up the development process.

Expressive and Flexible UI

Rich set of customizable widgets. Flutter uses the Skia Graphics
Library for UI rendering at 60-120 FPS, ensuring smooth and fluid user
experiences.

Native Performance
Compiled to native ARM code using Dart. Dart is an object-oriented,
garbage-collected programming language, optimized for building
modern, high-performance apps.
Flutter Architecture: Layers
Framework Layer Engine Layer Platform Embedding Layer
Flutter's core widgets, rendering, and Core C/C++ engine responsible for Platform-specific code to access
animation libraries. Written in Dart, this rendering, networking, and input. Uses underlying OS features, such as
layer provides the foundation for building Skia for graphics rendering, the same accessing the camera or location
UIs with a rich set of pre-built graphics library used by Chrome and services. This layer allows Flutter to run
components and tools. Android, ensuring consistent and high- on iOS, Android, Web, and Desktop,
performance rendering across platforms. bridging the gap between the Flutter
framework and the native platform.
Widgets: The Building Blocks
of Flutter

StatelessWidget StatefulWidget Thousands of

Immutable widgets that Widgets that maintain Widgets
don't change their state that can change Flutter provides
state. Examples: Text, over time. Examples: thousands of pre-built
Icon, Image. These Checkbox, Slider, widgets, covering a
widgets are efficient for TextField. These wide range of UI
displaying static widgets are essential elements and
content that doesn't for creating interactive functionalities, allowing
require updates. UIs where user input or developers to quickly
data changes need to build complex and
be reflected. beautiful interfaces.
Layout in Flutter: Widget Trees
Container
1 Adds padding, margins, borders, and background color to its child widget, providing essential styling and
layout control.

Row/Column
2 Arranges child widgets horizontally or vertically, enabling flexible and responsive
layouts that adapt to different screen sizes and orientations.

Stack
3 Positions widgets on top of each other, allowing for complex UI
designs with overlapping elements and layered effects.

Flutter UIs are built using nested widget trees, where each widget is a node in the tree. Layout is driven by box constraints: min/max
width/height, ensuring that widgets are properly sized and positioned within their parent widgets.
Developing with Flutter: The Basics
Flutter SDK
Includes the Dart SDK, Flutter tools, and
Programming Language: Dart pre-built widgets, providing everything you IDE Support
need to start developing Flutter
A strongly-typed, object-oriented language Flutter is well-supported in popular IDEs
applications, from code editing and
that supports asynchronous programming like VS Code, Android Studio, and IntelliJ
debugging to UI design and testing.
(async/await) and compiles to native ARM IDEA. The Flutter extension provides code
code or JavaScript, making it ideal for completion, debugging, and hot reload,
building high-performance mobile and web streamlining the development process and
applications. improving productivity.

1 3
Your First Flutter App: "Hello
World"
main() function
1 The entry point of every Flutter app, where the execution
begins.

MaterialApp widget
2 Configures the basic properties of the application, such as
theme and home screen.

Scaffold widget
3 Provides the basic visual structure for the app, including app
bar, body, and floating action button.

Text widget
4 Displays text on the screen, allowing you to customize the font,
color, and style.

This minimal code example demonstrates the basic structure of a Flutter app
and shows how to run the app on an emulator or device, providing a quick and
easy way to get started with Flutter development.
Flutter Packages: Extending Functionality

http
Making network requests to fetch data from APIs and web services, enabling dynamic
1 content and real-time updates in your Flutter apps.

shared_preferences
2 Storing data locally on the device, such as user settings and preferences,
allowing for personalized user experiences and offline functionality.

provider
Implementing state management in Flutter apps, making it easier to
3
manage and share data across multiple widgets and screens, ensuring
consistent and predictable UI behavior.

flutter_svg
Displaying SVG images in Flutter apps, allowing you to use
4
vector graphics that scale without losing quality, ensuring crisp
and clear visuals on any screen size or resolution.

Packages are reusable code modules that extend Flutter's capabilities and are hosted on pub.dev, Flutter's package repository. Easily
add packages to your project using flutter pub add <package_name>.
Where to Learn More
Flutter Documentation
Comprehensive guides, tutorials, and API reference available at
flutter.dev, providing in-depth information about Flutter's features and
functionalities.

Flutter Codelabs
Guided, hands-on tutorials available at codelabs.developers.google.com,
allowing you to learn Flutter by building real-world applications and
solving practical problems.

YouTube Channels
Explore channels like Flutter, FilledStacks, and Reso Coder for video
tutorials, tips, and best practices on Flutter development, providing visual
and interactive learning experiences.

Online Courses
Enroll in courses on platforms like Udemy, Coursera, Educative.io, and
Udacity to gain structured knowledge and hands-on experience in Flutter
development, taught by industry experts and experienced instructors.
Get Started with Flutter
Today!
Flutter offers a powerful and versatile framework for building cross-platform
applications with native performance and expressive UIs. Its key benefits
include fast development, a rich set of widgets, and a vibrant community of
developers.

Now is the perfect time to explore Flutter and build your own apps. Take
advantage of the resources provided to further your learning and join the
growing community of Flutter developers. Flutter is a great choice for creating
beautiful and high-performance apps for mobile, web, and desktop platforms.

Thank you for attending this presentation! Do you have any questions?