【Flutter】TickerModeでアニメーションを制御

  • 2025年1月26日
  • 2025年1月26日
  • Widget
Widget

対象者

  • Flutterを使用してパフォーマンスを最適化したいフロントエンド開発者
  • タブ切り替えやスクロール時のアニメーション停止など、効率的なUI設計を目指している開発者
  • バッテリー消費を抑えながらアプリを最適化したい技術者

はじめに

FlutterのTickerModeは、特定のウィジェットツリー内のアニメーションを有効または無効にするためのウィジェットです。これを使用することで、UIのパフォーマンスを向上させ、バッテリー消費を抑えることができます。たとえば、バックグラウンド状態のアプリや非表示のタブでアニメーションを一時停止することで、リソースの無駄を削減できます。本記事では、TickerModeの基本的な使い方やその効果的な活用方法を解説します。

TickerModeとは

TickerModeは、ウィジェットツリー内のTickerを有効または無効にするためのウィジェットです。TickerはAnimationControllerのアニメーション駆動に使用され、TickerModeを使うことで特定の範囲のアニメーションを一時的に停止・再開できます。
非表示のタブやスクロール中にアニメーションを停止させることで、アプリのパフォーマンスを改善できます。

TickerModeにはenabledプロパティがあり、これにより有効(true)か無効(false)を制御できます。

  • true: アニメーションが通常通り動作
  • false: アニメーションが停止し、更新が行われなくなる（ただし値は保持される）

TickerModeの基本的な使い方

以下のコードスニペットは、TickerModeを使ってアニメーションを制御する例です。

TickerMode(
  enabled: false, // アニメーションを無効化
  child: CircularProgressIndicator(),
)

このコードでは、CircularProgressIndicator(プログレスバー)のアニメーションを一時停止しています。

TickerModeの活用例

1. スクロール中のアニメーション停止

リストやスクロールビューを操作している間は、他のアニメーションが不要なことがあります。TickerModeを使用してスクロール時のアニメーションを無効化することで、処理の負担を減らせます。

2. 非表示タブのアニメーション停止

複数タブがある場合、非表示タブのアニメーションを無効化することで、不要なリソース消費を抑えます。

3. バックグラウンド時のアニメーション停止

アプリがバックグラウンドに遷移した際、すべてのアニメーションを停止することで、バッテリーの消耗を抑えることができます。

サンプルコード

以下はTickerModeを使ったFlutterアプリのサンプルコードです。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _isAnimating = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TickerMode(
              enabled: _isAnimating,
              child: const CircularProgressIndicator(),
            ),
            Switch.adaptive(
              value: _isAnimating,
              onChanged: (value) => setState(() => _isAnimating = value),
            ),
          ],
        ),
      ),
    );
  }
}

実行結果

  • スイッチをONにすると、プログレスインジケーターが回転します。
  • スイッチをOFFにすると、インジケーターの回転が停止します。

説明

  • TickerModeのenabledをスイッチの状態で制御し、アニメーションのオン/オフを切り替えています。

まとめ

TickerModeは、Flutterアプリ内のアニメーションを一時的に停止し、再開するための便利なウィジェットです。特に以下のポイントを押さえておきましょう：

  • パフォーマンス改善: スクロール中や非表示タブのアニメーション停止によるパフォーマンス向上
  • バッテリー最適化: バックグラウンド時のアニメーション停止でバッテリー消費を抑制
  • 柔軟な制御: AnimationControllerと組み合わせて、ライフサイクルに応じたアニメーション制御が可能

Flutterアプリのパフォーマンス改善にはTickerModeの活用が非常に効果的です。ぜひあなたのプロジェクトでも試してみてください！

参考