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