[Flutter]ページスワイプ(page swipe)にリキッドアニメーション(liquid animation)をつけるには？

どうも、ちょげ(@chogetarou)です。

ページスワイプで切り替える際に、リキッドアニメーションをつける方法を紹介します。

方法

ページを切り替える際にリキッドアニメーションをつけるには、「liquid_swipe」パッケージを使います。

まず、パッケージを「pubspec.yaml」で導入します。

dependencies:
  liquid_swipe: ^2.1.1

そして、該当ファイルでインポートします。

import 'package:liquid_swipe/liquid_swipe.dart';

次に、表示するページのリストを作ります。

  var pages = <Widget>[
    Page1(),
    Page2(),
    Page3(),
  ];

次に、ページスワイプをする場所で、LiquidSwipeウェジェットを使います。

引数「pages」に、スワイプで切り替えるページをリストで設定します。

LiquidSwipe(
  pages: pages,
),

最後に、LiquidSwipeの引数「waveType」に、リキッドアニメーションの設定をします。

body: LiquidSwipe(
  pages: pages,
  waveType: WaveType.liquidReveal,
),

これでページスワイプにリキッドアニメーションをつけることが出来ます。

以下は、使用例です。

使用例

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

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

class _HomeState extends State<Home> {
  
  var pages = <Widget>[
    Container(color: Colors.green),
    Container(color: Colors.yellow),
    Container(color: Colors.red),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LiquidSwipe(
        pages: pages,
        initialPage: 1, //最初のページ
        positionSlideIcon: 0.8, //アイコンの位置
        slideIconWidget: Icon(Icons.arrow_back_ios),//スライドのアイコン
        waveType: WaveType.liquidReveal,
        enableLoop: true, 
        ignoreUserGestureWhileAnimating: true,
      ),
    );
  }
}