🎬

flutter_hooksでアニメーションを作ってみた!

2024/01/10に公開

Flutter

Dart

idea

HookWidgetを使ってみたい!

Flutterは簡単にアニメーションをつけることができる。簡単と言っても知識は必要。前回アニメーションの勉強をする記事を書いて、それを参考に記事を書いたのと、StatefulWidgetとHookWidgetでは使える機能が異なるので、そこの解説をしたいと思いました。

今回はこんなものを作ってみた!

これがサンプルコード

今回は作り方の解説より、アニメーションやってみたよ〜って記事ですので、全部内容は書きません。サンプルコードを参考にしてみてください。

前回書いたアニメーションの記事:

Flutter Genを使って画像とフォントの設定はしてます

補足情報

StatefulWidgetでないとTickerProviderStateMixinクラスが使えないので、HookWidgetで同じような機能を使うときは、useSingleTickerProviderを使います。他に違いがあるとしたら、flutter_hooksだと状態の破棄は勝手にやってくれるので、disposeメソッドを書かないところでしょうか...

これが、flutter_hooksで使えるアニメーションの機能たち。リファレンス見てもさっぱりわからん???

作ったもの

ふわ〜っと文字が出てきて、ボタンに変わって次のページは画面遷移するアニメーションのDEMOアプリです。

🔚NextPageクラス

これは次のページで表示する画像とテキストをラップしてるコンテナがくるくる回るアニメーションです。今日までこれ仕組みが理解できなかった😅

これが良くある方法:

StatefulWidgetの場合

import 'package:flutter/material.dart';
import 'dart:math' as math;

class AnimatedBuilderExample extends StatefulWidget {
  const AnimatedBuilderExample({super.key});

  @override
  State<AnimatedBuilderExample> createState() => _AnimatedBuilderExampleState();
}

///AnimationController は `vsync:this` で作成できます。
/// TickerProviderStateMixin.
class _AnimatedBuilderExampleState extends State<AnimatedBuilderExample>
    with TickerProviderStateMixin {
  // lateをAnimationControllerにつけると、初期化を遅らせることができる。..repeat()で繰り返しアニメーションを行う。
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 10),
    vsync: this,
  )..repeat();

  // AnimationControllerを破棄する必要があるので、dispose()をオーバーライドする。
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // AnimatedBuilderは、アニメーションの値を受け取り、ウィジェットを構築する。
    return Scaffold(
      appBar: AppBar(
        title: const Text('AnimatedBuilder Example'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller, // AnimationControllerを渡す。
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
            child: const Center(
              child: Text('くるくる回っちゃうもんね〜'),
            ),
          ),
          builder: (BuildContext context, Widget? child) {
            // Transform.rotateで回転させる。
            return Transform.rotate(
              angle: _controller.value * 2.0 * math.pi,
              child: child,
            );
          },
        ),
      ),
    );
  }
}

HookWidgetの場合:

Hookの場合

import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_animaition/gen/assets.gen.dart';

class NextPage extends HookWidget {
  const NextPage({super.key});

  @override
  Widget build(BuildContext context) {
    // 画像がくるくる回るアニメーションを制御するためのuseAnimationController
    final controller = useAnimationController(
      duration: const Duration(seconds: 3),
      vsync: useSingleTickerProvider(),
    )..repeat();
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: AnimatedBuilder(
          animation: controller, // AnimationControllerを渡す。
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
            child: Center(
              child: Column(
                children: [
                  Assets.images.orechan.image(
                    width: 100,
                    height: 100,
                  ),
                  const Text('くるくる回っちゃうもんね〜'),
                ],
              ),
            ),
          ),
          builder: (BuildContext context, Widget? child) {
            // Transform.rotateで回転させる。
            return Transform.rotate(
              angle: controller.value * 2.0 * math.pi,
              child: child,
            );
          },
        ),
      ),
    );
  }
}

🔜FirstPageクラス

最初のページは、画面が呼ばれるとおしゃれな文字ってわけではないですがアニメーションが表示されて、次のページへ画面遷移するボタンに変わります。StatefulWidgetのときは、initStateとsetStateを使ってますが、HookWidgetのときは、useStateで状態の管理をして、ページが呼ばれたら、useEffectでアニメーションを実行するメソッドを実行しています。