Introduction to Mobile Programming - Unit 2 PDF

Introduction to Mobile Programming Unit2 [email protected] Flutter Step1  What is Flutter? In the simplest terms, Flutter is a software development toolkit from Google for building cross-platform apps. Flutter apps consist of a series of packages, plugins, and widgets....

Introduction to Mobile Programming Unit2 [email protected] Flutter Step1  What is Flutter? In the simplest terms, Flutter is a software development toolkit from Google for building cross-platform apps. Flutter apps consist of a series of packages, plugins, and widgets. It’s also the easiest way to get an app up and running on any one platform, let alone multiple. You can be more productive than you thought possible thanks to Flutter’s declarative, widget-based UI structure, first-class support for reactive programming, cross-platform abstractions, and its virtual machine that allows for hot reloading of code changes. 9.04.2025 [email protected] 3 Flutter is not a language. Flutter uses Dart as its programming language. If you know Kotlin, Swift, Java, or Typescript, you’ll find Dart familiar, since it’s an object-oriented C-style language. You can compile Dart to native code, which makes it fast. It also uses a virtual machine (VM) with a special feature: hot reload. This lets you update your code and see the changes live without redeploying it. For years, programmers have been promised the ability to write once and run anywhere; Flutter may well be the best attempt yet at achieving that goal. 9.04.2025 [email protected] 4  The Flutter architecture Flutter has a modular, layered architecture. This allows you to write your application logic once and have consistent behavior across platforms, even though the underlying engine code differs depending on the platform. The layered architecture also exposes different points for customization and overriding, as necessary. 9.04.2025 [email protected] 5  The Flutter architecture 4/9/2025 [email protected] 6 The Flutter architecture The Flutter architecture consists of three main layers: 1. The Framework layer is written in Dart and contains the high-level libraries that you’ll use directly to build apps. This includes the UI theme, widgets, layout and animations, gestures, and foundational building blocks. Alongside the main. Flutter framework are plugins: with high-level features like JSON serialization, geolocation, camera access, in-app payments, and so on. This plugin-based architecture lets you include only the features your app needs. 2. The Engine layer contains the core C++ libraries that make up the primitives that support Flutter apps. The engine implements the low-level primitives of the Flutter API, such as I/O, graphics, text layout, accessibility, the plugin architecture, and the Dart runtime. The engine is also responsible for rasterizing Flutter scenes for fast rendering onscreen (Turns Flutter scenes into pixels so they can be shown quickly on the screen). 3. The Embedder is different for each target platform and handles packaging the code as a stand-alone app or embedded module. 9.04.2025 [email protected] 7 Each of the architecture layers is made up of other sublayers and modules, making them almost fractal. 9.04.2025 [email protected] 8  The Flutter architecture The Flutter framework consists of several sublayers: At the top is the UI theme, which uses either the Material (Android) or Cupertino (iOS) design language. This affects how the controls appear, allowing you to make your app look just like a native one. The widget layer is where you’ll spend the bulk of your UI programming time. This is where you compose design and interactive elements to make up the app. Beneath the widgets layer is the rendering layer, which is the abstraction for building a layout. The foundation layer provides basic building blocks, like animations and gestures, that build up the higher layers. 9.04.2025 [email protected] 9  What is widget? Widgets can be compared to LEGO blocks; by adding blocks together, you create an object, and by adding different kinds of blocks, you can alter the look and behavior of the object. Widgets are the building blocks of a Flutter app, and each widget is an immutable declaration of the user interface. In other words, widgets are configurations (instructions) for different parts of the UI. Placing the widgets together creates the widget tree. For example, say an architect draws a blueprint of a house; all of the objects like walls, windows, and doors in the house are the widgets, and all of them work together to create the house or, in this case, the application 9.04.2025 [email protected] 10  Wide array of widgets Widgets with structuring elements such as a list, grid, text, and button Widgets with input elements such as a form, form fields, and keyboard listeners Widgets with styling elements such as font type, size, weight, color, border, and shadow Widgets to lay out the UI such as row, column, stack, centering, and padding Widgets with interactive elements that respond to touch, gestures, dragging, and dismissible Widgets with animation and motion elements such as hero animation, animated container, animated crossfade, fade transition, rotation, scale, size, slide, and opacity Widgets with elements like assets, images, and icons Widgets that can be nested together to create the UI needed Custom widgets you can create yourself 9.04.2025 [email protected] 11 Two main types of widgets To build the UI, you use two main types of widgets, StatelessWidget and StatefulWidget. A stateless widget is used when the values (state) do not change, and the stateful widget is used when values (state) change. Each stateless or stateful widget has a build method with a BuildContext that handles the location of the widget in the widget tree. The BuildContext objects are actually Element objects, an instantiation of the Widget at a location in the tree. 9.04.2025 [email protected] 12  The StatelessWidget Lifecycle A StatelessWidget is built based on its own configuration and does not change dynamically. For example, the screen displays an image with a description and will not change. The stateless widget is declared with one class, and you’ll learn about classes in Chapter 3. The build (the UI portions) method of the stateless widget can be called from three different scenarios. It can be called the first time the widget is created, when the widget’s parent changes, and when an InheritedWidget has changed. 9.04.2025 [email protected] 13  The StatelessWidget Lifecycle 4/9/2025 [email protected] 14  The StatefulWidget Lifecycle A StatefulWidget is built based on its own configuration but can change dynamically. For example, the screen displays an icon with a description, but values can change based on the user’s interaction, like choosing a different icon or description. This type of widget has a mutable state that can change over time. The stateful widget is declared with two classes, the StatefulWidget class and the State class. The StatefulWidget class is rebuilt when the widget’s configuration changes, but the State class can remain, enhancing performance. For example, when the state changes, the widget is rebuilt. If the StatefulWidget is removed from the tree and then inserted back into the tree sometime in the future, a new State object is created. Note that under certain circumstances and restrictions, you can use a GlobalKey (unique key across entire app) to reuse (not re-create) the State object; however, global keys are expensive, and unless they’re needed, you might want to consider not using them. You call the setState() method to notify the framework that this object has changes, and the widget’s build method is called (scheduled). You would set the new state values inside the setState() method. In Chapter 2, you’ll learn how to call the setState() method. The following example shows a StatefulWidget base structure, and Figure 1.2 displays the widget’s lifecycle. You have two classes, the JournalEdit StatefulWidget class and the _JournalEditState class. 9.04.2025 [email protected] 15 The StatefulWidget Lifecycle 9.04.2025 [email protected] 16 StatefulWidget lifecycle 4/9/2025 17 UNDERSTANDING THE WIDGET TREE AND THE ELEMENT TREE In the previous section, you learned that widgets contain the instructions to create the UI, and when you compose (nest) widgets together, they create the widget tree. The Flutter framework uses the widgets as the configurations for each element that is mounted (rendered) on the screen. The mounted elements displayed on the screen create the element tree. You now have two trees, the widget tree that has the widget configurations and the element tree that represents the rendered widgets on the screen (Figure 1.3). 9.04.2025 [email protected] 18 UNDERSTANDING THE WIDGET TREE AND THE ELEMENT TREE When the application starts, the main() function calls the runApp() method, usually taking a StatelessWidget as the argument, and is mounted as the root element for the application. The Flutter framework processes through all of the widgets, and each corresponding element is mounted. The following is sample code that starts a Flutter application, and the runApp() method inflates the MyApp StatelessWidget, meaning the main application itself is a widget. As you can see, just about everything in Flutter is a widget. 9.04.2025 [email protected] 19  UNDERSTANDING THE WIDGET TREE AND THE ELEMENT TREE Elements have a reference to the widget and are responsible for comparing the widget differences. If a widget is responsible for building child widgets, then elements are created for each child widget. When you see the use of BuildContext objects, they are the Element objects. To discourage direct manipulation of the Element objects, the BuildContext interface is used instead. The Flutter framework uses BuildContext objects to discourage you from manipulating the Element objects. In other words, you’ll be using widgets to create your UI layouts, but it’s good to know how the Flutter framework is architected and how it works behind the scenes. As noted earlier, there is a third tree called the render tree which is a low-level layout and painting system that inherits from the RenderObject. The RenderObject computes and implements the basic layout and paint protocols. However you won’t need to interact directly with the render tree, and will be using the widgets. 4/9/2025 [email protected] 20 UNDERSTANDING THE WIDGET TREE AND THE ELEMENT TREE ✓ A stateless widget has the configuration to create a stateless element. Each stateless widget has a corresponding stateless element. ✓ The Flutter framework calls the createElement method (create an instance), and the stateless element is created and mounted to the element tree. ✓ In other words, the Flutter framework makes a request from the widget to create an element and then mounts (adds) the element to the element tree. ✓ Each element contains a reference back to the widget. The element calls the widget’s build method to check for children widgets, and each child widget (like an Icon or Text) creates its own element and is mounted to the element tree. ✓ This process results in two trees: the widget tree and the element tree. 4/9/2025 [email protected] 21 UNDERSTANDING THE WIDGET TREE AND THE ELEMENT TREE ✓ Figure 1.4 shows the JournalList StatelessWidget that has Row, Icon, and Text widgets representing the widget tree. The Flutter framework asks each widget to create the element, and each element has a reference back to the widget. ✓ This process happens for each widget down and creates the element tree. The widget contains the instructions to build the element mounted on the screen. 4/9/2025 [email protected] 22  Stateless Widget and Element Trees Note that you the developer create the widgets, and the Flutter framework handles mounting the elements, creating the element tree. 4/9/2025 [email protected] 23 Stateful Widget and Element Trees ✓ A stateful widget has the configuration to create a stateful element. Each stateful widget has a corresponding stateful element. The Flutter framework calls the createElement method to create the stateful element, and the stateful element is mounted to the element tree. Since this is a stateful widget, the stateful element requests that the widget create a state object by calling the StatefulWidget class’s createState method. ✓ The stateful element now has a reference to the state object and the widget at the given location in the element tree. The stateful element calls the state object widget’s build method to check for child widgets, and each child widget creates its own element and is mounted to the element tree. This process results in two trees: the widget tree and the element tree. Note that if a child widget displaying the state (journal note) is a stateless widget like the Text widget, then the element created for this widget is a stateless element. ✓ The state object maintains a reference to the widget (StatefulWidget class) and also handles the construction for the Text widget with the latest value. Figure 1.5 shows the widget tree, the element tree, and the state object. Note that the stateful element has a reference to the stateful widget and the state object. 9.04.2025 [email protected] 24  Stateful Widget and Element Trees To update the UI with new data, you call the setState() method that you learned about in the “The StatefulWidget Lifecycle” section. To set new data (properties/variables) values, call the setState() method to update the state object, and the state object marks the element as dirty (has changed) and causes the UI to be updated (scheduled). The stateful element calls the state object’s build method to rebuild the children widgets. A new widget is created with the new state value, and the old widget is removed. 9.04.2025 [email protected] 25 26 For example, you have a StatefulWidget JournalEntry class, and in the State object class you call the setState() method to change the Text widget description from 'Trip A' to 'Trip B’ by setting the note variable value to 'Trip B'. The state object note variable is updated to the 'Trip B' value, the state object marks the element as dirty, and the build method rebuilds the UI children widgets. The new Text widget is created with the new 'Trip B' value, and the old Text widget with the 'Trip A' value is removed (Figure 1.6). 9.04.2025 [email protected] 27 Since both the old and new widgets are both Text widgets, the existing element updates its reference to the new widget, and the element stays in the element tree. The Text widget is a stateless widget, and the corresponding element is a stateless element; although the Text widget has been replaced, the state is maintained (persists). State objects have a long life span and remain attached to the element tree as long as the new widget is the same type as the old widget. 9.04.2025 [email protected] 28 Let’s continue with the previous example; the old Text widget with the 'Trip A' value is removed and replaced by the new Text widget with the 'Trip B' value. Since both the old and new widgets are of the same type of Text widgets, the element stays on the element tree with the updated reference to the new Text 'Trip B' widget (Figure 1.7). 9.04.2025 [email protected] 29