Widgets are a basic component of flutter, and indeed this is emphasized by flutter. In every widget, there is always a context that represents where the widget is located. Flutter itself run runApp which will run the flutter framework to read the Widget Widget that we created.

Widget Explanation

If you are familiar with react.js , react.js has the basics, namely components. While flutter itself has a basic thing called widgets. Widget is an object that will be run by the framework flutter to build a user interface.

In flutter, we can create a custom widget with a framework containing the widgets we want. And here we will discuss two types of custom widgets that we must know to create a UI, namely SatelessWidgetand StatefulWidget.

StatelessWidget Explanation

StatelessWidget is a custom widget for creating UIs with non-existent attributes change/mutate (immutable). Let's try an example of using statelessWidget, and please press the run button for it see the results

In the example code above. we can see the result is

hello world

the result of the UI rendered in the code above, cannot be changed by any event, because there is no state which can re-render the UI.

Then how do we make our UI dynamic? 

let's move on to explaining about statefulWidget 

StatefulWidget Explanation

This time we will discuss what StatefullWidget is, why it is needed and how to use it.

StatefullWidget is an object class that we can use to create a User Interface (interface) that dynamic and can change based on events and our desires. Let's look at an example below.

Well, in the code example above, if we run it, we can create a UI that can change based on the button + , to increase the value in the middle. Please try.

let's see the explanation in the image below and we'll dissect the code.

Explanation (important points are in number 5 to 14)

1. runApp(MyApp()) :Is a method to run our application
2. StateLessWidget: is false one static instance of widget as I explained here
3. Widgets build(BuildContext context) : Is a method that is always called by the flutter framework to render the UI in the child widget
4. MaterialApp(): is false one widget provided by flutter to create a material app.
5. class HomePage extends StatefulWidget : This is our custom widget for creating classes StatefulWidget.
6. finals String title : Is a title parameter filled by the constructor
7. const MyHomePage({}) : Constructors
8. createState() : Represents lifecycle that is required to be written to create a StatefulWidget.
9. _MyHomePageState extends State : Is an object / class for us to start creating the UI and operate the State
10. void _incrementCounter() : Is a method to add the number +1 there is setState() which is a way to re-render the UI.
11. Scaffold() : Is false one widget provided by flutter for more details here
12. widget.title() : Is a way to retrieve parameters passed to StatefulWidget.
13. widget.title() : Is click event on the + button

That's all I can explain. Hopefully useful :)