2020/8/14 Flutter : InheritedWedgetの解説文字起こし、翻訳。

This is the third video in Flutter Widget 101.

これはFlutter Widget 101の3番目のビデオです。

 

Previously,you learned about stateless and statefull widget.

前回は、ステートレスおよびステートフルウィジェットについて学びました。

 

In this video,I’ll be talkeng about InheritedWidget.

このビデオでは、InheritedWidgetについて説明します。

 

When your app gets larger and your widget tree gets more complex,passing and accessing data can get cumbersome.

アプリが大きくなり、ウィジェットツリーが複雑になると、データの受け渡しとアクセスが煩雑になる可能性があります。

 

If you have four or five widgets nested one after the other and there is a piece of data you need to get from the top to the bottom, you’re adding it to all those constructors and all those build methods.

4つまたは5つのウィジェットが次々にネストされており、上から下に取得する必要のあるデータがある場合、それらをすべてのコンストラクターとすべてのbuildメソッドに追加しないといけません。

 

Ugh.

ああ。

 

I just want to reach up the tree to get that data.

そのデータを取得するために、(そのデータがある場所に)ツリーを上って到達できればいいんです。

 

Fortunately,there’s a widget type that allows just that.

幸いなことに、まさにそれを可能にするウィジェットタイプがあります。

 

It’s called InheritedWidget.

InheritedWidgetです。

 

When you put this widget in your tree,you can get a reference to it from any widget below it.

このウィジェットをツリーに配置すると、その下のウィジェットから(InheritedWidgetへの)参照を取得できます。

 

This is why we call it an InheritedWidget.

これが、InheritedWidgetと呼ばれる理由です。

 

Think about a family tree.

家系図について考えてください。

 

For example,I inherited my big nose from both my dad and my grandfather.

たとえば、私は父と祖父の両方から大きな鼻を受け継ぎました。

 

They’re both above me in the family tree, so I can inherit from them.

どちらも家系図では自分の上にあるので、継承していることになります。

 

So to be clear, this is not inherited as in a class hierarchy but inherited as in a widget hierarchy.

はっきりさせたいのですが、これはクラスの継承の話ではなく、ウィジェット階層の中で「継承されている」と表現しています。

 

Let’s see how we would implement one of those InheritedWidget.

これらのInheritedWidgetの1つを実装する方法を見てみましょう。

 

We’ll create a class called InheritedNose that extends InheritedWidget.

InheritedWidgetクラスを継承する「InheritedNose」というクラスを作成します。

 

We need our widget to accept at least one parameter, and that’s the child.

ウィジェットは少なくとも1つのパラメーター(引数)を受け取る必要があり、それがchildです。

class InheritedNose extends InheritedWidget{
  InheritedNose({Widget child}):super(child: child);

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) => true;
}

 

This is already a valid InheritedWidget,but it’s useless.

これはすでに有効なInheritedWidgetですが、これだけでは役に立ちません。

 

Let’s give it a nose.

(共有したいデータである)noseを用意しましょう。

 

In this case,the nose will be an image asset of a nose.

今回、noseは鼻の画像アセットになります。

 

We’ll just add that as a field of the InheritedWidget.

それをInheritedWidgetのフィールドとして追加するだけです。

sample1-1

class InheritedNose extends InheritedWidget{
    final Imag asset;
    
    InheritedNose({this.asset,Widget child}):super(child: child); 
    
    @override
    bool updateShouldNotify(InheritedWidget oldWidget) => true; 
}

 

Now any descendant of our InheritedNose can get access to it in its build method by calling context.dependOnInheritedWidgetOfExactType<InheritedNose>()

これで、InheritedNoseのすべての子孫は、context.dependOnInheritedWidgetOfExactType <InheritedNose>()を呼び出しすことにより、各子孫ウィジェットのbuildメソッド内からそれ(asset)にアクセスできます。(inheritFromWidgetOfExactTypeメソッドはDeprecated(非推奨)になっています。)

 

By calling this method with a type of your custom InheritedWidget, you tell Flutter to go up the tree,starting from the build context and look for a widget that matches that type.

カスタムInheritedWidgetの型を型引数として指定してこのメソッド(dependOnInheritedWidgetOfExactType)を呼び出すことにより、Flutterに対して、ビルドコンテキストから始めてツリーを上に移動し、その(型引数で指定した)タイプに一致するウィジェットを探すように指示します。

 

But to make things simpler and more readable,Inherited widgets often include a static method called “of”,which calls the InheritedWidget of exact type method for you.

しかし、物事をよりシンプルで読みやすくするために、継承されたウィジェット(InheritedNose)には、「of」と呼ばれるstatic(静的)メソッドが含まれていることがよくあります。この「of」メソッドは、自身のボディ内でdependOnInheritedWidgetOfExactType()メソッドを呼び出します。

sample1-2

class InheritedNose extends InheritedWidget{
  String asset;

  InheritedNose({this.asset,Widget child}):super(child : child);

  @override
  bool updateShouldNotify(InheritedWidget oldWidget)=> true;

  static InheritedNose of(BuildContext context)=>
      context.dependOnInheritedWidgetOfExactType();
}

 

Now we can rewrite your code in the descendant to read InheritedNose.of(context),
and that’s nice.

sample1-3では子孫(SubSubFilipWidget)のコードを書き換えて、InheritedNose.of(context)によりassetにアクセスすることができるようになりました。
いいですね。

samlple1-3

class SubSubFilipWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Column(
      children: [
        Text("${InheritedNose.of(context).asset}"),  
              //↑これでInheritedNoseのassetの値にアクセスできる。
      ],
    );
  }
}

 

If this “of” complex business seems familiar,that’s because it is used by the Flutter framework itself.

この「of」の複雑な仕組みはFlutterフレームワーク自体が使用しているため、見たことがある、と感じる方もいるかもしれません。

 

For example, you may know that the way to get the global theme of a material app,you do Theme.of(context).

たとえば、マテリアルアプリのグローバルテーマを取得する方法として、Theme.of(context)を実行する方法を知っている方がいるかもしれません。

 

Theme is in fact a type of InheritedWidget.

Themeクラスは、実はInheritedWidgetの一種です。

 

One thing about the InheritedWidget is that it is immutable.

InheritedWidgetについての1つは、それがイミュータブル(不変)であることです。

 

That is why our image asset is mark as final.

なぜならImage型のassetがfinal(定数)としてマークされているからです。

 

You can only replace an InheritedWidget’s field by rebuilding the whole widget.

ウィジェット全体を再構築することによってのみ、InheritedWidgetのフィールドを置き換えることができます。

 

Many InheritedWidgets will stay unchanged for the whole lifecycle of the app,and that’s OK.

多くのInheritedWidgetは、アプリのライフサイクル全体を通じて変更されないままであり、それで問題ありません。

 

But the fact that something is final only means it can’t be reassigned.

しかし、何かがfinal(定数)であるということは、それを再代入できないということです。

 

It does not mean it cannot change internally.

内部で変更できないという意味ではありません。

 

For example, instead of a value, you can attach a service object to the InheritedWidegt.

たとえば、値の代わりに、サービスオブジェクトをInheritedWidegtにアタッチできます。

 

It can be a wrapper around your database,a proxy for your web API,or a provider of assets.

それは、データベースのラッパー、Web APIのプロキシ、またはアセットのプロバイダーなどです。

 

The service object can have its own internal state.

サービスオブジェクトは独自の内部状態を持っていることが考えられます。

 

It can initiate network calls,anything.

ネットワークコールを初期化に使う、とか。

 

In our case, no service will provide various nose-related service.

今回の私たちのケースでは、鼻に関連するさまざまなサービスが提供されるわけではありません。

 

Each descendant of the InheritedNose widget can easily get hold of the service through InheritedNose.of(context).

InheritedNoseウィジェットの各子孫は、InheritedNose.of(context)を通じてサービスを簡単に取得できます。

 

It can call method on it.

取得したサービスのメソッドを呼び出したり、

サービスのstreamをサブスクライブしたりすることができます。

InheritedNose.of(context).service.blow();


StreamBuilder(
    stream : InheritedNose.of(context).service.sneezes,//←sneezesがstream
    builder : /* ... */
);

 

To summarize, InheritedWidget is very neat.

要約すると、InheritedWidgetは非常に優れています。

 

It lets you access state from way above in the tree.

ツリーの上の方にあるstateにアクセスできます。

 

So in the past three episodes,we’ve covered three really useful widgets.
StatelessWidget
StatefulWidget
InheritedWidget

私たちの過去の3つのエピソードでは、3つの非常に便利なウィジェットを取り上げました。
StatelessWidget
StatefulWidget
InheritedWidget

 

Next time, we’re going to talk about something very different ,but equally important.
Keys.

次回は、少し今までとは異なるテーマについて話しますが、同様に重要です。
Keyについてです。

 

Also be sure to head to flutter.io to see all of our widgets.

また、すべてのウィジェットを表示するには、必ずflutter.ioにアクセスしてください。

 

 

コメントを残す

メールアドレスが公開されることはありません。