Flutter: Everything is a widget

-


 Hello World Application

Widgets

The core concept of the Flutter framework is In Flutter, Everything is a widget. Widgets are basically user interface components used to create the user interface of the application.

In Flutter, the application is itself a widget. The application is the top- level widget and its UI is build using one or more children (widgets), which again build using its children widgets. This composability feature helps us to create a user interface of any complexity.

For example, the widget hierarchy of the hello world application (created in previous chapter) is as specified in the following diagram −

 

Here the following points are worth notable −

  • MyApp is the user created widget and it is build using the Flutter native widget, MaterialApp.

  • MaterialApp has a home property to specify the user interface of the home page, which is again a user created widget, MyHomePage.

  • MyHomePage is build using another flutter native widget, Scaffold

  • Scaffold has two properties – body and appBar

  • body is used to specify its main user interface and appBar is used to specify its header user interface

  • Header UI is build using flutter native widget, AppBar and Body UI is build using Center widget.

  • The Center widget has a property, Child, which refers the actual content and it is build using Text widget

Gestures

Flutter widgets support interaction through a special widget, GestureDetector. GestureDetector is an invisible widget having the ability to capture user interactions such as tapping, dragging, etc., of its child widget. Many native widgets of Flutter support interaction through the use of GestureDetector. We can also incorporate interactive feature into the existing widget by composing it with the GestureDetector widget. We will learn the gestures separately in the upcoming chapters.

Concept of State

Flutter widgets support State maintenance by providing a special widget, StatefulWidget. Widget needs to be derived from StatefulWidget widget to support state maintenance and all other widget should be derived from StatefulWidget. Flutter widgets are reactive in native. This is similar to reactjs and StatefulWidget will be auto re- rendered whenever its internal state is changed. The re-rendering is optimized by finding the difference between old and new widget UI and rendering only the necessary changes

Layers

The most important concept of Flutter framework is that the framework is grouped into multiple category in terms of complexity and clearly arranged in layers of decreasing complexity. A layer is build using its immediate next level layer. The top most layer is widget specific to Android and iOS. The next layer has all flutter native widgets. The next layer is Rendering layer, which is low level renderer component and renders everything in the flutter app. Layers goes down to core platform specific code

Comments

Post a Comment

Popular posts from this blog

Flutter : Introduction

-
Image
  Introduction to Flutter Installation In this section, let us see how to install Flutter SDK and its requirement in a windows system. Step 1 − Go to URL, https://flutter.dev/docs/get-started/install/windows and download the latest Flutter SDK. As of April 2019, the version is 1.2.1 and the file is flutter_windows_v1.2.1-stable.zip. Step 2 − Unzip the zip archive in a folder, say C:\flutter\ Step 3 − Update the system path to include flutter bin directory. Step 4 − Flutter provides a tool, flutter doctor to check that all the requirement of flutter development is met. flutter doctor Step 5 − Running the above command will analyze the system and show its report as shown below − Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, v1.2.1, on Microsoft Windows [Version 10.0.17134.706], locale en-US) [√] Android tool chain - develop for Android devices (Android SDK version 28.0.3) [√] Android Studio (version 3.2) [√] VS Code, 64-bit editio
Read more

How to release your Flutter app

-
  How to release your Flutter app for iOS   Prerequisites Make sure that you’ve covered Apple’s guidelines for releasing an app on the app store. Have your app’s icons and launch screens ready. Have an Apple Developer account.   Prepare for building Before you can build and release your app on the App Store, you need to set up a place for it using App Store Connect. But first, you need to register a unique bundle ID for your app. This can be done by logging into your Apple Developer account and following these steps: Open the App IDs page. Click + to create a new Bundle ID . Fill out the needed information: App Name, and Explicit App ID. If your app needs specific services, select them and click Continue . Review the details and click Register to finish. Now that we have a unique bundle ID, it’s time to set up a place for your app on the App Store Connect. Log in to the App Store Connect. Select My Apps . Click + then select New App . Fill in your app details and make sure i
Read more

Firebase Cloud Messaging

-
Image
  what are push notifications? Push Notifications are a sort of pop-up messaging medium that alerts app users to what's going on in the app. They are also an important way to amplify user engagement in your app. For example, say a user forgets about the app once they have installed it. Then you can use push notifications as a mechanism to regain and retain their interest. Push notifications also help drive traffic to your app. Firebase Cloud Messaging is a service offered by Firebase which lets you send these notifications to your users. You can set up various configurations to send different notifications to different audiences based on time and routine. Because of all these benefits, we are going to use it to send notifications to our Flutter app. Step 1: Create a Flutter Project First, we are going to create a flutter project. For that, we must have the Flutter SDK installed in our system. You can find simple steps for flutter installation in the official documenta
Read more