Understanding BuildContext in Flutter

Image from datascienceethics

As we all know that everything in Flutter is a widget. Every Flutter widget has a @override build() method with the argument of BuildContext

class ButtonWidget extends StatelessWidget {
@override
  Widget build(BuildContext context) {
     ...
  }
}

Then what is BuildContext?

BuildContext Class is a reference to the location of a widget within the tree structure of all the Widgets which are built.

Widget build(BuildContext context) {
     ...
}

As we all know that in Flutter, everything is a widget. A Container, a Column, a Row, a Button etc. A Flutter application is a combination of different widgets widget and a parent widget can have one or more child widgets also.

The entire widgets of a Flutter application are shown in the form of a Widget Tree where we link the parent and child widgets to show a relationship between them.

The following is an example of a Widget Tree in Flutter:

Image from Stackoverflow

As we all know, the build method creates every widget in Flutter, and the build method takes a BuildContext as an argument. This assists the build method in determining which widget it will draw as well as the location of the widget to be drawn in the widget tree.

An example of a build method that returns a Scaffold is as follows:

class ButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     return Scaffold();
  }
}

If a widget is having some children widgets then both the parent and the children will have their own BuildContext. Now, the BuildContext of the parent widget will be the parent of the BuildContext of its direct children widget.

It’s also worth noting that widgets are only available to their own BuildContext or its parent’s BuildContext. As a result, you will find the parent widget from a child widget.

For instance, if the tree structure is as follows: Scaffold > Center > Column > Container, then you can get the first Scaffold from Container by going up:

context.ancestorWidgetOfExactType(Scaffold)

You can also locate a child widget from a parent widget and for that, we use InheritedWidgets. This use-case of BuildContext can be used to pass some message from the parent to the child widget in the widget tree.

When using BuildContext, always double-check that the context you’re using in the method is the same as the context that’s needed.

For example, Theme.of(context) looks for the nearest Theme .

So, if any widget is having a Theme in its returned widget tree and it is calling Theme.of(passing its own context) then the build method of the widget will find whatever Theme was an ancestor to the widget and use it to build the widget.

@override
Widget build(context) {
  return new Text('Hello, World',
    style: new TextStyle(color: Theme.of(context).primaryColor),
  );
}

So, to get the BuildContext of the subpart of the tree, you can use the Builder widget and the context passed to the Builder widget will be the context of that Builder widget only.