Lets discuss the complete architecture of Flutter and how flutter works …

  •  Each and Every component in the flutter app is a Widget.

Widgets:

Unlike other cross-platform development frameworks (like Xamarin and React Native), Flutter doesn’t use the platform’s native widgets. In React Native, the <view> element is translated natively into the UIView element on iOS and the View element on Android. Instead, Flutter has its own set of widgets (including Material Design and Cupertino—iOS—widgets), which is rendered directly by Flutter’s framework and engine.

But when come to widgets, Its again divided into two parts :

  1. Stateless Widget
  2. Stateful Widget

Stateless Widget : The one which doesn’t change the data if we render the widgets, it can’t be redrawn while the app is in action.

Stateless Widget :

  • Icon
  • Chip
  • Text
  • Image
  • Etc ..

The code structure of a Stateless class is –

Here class name of this Stateless Widget is “Example”, inside which we have to override the “build” method.

This build method takes in a “BuildContext” as the parameter and returns a widget. That’s why you can see that the return type of the build method is a widget, which can draw a UI and show the stateless widgets.

Stateful Widget :

The one can be change at any point of time while rendering the widget.This can be drawn multiple  times within its lifetime while app is in action.

The code structure of a Stateful class is –

Here the class name of the widget is again “FlutterDemo”, but now it overrides the “createState” method, instead of the “build” method, which returns the instance of the class “_FlutterDemoState”.

The class “_FlutterDemoState” extends from State<> which takes “FlutterDemo” as a template input.

Now, this “_FlutterDemoState” overrides the “build” method and returns a widget. This is where you can define the UI of the app, which is Stateful.Build method can be called as many no. of times and that will redraw the screen.

But, the important thing to know is how to change the data in the Stateful Widget ?

The basic method is  setState() method, which will redraw the widgets whenever we call any data or widget inside this method.

Stateful Widget :

  • Button
  • Checkboxes
  • Radio Buttons
  • TextFormField
  • Etc ..

That’s all I have and thanks a lot for reading. Please let me know if any corrections/suggestions. Please do share and comments if you like the post. Thanks in advance… 😉

Thanks Ajay Sharma for helping us to grow day by day. He is expert in app development and Flutter.

Next we will dive into the practical code part of the flutter….

Categories: Miscellaneous

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Insert math as
Block
Inline
Additional settings
Formula color
Text color
#333333
Type math using LaTeX
Preview
\({}\)
Nothing to preview
Insert