Flutter: reusable widget and BuildContext

Question

In a flutter app, let say I have this widget class with multiple widgets inside (ie. just a typical single long Widget build() class with multiple widgets inside). Then these are split into multiple children widgets, with their own classes: As an example,

Before:

 class Parents extend StatelessWidget{
   Widget build(BuildContext context){
      //Parent
      return Column{
          children: <Widget>[
              //Child 1
              Container('something inside'),

              //Child 2
              Container('something inside'),

              //Child 3
              Container('something inside'),
              ...
          ]
      }
   }
 }

Now:

 class Parents extend StatelessWidget{
   Widget build(BuildContext context){
      //Parent
      return Column{
          children: <Widget>[
              //Child 1
              myContainer('first child'),

              //Child 2
              myContainer('first child'),

              //Child 3
              myContainer('first child'),

              ...
          ]
      }
   }
 }

 class myContainer extend StatelessWidget{
   Widget build(BuildContext context){
      //child reusable widget
      return Container{
        'something inside'
      }
   }
 }

The question that I have is this Widget build(BuildContext context) .

In the above example, I called the myContainer class three times in the parent class. In my mind, it means that the build widget is called four times (one with parent, 3 times from each child).

I mean, I saw a bunch of examples online that above approach is recommended, but is it really a proper way of doing it? I may not understand the flutter completely yet, but since it is a widget tree, would it be more efficient (in terms of performance wise) to simply pass the parent context down to the children? like below:

class myContainer extend StatelessWidget{
  final BuildContext parentContext;

   Widget build(parentContext){
      //child reusable widget
      return Container{
        'something inside'
      }
   }
 }

Both approaches seem to work but wanted to see if I am way off with my way of thinking. I don't fully understand the mechanism of Context and any clarification would be super appreciated!

Thanks guys!

Answer 1

From thedocs :

Each widget has its own BuildContext, which becomes the parent of the widget returned by the StatelessWidget.build or State.build function. (And similarly, the parent of any children for RenderObjectWidgets.)

In particular, this means that within a build method, the build context of the widget of the build method is not the same as the build context of the widgets returned by that build method. This can lead to some tricky cases. For example, Theme.of(context) looks for the nearest enclosing Theme of the given build context. If a build method for a widget Q includes a Theme within its returned widget tree, and attempts to use Theme.of passing its own context, the build method for Q will not find that Theme object. It will instead find whatever Theme was an ancestor to the widget Q. If the build context for a subpart of the returned tree is needed, a Builder widget can be used: the build context passed to the Builder.builder callback will be that of the Builder itself.

So, this basically means that the BuildContext inside the build() method is actually that of it's parent. Hence, their is no need to explicitly pass it.