【Flutter】1枚の画像を横に無限スクロールさせたい

Question

お世話になっております。
今回はFlutterに関しての質問です。

現在やりたいことについて、頭の中ではイメージできているのですが、言語化したりコードに落とし込むのが難しくて困っております。
画面サイズよりも大きな1枚の画像（端と端が繋がるような画像）があり、それを左へスライドさせていき、
画像の右端についたらその横に同じ画像をもう1枚表示し、さらにスライドさせるという
いわゆる無限ループするアニメーションを作りたいです。

言葉だけではイメージが伝わりづらいかも知れないので、稚拙ですがイメージ画像も貼っておきます。

青い枠が表示する画像で、放っておくと無限ループするイメージです。
（これでも伝わらなかったらすみません）

このように、なんとなくやりたいことのイメージは出来ているのですが、Flutter上で実現する方法がさっぱり思いつきません。
似たようなことを考えている人が居ないか、いろいろ検索してみましたが有用な情報には到達できませんでした。

同じやり方でなくとも同じことが出来ればいいので、解決方法をご存知の方いらっしゃいましたら回答をお願いいたします。

Answer 1

// 2021/12/8 追記

以前の内容ですと、画像の縦幅が画面のサイズを超えるとき、縦幅が画面サイズに合わせて小さくなり、
それに合わせて横幅も小さくなってループ時にずれることがありました。
ずれない方法を考えましたので、追記しておきます。

// デバイスの画面サイズ（高さ）
late double deviceHeight;

// 画像の横幅
late double imageWidth;

// アニメーションコントローラー
late AnimationController controller;

// アニメーション
late Animation<RelativeRect> rectAnimation;

// contextを受け取るために、didChangeDependenciesで初期化する
@override
void didChangeDependencies() {
  super.didChangeDependencies();

  // デバイスの画面サイズ（高さ）取得
  deviceHeight = MediaQuery.of(context).size.height;

  // 画像の縦横比
  double aspectRatio = 1.8;

  // 画像の横幅計算
  imageWidth = deviceHeight * aspectRatio;

  // コントローラー初期化
  controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 10),
  )..repeat();

  // 1枚目が終わったら止めてリピートする
  rectAnimation = RelativeRectTween(
    begin: RelativeRect.fromLTRB(imageWidth, 0, 0, 0),
    end: RelativeRect.fromLTRB(0, 0, imageWidth, 0),
  ).animate(
    CurvedAnimation(parent: controller, curve: Curves.linear),
  );
}

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: PositionedTransition(
      rect: rectAnimation,
      child: OverflowBox(
        maxWidth: imageWidth * 2, // 画像2枚分
        maxHeight: deviceHeight, // 画面の高さに合わせる
        child: Row(
          children: <Widget>[
            Image(
              height: deviceHeight, // 画面の高さに合わせる
              fit: BoxFit.fitHeight,
              image: const AssetImage('画像のパス'),
            ),
            Image(
              height: deviceHeight,  // 画面の高さに合わせる
              fit: BoxFit.fitHeight,
              image: const AssetImage('画像のパス'),
            ),
          ],
        ),
      ),
    ),
  );
}

この方法は、画像が画面全体を覆うようなものである場合に有用です。
縦幅が絶対に画面サイズを超えない場合は、以前の方法で問題ないかと思います。

// 以前の自己解決時の内容

PositionedTransitionを使ってなんとかそれっぽくなったので自己解決とします。

late final AnimationController _controller = AnimationController(
  vsync: this,
  duration: const Duration(seconds: 10),
)..repeat();

@override
Widget build(BuildContext context) {
  return PositionedTransition(
    rect: RelativeRectTween(
      begin: const RelativeRect.fromLTRB(1200, 0, 0, 0),
      end: const RelativeRect.fromLTRB(0, 0, 1200, 0),
    ).animate(
      CurvedAnimation(parent: _controller, curve: Curves.linear),
    ),
    child: OverflowBox(
      maxWidth: 2400,
    ),
    child: Row(
      children: <Widget>[
        // 画像を2枚並べる
      ],
    ),
  );
}