animationsを使ってみる

install

$ fvm flutter pub add animations
$ fvm flutter pub get

SharedAxisPageTransitionsBuilderの例

READMEにサンプル動画があるけど、

animations | Flutter Package

以下の4つが用意されている。

Shared axis
Container transform
Fade through
Fade

// app_theme.dart
import 'package:animations/animations.dart';
import 'package:flutter/material.dart';

const _defaultPageTransition = SharedAxisPageTransitionsBuilder(
  transitionType: SharedAxisTransitionType.horizontal,
);

final appTheme = ThemeData(
  primarySwatch: Colors.blue,
  // 未指定のPlatformは、ZoomPageTransitionsBuilderになる
  pageTransitionsTheme: const PageTransitionsTheme(builders: {
    TargetPlatform.android: _defaultPageTransition,
    TargetPlatform.fuchsia: _defaultPageTransition,
    TargetPlatform.iOS: _defaultPageTransition,
    TargetPlatform.macOS: _defaultPageTransition,
    TargetPlatform.linux: _defaultPageTransition,
    TargetPlatform.windows: _defaultPageTransition,
  }),
);

// add.dart
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'app_theme.dart';

class App extends HookConsumerWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return FlavorBanner(
      child: MaterialApp.router(
        theme: appTheme,
        // ...略
      ),
    );
  }
}

詳しい使い方や設定方法などは、codelabsを参照。

Flutter 用のマテリアルモーションで美しい移行を作成する

標準のPageTransition

標準だと以下のPageTransitionBuilderが用意されている。

FadeUpwardsPageTransitionsBuilder
OpenUpwardsPageTransitionsBuilder
ZoomPageTransitionsBuilder
CupertinoPageTransitionsBuilder

親クラスはこれ。

PageTransitionsBuilder class - material library - Dart API

実際の動きはこの記事がわかりやすい

[Flutter] Navigatorを利用した画面遷移時の標準トランジション (エフェクト) を変更する方法 - Qiita

PageTransitionsThemeのデフォルト値などは、こんな感じ。

flutter/packages/flutter/lib/src/material/page_transitions_theme.dart at master · flutter/flutter · GitHub

const PageTransitionsTheme({ Map<TargetPlatform, PageTransitionsBuilder> builders = _defaultBuilders }) : _builders = builders;

// デフォルトの値(OS別で設定。webでもappでも同じ)
static const Map<TargetPlatform, PageTransitionsBuilder> _defaultBuilders = <TargetPlatform, PageTransitionsBuilder>{
  TargetPlatform.android: ZoomPageTransitionsBuilder(),
  TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
  TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
};

// buildersに存在しないものは、ZoomPageTransitionsBuilderを利用
final PageTransitionsBuilder matchingBuilder =
  builders[platform] ?? const ZoomPageTransitionsBuilder();