March Flutter Meetup - Flutter & Dart Introduction

1. Flutter & Dart Introduction By Ali Yazdi a.yazdi@gdgmontreal.com linkedin.com/in/aliyazdi75
2. Contents • Flutter and its advantages • Flutter’s language: Dart • Flutter architectural • Flutter UI and Widgets • Thinking declaratively
3. Build apps for any screen Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.
4. Fast Flutter code compiles to ARM or Intel machine code as well as JavaScript, for fast performance on any device.
5. Productive Build and iterate quickly with Hot Reload. Update code and see changes almost instantly, without losing state.
6. Flexible Control every pixel to create customized, adaptive designs that look and feel great on any screen.
7. DevTools A full suite of performance and debugging tools: • Inspect the UI layout and state of a Flutter app • CPU/Network/memory profiling for a Flutter or Dart app • Source-level debugging of a Flutter or Dart app • Analyze code and app size
8. Performance inspector How much time took for flutter to render the specific frame.
9. Extensive Flutter docs Find documentation for everything Flutter - from interactive examples and tutorials, to building and deploying your first Flutter app: • Code and website documentation, website, tutorials and youtube videos and sample usage inside class documentation, medium, github, youtube channel by flutter team, huge community in socials
10. Extensive Flutter docs
11. Extensive Flutter docs https://api.flutter.dev/flutter/widgets/AspectRatio-class.html
12. Open Source Flutter is an open source framework by Google and is one of the fast growing repositories of github as you can see the graph :)
13. Dart: The platforms Dart’s compiler technology lets you run code in different ways: • Native platform: ◦ Dart VM with just-in-time (JIT) ◦ Ahead-of-time (AOT) compiler for producing machine code. • Web platform: ◦ Dart can compile for development or production purposes. Its web compiler translates Dart into JavaScript.
14. Flutter architectural: Embedder A platform-specific embedder provides an entrypoint; • Coordinates with the underlying operating system for access to services like rendering surfaces, accessibility, and input: ◦ UTF-8 Text input, Clipboard copy & paste, window title and icon ◦ Mouse-hovering/buttons and keyboard • The embedder is written in ◦ Java and C++ for Android ◦ Objective-C/Objective-C++ for iOS and macOS ◦ C++ for Windows and Linux
15. Flutter architectural: Engine The Flutter Engine is a portable runtime for hosting Flutter applications. • It implements Flutter's core libraries: ◦ Animation and graphics (through Skia) ◦ File and network I/O ◦ Plugin architecture ◦ A Dart runtime and compile toolchain • The engine is responsible for rasterizing composited scenes whenever a new frame needs to be painted
16. Flutter architectural: Web On the web, Flutter provides a reimplementation of the engine on top of standard browser APIs. There are two options for rendering Flutter content on the web: • HTML, Flutter uses HTML, CSS, Canvas, and SVG. (Better app size) • WebGL, Flutter uses a version of Skia compiled to WebAssembly called CanvasKit. (higher graphical fidelity)
17. Integrating with other code • Platform channels ◦ For mobile and desktop apps, Flutter allows you to call into custom code through a platform channel • Foreign Function Interface (FFI) ◦ FFI is available for C-based APIs • js package ◦ Call JavaScript APIs from Dart code, or vice versa
18. Flutter architectural: Framework It includes a rich set of platform, layout, and foundational libraries, composed of a series of layers. • Foundational: lowest-level utility classes and building block services like animation, painting, and gestures • Rendering: provides an abstraction for dealing with layout • The Material and Cupertino libraries offer comprehensive sets of controls that use the widget layer’s composition primitives to implement the Material or iOS design languages.
19. It’s all widgets Widgets are the building blocks of a Flutter app’s user interface. • Widgets are typically composed of many other small, single-purpose widgets that combine to produce powerful effects • Determine the visual representation of a widget by overriding the build() function to return a new element tree
20. Flutter implementations of UI Flutter has its own implementations of each UI control, rather than implementation provided by both iOS/Android equivalent. • Extensibility • Avoids a significant performance bottleneck • Decouples the application behavior from any operating system dependencies. The application looks and feels the same on all versions of the OS
21. The Widget Tree Widgets form a hierarchy based on composition. Each widget nests inside its parent and can receive context from the parent. This structure carries all the way up to the root widget.
22. Thinking declaratively
23. The Only Resource: flutter.dev
24. Thanks for your attention 💙 QA Email: a.yazdi@gdgmontreal.com Linkedin: linkedin.com/in/aliyazdi75