Flutter: what is Context

Hi, everyone, my name is Daniil and I am Flutter developer at AppVesto.
In this article, we will understand what the context is and how to use it correctly.

What is Widget
To make sure that we are on the same wave, let’s start with the concept of Widget. You must have heard the phrase: “Everything in Flutter is a widget”. However, this is not quite right.
It is more correct to say that widgets are everything that is displayed on the screen. The overall layout of the page, the position and size of the button, the color and size of the text — all this is created using widgets.

What is a tree of widgets
Widgets in Flutter have a hierarchical structure or, in other words, widgets are organized as a tree.
– A widget that contains other widgets is called a parent widget or parent Widget.
– Widgets that are stored in the parent widget are called child or child Widgets.
Consider a small example of standard code that is automatically generated when a new project is created.

@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),
      ),
    );
 }

Scaffold widget is a parent widget for Center, and Center, in turn, is a parent widget for Column. Accordingly, Column is a child widget for Center.

How to create a widget
To create any widget, the build method is used, which accepts BuildContext as an argument.
BuildContext is a description of the widget position in the widget tree. It is this class that describes the parent-children ratio and allows to implement such functions as 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 parent widget and to get the necessary information that is contained in the parent context.

What do you need to know about context
– Context is a link to the location of a widget in the tree structure of widgets.
– Context can belong to only one widget.
– If a widget has child widgets, then the context of the parent widget becomes the parent context for the contexts of direct child elements.
– A widget is visible only in its own context or in the context of its parent context.
Thus, it becomes clear that knowing the children’s context, you can easily find the parent widget. Conversely, 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.
“Communication” of widgets among themselves is provided by the method Of().
Let’s consider a small example:

@override
Widget build(context) {
  return Text('Subscribe to the AppVesto Instagram!',
    style: TextStyle(color: Theme.of(context).primaryColor),
  );
}

Method of() searches the widget tree for a parent widget that is of Theme type 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 method of() can be useful for many tasks, such as obtaining screen size with MediaQuery.of(context) or navigating with Navigator.of(context). To create some widgets, such as snackBar, you need to use the nearest Scaffold context so that Flutter can draw it correctly on the screen.
When you execute the following code you will get an error: “Scaffold.of() called with a context that does not contain a Scaffold”.
Example (Does not work):

Widget build(BuildContext context) {
 return Scaffold(
   appBar: AppBar(
 	title: Text(widget.title),
   ),
   body: Center(
 	child: RaisedButton(
   	child: Text('Show Snack Bar'),
   	onPressed: () {
     	Scaffold.of(context).showSnackBar(
       	SnackBar(
         	backgroundColor: Colors.blue,
             content: Text('I am SNACKBAR!!!'),
           ),
         );
   	},
 	),
   ),
 );
}

This code does not work because the Scaffold widget has not yet been created, and the context that was passed to the build method points to a parent that does not contain Scaffold.
So, how do we give the child widget snackBar access to the parent widget Scaffold?
To fix the problem, wrap the button with the Builder widget and everything will work:

Widget build(BuildContext context) {
 return Scaffold(
   appBar: AppBar(
 	title: Text(widget.title),
   ),
   body: Center(
 	child: Builder(
   	builder: (BuildContext context) {
     	return RaisedButton(
       	child: Text('Show Snack Bar'),
           onPressed: () {
         	Scaffold.of(context).showSnackBar(
           	SnackBar(
             	backgroundColor: Colors.blue,
             	content: Text('I am SNACKBAR!!!'),
               ),
             );
           },
         );
   	},
 	),
   ),
 );
}

Builder allows you to get and use the widget context in which the Builder itself is located. In the example above it is a Scaffold widget.
If you have any questions left, ask them in your comments and I will be happy to answer them.

Builder allows you to get and use the widget context in which the Builder itself is located. In the example above it is a Scaffold widget.
If you have any questions left, ask them in your comments and I will be happy to answer them.