Flutter: ウィジェットをキャッシュするユーティリティウィジェット

Flutter: ウィジェットをキャッシュするユーティリティウィジェット

June 4, 2024

パフォーマンス改善のために、ウィジェットをキャッシュしておいて必要なときだけリビルドしたい、そんなときはこんなユーティリティウィジェットが便利です。

呼び出し元から受け取った child をキャッシュしておいて、再ビルドフラグが true のときは child を再生成、false であればキャッシュからそのまま描画するウィジットです。

class CacheWidget extends StatefulWidget {
  const CacheWidget({
    super.key,
    required Widget child,
    required bool shouldRebuild,
  })  : _child = child,
        _shouldRebuild = shouldRebuild;

  final Widget _child;
  final bool _shouldRebuild;

  @override
  State<CacheWidget> createState() => _CacheWidgetState();
}

class _CacheWidgetState extends State<CacheWidget> {
  Widget? _cache;

  @override
  Widget build(BuildContext context) {
    return _cache =
        _cache == null || widget._shouldRebuild ? widget._child : _cache!;
  }
}

以下のように使います。

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    final isDataUpdated = Random().nextBool();

    return MaterialApp(
      home: CacheWidget(
        shouldRebuild: isDataUpdated,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('My title'),
          ),
          body: const Center(
            child: Text('Hello, World!'),
          ),
        ),
      ),
    );
  }
}

参考 #

  • StatefulWidget class - widgets library - Dart API
    • https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html
    • If a subtree does not change, cache the widget that represents that subtree and re-use it each time it can be used. To do this, assign a widget to a final state variable and re-use it in the build method. It is massively more efficient for a widget to be re-used than for a new (but identically-configured) widget to be created. Another caching strategy consists in extracting the mutable part of the widget into a StatefulWidget which accepts a child parameter.

  • 【Flutter】 無駄なリビルドを防ぐたった 1 つの方法 - Qiita