InheritedWidgetを解説

2020.01.21

こんにちはnasustです。

今回はInheritedWidgetを解説します。

InheritedWidget class - widgets library - Dart API

API docs for the InheritedWidget class from the widgets library, for the Dart programming language.

https://api.flutter.dev

InheritedWidgetは変数の値などをツリーあるWidgetに効率的に伝達するクラスです。このWidgetを使用するとGlobalKeyを使用しなくても対象のWidgetに変数の値を伝達できます。

解説用のソースは「シンプルな壁紙対応時計を開発する」を使用します。これをGlobalKeyからInheritedWidgetに変更して解説します。

InheritedWidget対応のソースは以下のリンクにあります。

nasust/flutter_study_projects

Contribute to nasust/flutter_study_projects development by creating an account on GitHub.

https://github.com

file_inherited_widget.dart

libs/widgets/file_inherited_widget.dartは以下の通りです。 InheritedWidgetを継承しています。

import 'dart:io';

import 'package:flutter/widgets.dart';

class FileInheritedWidget extends InheritedWidget {
  const FileInheritedWidget({
    Key key,
    @required this.file,
    @required Widget child,
  }) : super(key: key, child: child);

  final File file;

  static FileInheritedWidget of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<FileInheritedWidget>();
  }

  @override
  bool updateShouldNotify(FileInheritedWidget old) => file != old.file;
}

InheritedWidgetのドキュメントにあるサンプルコードをFileに置き換えただけの実装です。

FileInheritedWidgetが作成されると、static FileInheritedWidget of(BuildContext context)を呼んだStateのbuildメソッドが実行されます。

buildメソッドが実行される際に、context.dependOnInheritedWidgetOfExactTypeが返すFileInheritedWidgetから最新の画像ファイルが取得できます。

main.dart

lib/main.dartをInheritedWidgetで壁紙を変更するように変更しました。

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

import 'widgets/clock_widget.dart';
import 'widgets/file_inherited_widget.dart';
import 'widgets/wallpaper_widget.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Clock',
      theme: ThemeData.dark(),
      home: _ClockHomePage(),
    );
  }
}

class _ClockHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ClockHomePageState();
  }
}

class _ClockHomePageState extends State<_ClockHomePage> {
  File _imageFile;

  _pickImage() async {
    var imageFile = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _imageFile = imageFile;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        behavior: HitTestBehavior.opaque,
        child: Stack(
          children: <Widget>[
            Container(
              child: FileInheritedWidget(
                child: WallpaperWidget(),
                file: _imageFile,
              ),
            ),
            Container(
              child: Center(
                child: ClockWidget(),
              ),
            ),
          ],
        ),
        onTap: () => _pickImage(),
      ),
    );
  }
}

_ClockHomePage

_ClockHomePageはStatefulWidgetに変更しました。壁紙を変更した際にInheritedWidgetを作成する為に変更しました。

_ClockHomePageState

_pickImage()とbuild()を_ClockHomePageStateに移動して、 GlobalKeyからInheritedWidgetを使用するように変更しました。

FileInheritedWidgetで指定した画像ファイルが変更されると、 WallpaperWidgetが再描画されます。

wallpaper_widget.dart

import 'package:flutter/widgets.dart';

import 'file_inherited_widget.dart';

class WallpaperWidget extends StatefulWidget {
  WallpaperWidget({Key key}) : super(key: key);

  @override
  State<WallpaperWidget> createState() {
    return _WallpaperWidgetState();
  }
}

class _WallpaperWidgetState extends State<WallpaperWidget> {
  @override
  Widget build(BuildContext context) {
    var imageFile = FileInheritedWidget.of(context).file;
    Image image;

    if (imageFile != null) {
      image = Image.file(imageFile, fit: BoxFit.cover);
    }

    return Container(
      constraints: BoxConstraints.expand(),
      child: image,
    );
  }
}

InheritedWidgetから画像ファイルを取得するように変更しました。親のFileInheritedWidgetが作成され、画像ファイルが更新されると build()が実行されて再描画します。

InheritedWidgetのまとめ

サンプルコードでInheritedWidgetの動きが理解できたと思います。さらに理解できるようにInheritedWidgetの動きを改めてリストアップします。

_ClockHomePageStateのbuild()でFileInheritedWidgetをツリーに追加する。
_WallpaperWidgetStateのbuild()でFileInheritedWidget.of()を実行して依存関係を登録する。Fileの値を取得する。以降、親のFileInheritedWidgetが変更されると通知されるようになる。
画像を選択して再度、 _ClockHomePageStateのbuild()を実行する。
親のFileInheritedWidgetの変更が通知されると、_WallpaperWidgetStateのbuild()が再実行されて、画像を表示する。

InheritedWidgetの動きを見るとObserverパターンで実装されているのが分かります。通知とリスナーの登録が自動化されています。

InheritedWidgetを使用することで、直接リスナーを登録しなくても変更を受け取れるので、リファクタリングしやすい実装になりますね。

B!