Upgrade to Pro — share decks privately, control downloads, hide ads and more …

March Flutter Meetup - Flutter & Dart Introduction

GDG Montreal
March 14, 2023
33

March Flutter Meetup - Flutter & Dart Introduction

GDG Montreal

March 14, 2023
Tweet

Transcript

  1. Flutter & Dart
    Introduction
    By Ali Yazdi
    [email protected]
    linkedin.com/in/aliyazdi75

    View full-size slide

  2. Contents
    ● Flutter and its advantages
    ● Flutter’s language: Dart
    ● Flutter architectural
    ● Flutter UI and Widgets
    ● Thinking declaratively

    View full-size slide

  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.

    View full-size slide

  4. Fast
    Flutter code compiles to ARM or Intel
    machine code as well as JavaScript, for
    fast performance on any device.

    View full-size slide

  5. Productive
    Build and iterate quickly with Hot
    Reload. Update code and see changes
    almost instantly, without losing state.

    View full-size slide

  6. Flexible
    Control every pixel to create customized,
    adaptive designs that look and feel great
    on any screen.

    View full-size slide

  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

    View full-size slide

  8. Performance inspector
    How much time took for flutter to render the specific frame.

    View full-size slide

  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

    View full-size slide

  10. Extensive Flutter docs

    View full-size slide

  11. Extensive Flutter docs
    https://api.flutter.dev/flutter/widgets/AspectRatio-class.html

    View full-size slide

  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 :)

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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)

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  22. Thinking declaratively

    View full-size slide

  23. The Only Resource: flutter.dev

    View full-size slide

  24. Thanks for your attention 💙
    QA
    Email: [email protected]
    Linkedin: linkedin.com/in/aliyazdi75

    View full-size slide