Flutter – What does BuildContext do in Flutter

flutter

What does BuildContext do, and what information do we get out of it?

https://docs.flutter.io/flutter/widgets/BuildContext-class.html is just not clear.

https://flutter.io/widgets-intro/#basic-widgets on the 9th instance of the term BuildContext there is an example, but it's not clear how it is being used. It's part of a much larger set of code that loses me, and so I am having a hard time understanding just what BuildContext is.

Can someone explain this in simple/very basic terms?

Best Answer

BuildContext is, like it's name is implying, the context in which a specific widget is built.

If you've ever done some React before, that context is kind of similar to React's context (but much smoother to use) ; with a few bonuses.

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 NavigatorState widget above in the tree. Then call the method pushNamed on that instance.

Cool, but when do I want to use it ?

BuildContext is really useful when you want to pass data downward without having to manually assign it to every widgets' configurations for example ; you'll want to access them everywhere. But you don't want to pass it on 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
      ),
    ),
  );
}

Thanks to that, now everywhere inside your app, you can access these configs using the BuildContext. By doing

final configuration = context.inheritFromWidgetOfExactType(Configuration);

And even cooler is that all widgets who call inheritFromWidgetOfExactType(Configuration) will automatically rebuild when the configurations change.

Awesome right ?

Related Topic