Flutter & Dart Introduction

Transcript

1. Flutter & Dart
   Introduction
   By Ali Yazdi
   a.yazdi@gdgmontreal.com
   linkedin.com/in/aliyazdi75
   

   View Slide

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

   View 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 Slide

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

   View Slide

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

   View Slide

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

   View 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 Slide

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

   View 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 Slide

10. Extensive Flutter docs
    

    View Slide

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

    View 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 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 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 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 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 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 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 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 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 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 Slide

22. Thinking declaratively
    

    View Slide

23. The Only Resource: flutter.dev
    

    View Slide

24. Thanks for your attention 💙
    QA
    Email: a.yazdi@gdgmontreal.com
    Linkedin: linkedin.com/in/aliyazdi75
    

    View Slide