Flutter Introduction and Architecture

Flutter Introduction and Architecture

• 1.
  Flutter 101 -Introduction and Architecture Jenish MS Software Engineer PRO India
• 2.
  Agenda ● What isFlutter? ● Why Flutter? ● Flutter Architecture ● Flutter Widget ● Demo
• 3.
  What is Flutter? ●Flutter is an open-source project developed by Google in 2017 and available for free. 3.7.9 is the latest version of Flutter. ● Flutter is a UI Toolkit that helps developers build high performance, natively compiled applications for mobile, web and desktop from single codebase. ● Flutter uses the Dart programming language, which is a modern language that is easy to learn and use. ● Flutter provides a set of customizable widgets that can be used to build beautiful responsive UIs.
• 4.
  Why Flutter? ● Cross-platformdevelopment ● Fast development (Hot reload) ● Customizable widgets ● High performance ● Large community ● Dart DevTools ( Inspector, Timeline, debugger, Logging)
• 5.
  Flutter vs ReactNative Flutter React Native Initial Release 2017 2015 Created By Google Facebook Open Source Yes Yes Programming Language Dart Javascript Popularity (Github) 152k stars 109k stars Documentation Clean and easy to follow Unclear Performance Higher at 60fps animation standards Lower as it use JS bridge for initiating interaction Native Appearance Better as it has access to device core functionalities Less due to its dependency on third- party Popular App made BMW, Google Pay, Alibaba Group, Dream11, eBay, etc... Facebook Ads, Instagram, Walmart, UberEats, Airbnb, etc..
• 6.
  Flutter Architecture ● Platform-specificEmbedder ● Flutter Engine ● Flutter Framework
• 7.
  Platform-specific Embedder ● Flutterapplications are packaged in the same way as any other native application. ● Embedder provides an entrypoint; coordinates with the underlying operating system for access to service like rendering surfaces, accessibility, and input; and manage event loop. ● The embedder is written in a language that is appropriate for the platform ○ Java and C++ for Android ○ Objective-C/Objective-C++ for iOS and macOS ○ C++ for Windows and Linux ● Flutter code can be integrate into existing application as a module. ● Flutter includes a number of embedders for common target platform.
• 8.
  Flutter Engine ● FlutterEngine is the core of flutter. ● Flutter engine is written in C++ and supports the primitives necessary to support all Flutter applications. ● The engine is responsible for rasterizing composited scenes whenever a new frame needs to be painted. ● Flutter Engine is available to the developer through dart:ui, which wraps C++ code in dart classes. ● It Provides the low-level implementation of Flutter Core API including graphics (Skia), text layout, file and network I/O, Plugin architecture, Dart runtime and compile toolchain
• 9.
  Flutter Framework 01 Foundationclasses provide the services like animation, geasuture, and painting. 02 In the rendering layer, we can build the render tree with renderable objects. The render layer provides the layout if we make any modification with renderable objects then it updates the render tree and layout. 03 The Widget layer allows to define of widget classes and combines them to reuse. Most important is each render object in the render layer has a corresponding class in the widget layer. The top most layers are material and cupertino layer. These layers provides the set of controls to implement Material and Cupertino design language in widgets. 04
• 10.
  Anatomy of anapp
• 11.
  Flutter Widget Widgets arethe building blocks of flutter apps. Every UI element in a Flutter app is a widget, from buttons and textfields to entire screen. There are two types of widgets Staless widget and Stateful widget. Flutter’s widget-based architecture allows for fast and efficient app development. Widgets can be easily composed and combined to create complex interfaces. Flutter provides a rich set of built-in widgets that are optimized for both Android and iOS platforms. These widgets follow Material Design guidelines for Android and Cupertino guidelines for iOS. Widgets in Flutter are declarative, meaning they describe the UI that should be rendered rather than the code that should be executed to create it. This allows for more efficient rendering and makes it easier to reason about the code. Flutter's layout system uses a flexible box model to allow widgets to be positioned and sized in various ways. This makes it easy to create responsive UIs that adapt to different screen sizes and orientations. 05 04 03 02 01
• 12.
  Stateful Widget Stateful widgetsare a type of widget in Flutter that can change their internal state during the lifetime of the widget. Stateful widgets have two parts: a stateful widget class that extends the StatefulWidget class, and a state class that extends the State class. The state class is where the widget's mutable state is stored, and where any changes to that state are made. When a stateful widget's state changes, Flutter automatically rebuilds the widget and its children to reflect the updated state. Stateful widgets are useful for building complex user interfaces that require interactivity, such as forms, animations, and games. 05 04 03 02 01
• 13.
  Stateless Widget Stateless widgetsare a type of widget in Flutter that don't have any mutable state. Once a stateless widget is built, its appearance and behavior won't change. Stateless widgets are useful for building simple UI elements that don't require interactivity, such as text labels, icons, and images. Stateless widgets are implemented as simple functions that return a widget tree, rather than as classes with mutable state. Stateless widgets are more efficient than stateful widgets because they don't need to rebuild when their state changes. This can improve performance and reduce the risk of bugs. 04 03 02 01
• 14.
  Widget Lifecycle Methods ●createState ● initState() ● didChangeDependencies() ● build() ● didUpdateWidget() ● setState() ● deactivate() ● dispose()
• 15.
  Widget Lifecycle Diagram
• 16.
  Widget Tree
• 17.
  DEMO
• 18.
  Q A
• 19.
  Thank you! Jenish MS LinkedIn@jenishms GitHub @JenishMS Twitter @JenishMS7