Introduce

Hey guys, I need to research something on my appointment)

Recently, I have been researching on flutter, I think this song is so good, so I took the opportunity to piggyback here and refer to Flutter with 500 ae. Hope to help you guys ^^. Enough chattering, let’s go!

Flutter is Google’s SDK, which helps create mobile apps for iOS and Android using a (almost) code base. It is a novice in cross-platform mobile application development and unlike other frameworks such as React Native, it does not use JavaScript as a Programming Language.

The language used in flutter is DART, similar to JavaScript, it also runs a threaded event queue. The biggest benefit of using Flutter is that it directly generates ARM binaries that will execute directly on the original platform to make it faster to run.

JavaScript based frameworks like “React Native” needs a bridge which converts the JavaScript code to Native Code which adds an additional layer of indirection.

The installation instructions HERE . Both Android Studio and IntelliJ IDEA can be used to develop flutter applications.

Reference source: https://proandroiddev.com/flutter-from-zero-to-comfortable-6b1d6b2d20e

Create Flutter application – The hierarchical widget

Everything in a Flutter app is a Widget in Flutter, from simple tests like Text or Button to Screen Layouts .

These widgets in hierarchical order will be displayed on the screen. Widgets that may contain widgets within it are called Container Widgets . Most layout widgets are container widgets except widgets that perform a minimal task like the Text Widget.

A minimal arrangement of widgets will look like

Hello Flutter: The first Flutter Code

For our first lines of code, I will show “Hello Flutter” on mobile. We will use the Widget Container named Directionality and the Text Widget called Text to display the text on the screen. Here is the code.

Like many other programming languages, the main () function is where execution begins. In the above Hello Flutter code, MyApp is a widget created to build screen layouts.

Every custom widget has a build function which returns a Widget

In the above code, I created a “Container Widget” called “Directionality” , will have a widget widget called Text , which will display the text in Hello Flutter. The widget hierarchy for this looks like

The text will be displayed at the top of the screen, however, we can move the text to the middle of the screen using a widget called Center , changing the hierarchy as follows.

And the code now looks like

Create Material Designs

None of the applications we create for the real world will have only plain text displayed on the screen, instead an application will at a minimum include Application Bar , Body , and Navigational Functionality. .

In Flutter, we often use MaterialApp to create material design that allows us to use Scaffold , which will be used to create the Application Bar & Body . This is how we create a minimal screen with MaterialApp and Body.

And the widget hierarchy for the above will be like

Expand Material Designs

In Material Design, the body can only contain a child widget that is not what we want. Generally, the screen consists of many widgets.

To achieve the same thing, we need to use a widget like a child, which can contain a bunch of other widgets. There are many widgets in Flutter that can contain a series of sub widgets, Row / Column is one of them. In the above code, we can add Row / Column to display multiple widgets that change the widget hierarchy as follows

And the code now will be as follows

Pass custom parameters to Widgets

MyApp class is also a widget created by application. Just like any other built-in Widgets, we can also pass parameters to our widget. This is done when providing constructors on the MyApp class.

It’s a non mandatory, but a common practice to declare the parameters provided inside the constructor as final.

In the code below, my MyApp widget will wait for a widget as input where we will provide TextWidget as input.

Stateless and Stateful Widgets

There are two types of widgets we can create in flutter: Stateless and Stateful . All the widgets we’ve created so far are stateless widgets .

Stateless Widgets and its limitations

A Stateless widget can only be drawn once once the Widget is loaded, which means we can redraw the Widget based on any user events or actions.

We can see this behavior by having Widget Checkbox . The Checkbox widget is a flutter Widget that handles the clicking on the Checkbox, however, to display the clicked checkbox, we need to redraw the widget using a hot reload or reload widget.

This is not to say that Stateless Widgets are not useful, they have their own use for displaying static content or pages that need to be reloaded multiple times in an Application.

This is how the Stateless widget with a checkbox will look like

As you can see while running this code, nothing happens when we click the checkbox unless we reload the widget.

Stateful Widgets

Stateful Widgets address the reloading shortcomings of Stateless Widgets . A Stateful Widget can be downloaded multiple times by calling setState () . This will trigger the build(BuildContext ctxt) be called back.

Creating Stateful Widgets is different from creating Stateless Widgets because we need to create two classes, one from Stateful Widget and the other from Generic State <> .

In every Stateful Widget , we override the createdState (…) function to create an instance of our stateful. This is how the Stateful Widget code looks like

And what is the overall arrangement of the widgets hierarchy like?

Add AppBar Actions

No application is complete without providing some AppBar action, sometimes including a dot in the top right corner.

The AppBar build provides and options to add actions to create actionable items. Like Row / Column , it needs a Widgets array that allows creating multiple manipulative items. For example, I added a few IconButton in the code below