SizeTransition class

独自のサイズをアニメーション化し、子をクリップして位置合わせします。

SizeTransitionは、axisの値に応じて、幅または高さのいずれかをアニメーション化するClipRectとして機能します。

軸に沿った子ウィジェットの配置は、axisAlignmentによって指定されます。

ほとんどのウィジェットと同様に、SizeTransitionは指定された制約に準拠するため、サイズを変更できるコンテキストに配置してください。

たとえば、固定サイズのコンテナに配置すると、SizeTransitionはサイズを変更できず、何もしないように見えます。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 6),
      vsync: this,
    )..repeat();
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.elasticInOut,
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizeTransition(
        sizeFactor: _animation,
        axis: Axis.horizontal,
        axisAlignment: 0,
        child: Center(
          child: FlutterLogo(size: 200.0),
        ),
      ),
    );
  }
}

参考

https://api.flutter.dev/flutter/widgets/SizeTransition-class.html

axisAlignment property

sizeFactor(アニメーション)が変更している軸に沿ってchildを整列させる方法について説明します。

-1.0の値は、axisがAxis.verticalの場合は上部を示し、axisがAxis.horizontalの場合は開始を示します。 開始は、有効なテキスト方向がTextDirection.ltrの場合は左側にあり、TextDirection.rtlの場合は右側にあります。

値1.0は、軸に応じて、下部または端を示します。

0.0（デフォルト）の値は、いずれかの軸値の中心を示します。

参考

https://api.flutter.dev/flutter/widgets/SizeTransition/axisAlignment.html