Maximiliano Firtman
@firt [Link]
Introduction to Flutter with Dart
[Link]/intro- utter
fi
fl
mobile+web developer & trainer
Let’s Start!
What we'll cover
Basics of Dart and Flutter Android Studio
Testing and Debugging User Interface
Screen Navigation Working with Data
Web Services Deploying Apps
Pre-requisites
[Link]/intro- utter
fi
fl
Questions?
Frontend Map
Native Clients Web / PWA
Frontend Map
Native Clients Web / PWA
Frontend Map
Native Clients Web / PWA
Official SDKs Cross-Platform SDKs
Frontend Map
Native Clients Web / PWA
Official SDKs Cross-Platform SDKs
Frontend Map
Native Clients Web / PWA
Official SDKs Cross-Platform SDKs
React Native Xamarin Flutter
Frontend Map
Native Clients Web / PWA
Official SDKs Cross-Platform SDKs
React Native Xamarin Flutter
Frontend Map
Native Clients Web / PWA
Official SDKs Cross-Platform SDKs
React Native Xamarin Flutter
Android Apple Platforms Windows
Frontend Map
Native Clients Web / PWA
Official SDKs Cross-Platform SDKs
React Native Xamarin Flutter
Android Apple Platforms Windows
Frontend Map
Native Clients Web / PWA
Official SDKs Cross-Platform SDKs
React Native Xamarin Flutter
Android Apple Platforms Windows
Our Project
•App from scratch
•Coffee Store
•Focus on Material Design
•Download assets and coding help
•By Google
•Open Source
•Statically typed language
•Type Inference
•Multi-platform
•Easy to Learn
•Concise - less ceremony
•Modern Ideas
•Null-safety
Originally for internal web apps
Original intention: replace JavaScript
Current intention: front-end apps,
AngularDart, and Flutter
Inspired by C, Java, JavaScript, Erlang,
Smalltalk, Swift/Kotlin (Dart 2.0)
Compiles to native, IL, JavaScript
We'll be using Dart 2.x
Play with it at [Link]
Every Dart app has a main function
Full OOP language with type inference
Null-safety is available as an
optional feature in Dart 2.12
It feels easy to understand
It has features from many languages:
- Extensions
- Mixins
- Futures (async programming)
When compiling to Web: remember the
engine is the JavaScript VM
Language Types
Developers write code in Then ship
Interpreted Languages Source Code
Intermediate Languages Bytecode
Compiled Languages Machine Code
Language Types
You write code in And then ship
Interpreted Languages Source Code .
Intermediate Languages Bytecode
DART Language Machine Code
Time to write some Dart code
• Declarative UI framework
• Launched in 2018
• Focus on modern UI patterns:
• Single Source of Truth
• Composable components
• Multiplatform
• Dependency Rendering
• Data Binding & Reactive programming
• UI expressed in Widgets in Dart classes
• Visual editor tooling in Android Studio
Mobile devices
-Android
-iOS
-iPadOS
Embedded devices
-Fuchsia OS
Desktop devices
-Windows (win32 y UWP)
-macOS
-Linux
Web platform
-PWAs
Google Play Store
- AAB to Android and Chromebook
Amazon AppStore
- APK to FireOS and Windows 11
Huawei AppGallery
- APK to HarmonyOS
Apple AppStore
- IPA to iOS and iPadOS
Microsoft Store
- UWP to Windows 10/11
Not using OS SDKs
Your own "widgets" and design
It comes with two widget sets ready to use:
- Material
- Cupertino
They clone Android Material Design and
Apple Human Interface guidelines
Pixel-perfect, high-performance
Same gestures and animations
Material vs. Cupertino
Material vs. Cupertino
Decisions to Make
Multi UI
Design your Cupertino for
Use Material
own visual iOS/iPadOS and
for all devices
pattern Material for other
devices
Doesn't happen automatically
Multi user Widgets are not translatable
interface There are design patterns to
reduce coding apps twice
IPA: iOS App (compatible with iPadOS)
APK and AAB: Android App
Product from Web build folder: ready to deploy - PWA
a Flutter
EXE: Windows (beta)
project
APPX: Windows Universal (alpha)
App: macOS (beta)
Flutter generates:
- Android Studio native SDK project
Flutter and - Xcode project for iOS
Native - Web standard files
Projects
We can have a hybrid Flutter app, part
Flutter, part native SDK or JavaScript
Flutter Console
Dart SDK
Flutter SDK
Flutter CLI
Flutter DevTools
- IDE from JetBrains (IntelliJ)
- User Interface Designer (native)
- Android SDK
- Android NDK
Android
- Flutter and Dart support (plugin)
Studio
- Profiler and other tools
- AVD - Android Virtual Devices
- ADB - Android Debug Bridge
- Gradle
- Code Editor
- Flutter and Dart plugins
Visual Studio - Integration with emulators and
Code DevTools
- Plenty of additional plugins and
services
- IDE
- User Interface Designer (native)
- SwiftUI
- Profiler and other tools
Xcode
- iOS Simulator
- Xcode CLI
- NO Flutter or Dart support
- macOS only!
To test and/or compile
iOS or iPadOS
applications we need a
macOS device
Time to create our project
Dart uses AOT compilation to create
native code for Android and iOS
Android Runtime VM is not used
Dart compiles to VM-code for
desktop
Dart vs other Dart transpiles to JavaScript for the
languages Web
We can create plugins to connect
Dart with
- Android and iOS SDK
- Web APIs
- Native SDKs
Flutter Code
Dart code
Flutter framework
Dart IL Dart native / AOT JavaScript code
Obj-C/ Kotlin/Java JavaScript
Swift Plugin Plugin
iOS Androi Web engine
Browser PWA
What we write
Dart code
Flutter framework
Dart IL Dart native / AOT JavaScript code
Obj-C/ Kotlin/Java JavaScript
Swift Plugin Plugin
iOS Androi Web engine
When using third-party
plugins we need to check
platform compatibility
Within the main function, we call
runApp and pass a widget instance
as an argument
Main Concepts That creates a Widget Tree
Widget class
Widget
StatelessWidget StatefulWidget InheritedWidget
OurCustomWidget FlutterFrameworkWidget
Basic unit for user interface
Only property: key
They have a build method that
returnsother Widgets
They typically have a box within the
canvas but there are invisible
widgets as well
There are mainly two kinds:
* Stateless widgets (literal or
Widgets parametrized)
* State-full widgets
Flutter includes +150 widgets! 😱
Widget Constructors
var widget = WidgetName()
var widget = WidgetName(property: value,
property: value)
var widget = [Link]()
Widgets
Containers Containers
for one for Complex
Containers
Child Children
Standalone
different
child children properties
property property Widget
Widget <Widget>[]
Widget Constructors
Scaffold
AppBar
Container, Expanded
ElevatedButton, TextButton,
IconButton
Text, RichText
Column, Row, Wrap
Center
Common Widgets
Padding
Image, Icon
Creating Widgets
Stateful Stateless
Stateless widget
TIP: Use stless in Android Studio/VS Code for snippet
Stateful widget
TIP: Use stful in Android Studio/VS Code for snippet
Most of the time, we don't touch the
Widget class
We use the build method of the State class
State properties are set in the State class
State properties MUST NOT be changed
directly
We change state values by calling:
setState( () { } )
setState receives a Function as an argument;
that function should update the state
Stateful Widgets
The lifecycle will call build again and the
new state should render an updated UI
Most of the time, we don't touch the
Widget class
We use the build method of the State
class
State properties are set in the State class
Stateful State properties MUST NOT be changed
directly
widgets We change state values by calling:
setState( () { } )
setState receives a Function as an
argument;
that function should update the state
The lifecycle will call build again and the
new state should render an updated UI
hi@ [Link]
@ rt
Foto de [Link]
fi
fi
