What does BuildContext do in Flutter?

· 5 min read
What does BuildContext do in Flutter
What does BuildContext do in Flutter

While designing and developing a flutter mobile application we might have used BuildContext many times. So in this article, we will go through what does BuildContext does in Flutter.

What does BuildContext do in Flutter?

BuildContext is, like its name is implying, the context in which a specific widget is built. Generally speaking, there are 2 use cases for context :

  • Interact with your parents (get/post data mostly)
  • Once rendered on screen, get your screen size and position

The second point is kinda rare. On the other hand, the first point is used nearly everywhere.

For example, when you want to push a new route, you’ll do Navigator. of(context).pushNamed(‘myRoute’).

Notice the context here. It’ll be used to get the closest instance of the NavigatorState widget above in the tree. Then call the method pushNamed on that instance.

When to use BuildContext?

BuildContext is really useful when you want to pass data downward without having to manually assign it to every widgets’ configuration for example; you’ll want to access them everywhere. But you don’t want to pass it on to every single constructor.

You could potentially make a global or a singleton, but then when confs change your widgets won’t automatically rebuild.

In this case, you use InheritedWidget. with it you could potentially write the following :

class Configuration extends InheritedWidget {
  final String myConf;

  const Configuration({this.myConf, Widget child}): super(child: child);

  @override
  bool updateShouldNotify(Configuration oldWidget) {
    return myConf != oldWidget.myConf;
  }
}

And then, use it this way :

void main() {
  runApp(
    new Configuration(
      myConf: "Hello world",
      child: new MaterialApp(
        // usual stuff here
      ),
    ),
  );
}

Now everywhere inside your app, you can access these configs using the BuildContext like below:

final configuration = context.inheritFromWidgetOfExactType(Configuration);

We can also say that BuildContext Class is nothing else but a reference to the location of a widget within the tree structure of all the widgets which are built.

Every flutter widget has an @override build() method with the argument of BuildContext.

class ContextTestWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {.....}
}

Simply explain is that the BuildContext is:

  • A BuildContext only belongs to one widget.
  • BuildContext objects are passed to WidgetBuilder functions
    A BuildContext only belongs to one widget.

If a widget ‘A’ has children’s widgets, the BuildContext of widget ‘A’ will become the parent BuildContext of the direct children BuildContexts.

Reading this, it is clear that BuildContexts are chained and are composing a tree of BuildContexts.

There are two types of widget

  • Class widget context (parent widget)
  • Build widget context (child widget)

1. Class widget context – This context is not visible for us, It’s only used by the framework itself for creating element tree.

2. Build widget context – This context is visible for us, Its use by the framework, and also we use it for some purposes eg:- for accessing the ancestor widget.

build widget context / BuildContext context

now, build widget context is the context type that you passed for build() method.

@override
Widget build(BuildContext context) {            //BuildContext
  return Text(
    'Example',
    style: Theme.of(context).textTheme.title,
  );
}

Where is the location of that widget?

To get an answer to the above question considers a code snippet like the below:

@override
Widget build(BuildContext context) {
  //here is the location of this child widget is build.
  return Text(
    'Example',
    style: Theme.of(context).textTheme.title,
  );
}

Consider a code snippet like the below:

@override
  Widget build(BuildContext context) {
    // here build location of that widget                     //here
    return Scaffold(
      appBar: AppBar(title: Text('Demo')),
      body: Builder(
        // here build location of that widget                 //here
        builder: (BuildContext context) {
          return FlatButton(
            child: Text('BUTTON'),
            onPressed: () {
              Scaffold.of(context).showSnackBar(SnackBar(
                content: Text('Hello.')
              ));
            }
          );
        }
      )
    );

Conclusion:

Thanks for being with us on a Flutter Journey.

So in this article, we have been through what does BuildContext does in Flutter.

Keep Learning !!! Keep Fluttering !!!

Still, need Support for Flutter Development? Do let us know.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply