What is a widget?
To make sure we're on the same wavelength, let's start with the concept of a widget. You must have heard the phrase: “Everything in Flutter is a widget”. However, this is not entirely correct.
It is more correct to say that widgets are everything that is displayed on the screen. The general design of the page, the position and size of the button, the color and size of the text, all of this is created by means of widgets that in the end are classes with properties and methods that the Flutter framework renders on the screen in such a way. visual, there are even widgets with particular mechanics that do not render content directly on the screen; For example, the FutureBuilder or the StreamBuilder that allows asynchronous communications or with this data, re-render a content, therefore, they help to render a content but they do NOT render a content directly or perse.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}The Scaffold widget is a parent widget for Center, and Center is a parent widget for Column. Consequently, Column is a child widget for Center.
How to create a widget
To create any widget, the build method is used, which accepts the BuildContext as an argument.
BuildContext is a description of the widget's position in the widget tree and also brings a lot more information about the element we are rendering, such as the state, widget type, etc. It is this class that describes the parent-child relationship and allows to implement functions like showDialog, Theme.of and some other functions that allow to use the context of the parent widget, such as its size and location. BuildContext is used to avoid direct manipulation of the widget main and to get the necessary information that is contained in the main context.
What do you need to know about the context?
- The context is a link to the location of a widget in a tree structure of widgets.
- The context can belong to only one widget.
- If a widget has child widgets, the parent widget context becomes the parent context for the direct child contexts.
- A widget is visible only in its own context or in the context of its parent context.
Thus, it becomes clear that by knowing the context of the children, the parent widget can be easily found. Instead, using the parent context, you can find the child widget.
The "of()" method
As we already know, widgets in Flutter have a tree structure and can communicate with other widgets located both below and above the widget tree. The "communication" of widgets with each other is provided by the Of() method. Let's consider a small example:
@override Widget build(context) { return Text('Subscribe to the AppVesto Instagram!', style: TextStyle(color: Theme.of(context).primaryColor), ); }The of() method searches the widget tree for a parent widget that is of type Theme and uses its primaryColor property for the current widget. This is possible because Flutter knows the position of the Theme object in the tree relative to the current buildContext.
The of() method can be useful for many tasks, such as getting the screen size with MediaQuery.of(context) or navigating with Navigator.of(context). To create some widgets, like the snackBar, you need to use the closest Scaffold context so that Flutter can draw it correctly on the screen.
When you run the following code you will get an error: "Scaffold.of() called with a context that does not contain a scaffold."
A very particular example about how the context works and its importance to build certain widgets like the SnackBar one; it needs to be contained within a scaffold in order to be displayed; if there is no Scaffold there is NO life for the SnackBar.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter