Fluterで縦方向の画面切り替え（swiper） #Flutter

やりたいこと

TikTokやYoutube short風な縦方向のページネーションを実現したい。

方法

card_swiperを利用することでできます。

実装

      body: Swiper(
        itemBuilder: (context, index) => pageWidget(index),
        itemCount: pageColors.length,
        scrollDirection: Axis.vertical,
      ),

Listなどの実装方法と同じです。
自動スクロールや、ナビゲーションボタンも設定することができます。

gif動画のサンプルはこちらに置いておきます。

さいごに

ページのコンテンツを動画にしたり、フロートボタンを配置していけば今風の動画コンテンツができます。