Flutter Architecture (Chapter 3) PDF

Mobile Applications (Flutter Foundations: Widgets to Architecture) Chapter 3 Dr. Mohamad Al-Dabbagh 1  Outline − Flutter Framework − Flutter Widgets Widgets Types Widget...

Mobile Applications (Flutter Foundations: Widgets to Architecture) Chapter 3 Dr. Mohamad Al-Dabbagh 1  Outline − Flutter Framework − Flutter Widgets Widgets Types Widgets Lifecycle Widgets & Elements Tree − Flutter Architecture − Flutter Features − Some Basic Widgets Dr. Mohamad Aldabagh 2  Objectives v What you will learn in chapter 3: Ø You will learn about the central concepts of widgets Ø The differences between stateless and stateful widgets Ø Widget Lifecycle Ø Widget & Element Tree Ø Flutter Architecture components Ø What are Flutter Features? Ø You will learn the most common widgets in Flutter Dr. Mohamad Aldabagh 3  Flutter Framework v What is a Flutter? − Flutter is Google’s portable UI framework for building modern, native, and reactive applications for iOS and Android with one codebase only. − Desktop, Web, embedded devices. − Flutter is an open-source project. − Flutter uses the Skia 2D rendering engine that works with different types of hardware and software platforms. − Flutter is a framework for Dart programming language − Dart is ahead-of-time (AOT) compiled to native code. − Dart is also just-in-time (JIT) compiled Dr. Mohamad Aldabagh 4  Flutter Framework v What is a Flutter? Flutter Framework Dart Flutter SDK Flutter Dr. Mohamad Aldabagh 5  Flutter Framework v What is a Flutter? Dr. Mohamad Aldabagh 6  Flutter Framework − How Flutter Work? Dr. Mohamad Aldabagh 7  Flutter Framework − How Flutter Work? Dr. Mohamad Aldabagh 8  Flutter Widgets − Flutter uses Dart to create your user interface. − Flutter builds the UI to reflect the state of the app. − Flutter is fast, 60 & 120 fps for capable devices. − Flutter uses widgets to create the user interface − Flutter uses its own rendering engine to draw widgets. widgets Dr. Mohamad Aldabagh 9  Basic Widgets v Flutter code structure − Flutter uses widgets to create the user interface (UI), widgets are basically building blocks − Widgets are not just about the visuals (UI), they also contain logic. − Dart is an object oriented programming language, which means everything is an object. − Class = Widget − Class starts with keyword “Class” and name will come after it. − Everything in Flutter is a widget Dr. Mohamad Aldabagh 10  Flutter Widgets v Widgets 11 Dr. Mohamad Aldabagh  Flutter Widgets v What are widgets? − Widgets are the building blocks of a Flutter app − Each widget is an immutable declaration of the user interface − Widget Tree. Dr. Mohamad Aldabagh 12  Flutter Widgets v Widgets Types − Main types: 1. StatelessWidget 2. StatefulWidget − Each stateless or stateful widget has a build method with a BuildContext − handles the location of the widget in the widget tree − The stateless widget is declared with one class. − The stateful widget is declared with two classes. − The build method of the stateless widget can be called First time the widget is created. widget’s parent changes. InheritedWidget has changed Dr. Mohamad Aldabagh 13  Flutter Widgets v Widgets Types Dr. Mohamad Aldabagh 14  Flutter Widgets v Widgets Types Stateful − This type of widget has a mutable state that can change over time − The StatefulWidget class is rebuilt when the widget’s configuration changes, & it creates an instance of the State class − State class: This is for data that can be read synchronously when the widget is built and might change over time. − The State object persists over the lifecycle of the widget and can be modified. − setState(): From within the State class, you make a call to the setState() method to refresh changed data, telling the framework that the widget should redraw because the state has changed. Dr. Mohamad Aldabagh 15  Flutter Widgets v Widgets Types Dr. Mohamad Aldabagh 16  Flutter Widgets Dr. Mohamad Aldabagh 17  Flutter Widgets Dr. Mohamad Aldabagh 18  Flutter Widgets v Widget Lifecycle: Dr. Mohamad Aldabagh 19  Flutter Widgets v Widget Lifecycle: − Ex: Dr. Mohamad Aldabagh 20  Flutter Widgets v Widget Lifecycle: Dr. Mohamad Aldabagh 21  Flutter Widgets v Widget Lifecycle: Dr. Mohamad Aldabagh 22  Flutter Widgets v How Flutter use Widgets? − Widget Tree. − Flutter uses the widget as the configuration to build each element − The element is the widget that is mounted on the screen − Element Tree Dr. Mohamad Aldabagh 23  Flutter Widgets v Widgets & Elements Tree − The Flutter framework uses the widgets as the configurations for each element that is mounted on the screen. Dr. Mohamad Aldabagh 24  Flutter Widgets v Widgets Tree & Element Tree − stateless element − createElement method() − Widget à Element à Element Tree − Each element contains a reference back to the widget − build method () Dr. Mohamad Aldabagh 25  Flutter Widgets v Widgets Tree & Element Tree − stateful element − createElement method() − createState method() − The state object maintains a reference to the widget − setState method() − The stateful element calls the state object’s build method to rebuild the children widgets. Dr. Mohamad Aldabagh 26  Flutter Widgets v Widgets Tree & Element Tree Dr. Mohamad Aldabagh 27  Flutter Widgets v Widgets Tree & Element Tree Dr. Mohamad Aldabagh 28  Flutter Architecture v Flutter architectural overview − Flutter is a cross-platform UI toolkit that is designed to allow code reuse across operating systems such as iOS and Android. − also allowing applications to interface directly with underlying platform services − Flutter’s architecture Dr. Mohamad Aldabagh 29  Flutter Architecture v Flutter architectural overview Dr. Mohamad Aldabagh 30  Flutter Architecture v Flutter architectural overview Dr. Mohamad Aldabagh 31  Flutter Features v Flutter Features: − Hot reload − Loads code changes into the VM and re-builds the widget tree − Preserving the app state; it doesn’t rerun main() or initState() − Quick & easy − Add features − Fix bugs − Hot restart − Loads code changes into the VM, and restarts the Flutter app. − Losing the app state (destroys State value to default) − Rebuild the widget tree. − More Time than Hot reload − Full restart − Restarts the iOS, Android, or web app. − This takes longer because it also recompiles the Java / Kotlin / ObjC / Swift code. On the web, it also restarts the Dart Development Compiler. 32 Dr. Mohamad Aldabagh  Basic Widgets v Flutter code structure − main.dart file: Do not rename special function Firstly executed Automatically call No arguments − The entire dart code will be compiled and bundled with the android or iOS code. Dr. Mohamad Aldabagh 33  Basic Widgets v Some Basic widgets Ø Stateless and Stateful Widgets − Flutter widgets are the building blocks for designing the UI. − Widgets are built using a modern react-style framework. − UI is created by nesting widgets together into a widget tree. − Flutter manages the relationship between the state and the UI. − Stateless VS Stateful Dr. Mohamad Aldabagh 34  Basic Widgets v Some Basic widgets Ø MaterialApp Widget − Google’s Material Design library − Import flutter package Ø CupertinoApp Widget (iOS) Dr. Mohamad Aldabagh 35  Basic Widgets v Some Basic widgets Ø Stateless and Stateful Widgets − Need build method − Return something / call widget Dr. Mohamad Aldabagh 36  Basic Widgets v Some Basic widgets Ø Scaffold Widget − Implements the basic material design visual layout structure. − It allowing the use of Flutter’s Material Components widgets − This class provides APIs for showing drawers and bottom sheets. Ø CupertinoPageScaffold Widget Ø CupertinoTabScaffold Widget Dr. Mohamad Aldabagh 37  Basic Widgets v Some Basic widgets Ø AppBar Widget − which is a horizontal bar typically shown at the top of an app using the appBar property. Ø Text Widget − The Text widget is a great way to display labels on the screen. Ø TextStyle Widget − An opaque object that determines the size, position, and rendering of text Ø FontWeight Widget − The thickness of the glyphs used to draw the text Ø Colors Widget − represent Material design's color palette Dr. Mohamad Aldabagh 38  Basic Widgets v Some Basic widgets Ø Colors Widget − color palette. Ø Center Widget − A widget that centers its child within itself. (child) Ø Image Widget − A widget that displays an image. Support JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP. Ø NetworkImage Widget − Fetches the given URL from the network, associating it with the given scale.. Ø AssetImage Widget − Fetches an image from an AssetBundle (pubspec.yaml file) Dr. Mohamad Aldabagh 39  Basic Widgets v Some Basic widgets Ø Column Widget − A widget that displays its children in a vertical array. Ø Row Widget − A widget that displays its children in a horizontal array. Dr. Mohamad Aldabagh 40  Basic Widgets v Add or import an image to the app. − Pubspec file: Every pub package needs some metadata so it can specify its dependencies. − Pub packages that are shared with others also need to provide some other information so users can discover them − All of this metadata goes in the package’s pubspec: a file named pubspec.yaml that’s written in the YAML language Dr. Mohamad Aldabagh 41  Basic Widgets v Add or import an image to the app. − Sample: Dr. Mohamad Aldabagh 42  References − Chapter 1: Introducing Flutter & Getting Started − Chapter 3 : An Introduction to Flutter − Chapter 4 : Widgets: Building Layouts in Flutter − Flutter documentation Dr. Mohamad Aldabagh 43  Questions & Answers Dr. Mohamad Aldabagh 44 Dr. Mohamad Aldabagh 45