What is a widget?

This is something that took me a while to understand in flutter, so I will take the time to explain in a
way I wish someone had explained to me earlier. To make my explanation simple and clear I will use
small code snippets, them being shorter will allow me to dissect the code and give you a clear picture
of what is going on.
So with out wasting much of your time let me get into it. So, what exactly is a widget? Well, there are
more technical explanations, but honestly I like to keep my answers simple enough for everyone to
have a clear understanding of what I am talking about. So in simplicity a widget is a tool used in flutter
to create user interfaces. This is my definition from what I have learnt so far. I am sure it is not an
accurate definition, but it should be halfway there.
It is clearly evident that apps have many parts to their user interface, and hence we can say each app
is composed of several widgets put together (composed to make the UI). It is very important that we
arrange widgets in the right way when making app UI’s. But, what is the right way to arrange widgets?
Well, widgets are arranged in some form of a family tree we have parent widgets and children
widgets. This structure is more technically called the widget tree, and such a concept is technically
called aggressive decomposition. But, from what I know these technical terminologies though
important in some aspects are kind of pedagogical and don’t really help much when actually
developing apps.

Building Widgets

As I mentioned earlier flutter does the job of using tools, widgets, to build the UI. However we need
to configure these widgets so that the UI is configured to our preference. For example we can give the
widgets a particular colour or shape.
A good question at this point would be, ‘How does flutter render a widget into part of the UI?’. Well,
to render a widget flutter needs to call the build function that every widget must have. This function
returns a widget that contains the configuration information that we want flutter to use in displaying
the app UI as we want it to appear.
The build method takes in a single argument, the BuildContext (which I will explain on in a bit), and
returns a widget. Below is a simple example of a widget. This is the first widget of a particular flutter
application.

class MyApp extends StatelessWidget{

//this widget is the parent to all your other widgets
@override
Widget build(BuildContext context){
return MaterialApp(
title: “Example”,
home: Center(
child: Text(“Hello”),),
);
}
}

In this example, the build method returned the widget MaterialApp that tells the UI to build an
android like UI(if Cupertino was returned, we would have had iOS type UI). And we should display
some text onto the screen. Another thing we can see from this example is what a simple widget tree
looks like. To see this we need to know what widgets we have used in the example:
1. MaterialApp (Gives an android touch to the UI)
2. Center (Place children of widget in the center of the screen)
3. Text (renders text)
MaterialApp -> Center -> Text
And we can see that the parent MaterialApp widget has the child Center, who also has the child Text.

Let, me explain to you the argument BuildContext, as I promised earlier on. The example I gave you
was really basic and most UI’s have deep widget trees. What build context does is it allows flutter to
tell where in the widget tree a particular widget is. This is of great importance and we will see this in
later posts, so please follow and subscribe for more of my content.

State

Another important thing about widgets to know before moving forward is state. As with the theme of
my content, I love short straight to the point answers and explanations. So basically state is the data
held by a widget. In the previous example, the text “Hello” can be considered as part of the state.
All widgets have immutable data, that is widgets can store data, however this data cannot change.
But then you may wonder how do we create UI’s with changing data e.g displaying the current time or
temperature, or allowing the user to write and save notes? I will give the answer to this in my next
series of posts on Stateless and Stateful widgets. Hope to see you then. Bye for now