🥳

【Flutter】スライドでページを切り替えられるパッケージ(carousel_slider)

2022/02/19に公開

Flutter

Dart

tech

この記事について

今回はFlutterに標準で入っている機能ではなく、carousel_sliderというプラグインを使用して、ページをスライドで切り替えられるようにやってみました。
Flutterに元々用意されているTabBar classで実装できたらよかったんですが、今回の案件ではアップバーの横にもう一つウィジェットを追加したかったため、carousel_sliderパッケージを使って実装してみました。

この記事を見られて
・ここ間違ってるよ！
・こうした方がいいよ！
・この説明がわかりにくい！
などありましたらお気軽にコメントください！

使用する環境

Android Studio Bumblebee | 2021.1.1 Patch 1
macOS Monterey version12.1

参考にしたサイト

1. 先に結論[完成したもの]

スライドが遅くてすみません...🙇🏻‍♂️笑

プラグインではページをスクロールするだけなんですが、上のステータスバー的なもの(緑色のバー）も実装してみました！

2. プラグインのインストール

まずは上記のサイトでインストールします。

pubspec.yaml

 # ... pubspec.yamlファイル一部抜粋
 dependencies:
   flutter:
     sdk: flutter
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
+ carousel_slider: ^4.0.0

3. 実装

home_screen.dart

// ... import省略

class HomeScreen extends ConsumerWidget {
  // 今回解説しておりませんがriverpodを使用しております。
  // あくまで緑色のステータスバー的なものを動かすためだけですので、
  // なくてもスクロールページは実装できます。
  final alignmentProvider = StateProvider<double>((ref) => -1.0);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: Container(alignment: Alignment.center,child: Text("page1"),),
                ),
                Expanded(
                  child: Container(alignment: Alignment.center,child: Text("page2"),),
                ),
                Expanded(
                  child: Container(alignment: Alignment.center,child: Text("page3"),),
                ),
              ],
            ),
            Consumer(
              builder: (context, ref, child) {
                return AnimatedAlign(
                  alignment: Alignment(ref.watch(alignmentProvider), 0),
                  duration: Duration(milliseconds: 1),
                  child: Container(
                    color: Colors.green,
                    height: 5.0,
                    width: MediaQuery.of(context).size.width / 3,
                  ),
                );
              },
            ),
            Consumer(
              builder: (context, ref, child) {
                return CarouselSlider(
                  options: CarouselOptions(
                    enableInfiniteScroll: false,
                    height: 400,
                    viewportFraction: 1,
                    onScrolled: (value) {
                      double result = value! - 1;
                      ref.read(alignmentProvider.notifier).update((state) => result);
                    },
                  ),
		  // このitemsの中に表示したいウィジェットを入れてください。
                  items: [
                    Page1(),
                    Page2(),
                    Page3(),
                  ],
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

ちなみにPage1()の中身は下記の簡単なウィジェットです。

page1.dart

import 'package:flutter/material.dart';

class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey,
      child: const Center(
        child: Text("page1", style: TextStyle(fontSize: 24.0, color: Colors.red),),
      ),
    );
  }
}

4. 解説

正直home_screen.dartの中身はCarouselSliderの部分が必要なだけで、残りは本パッケージとは無関係です。スライドページのの実装はCarouselSlider以外のウィジェットは消して、refやproviderは無視すれば実装できます！

ステータスバーのアニメーションに関してはCarouselSliderのCarouselOptionsの中に用意されてあるonScrolledプロパティがスクロールに対して値を出力してくれるので、こちらの値を使用してステータスバー(緑色のバー)の位置を変更して実装しています。

5. おわりに

今回は簡単な実装内容にとどめましたが、ステータスバー的なpage1やpage2をタップしてページを遷移できるようにすることも可能です！
簡単にスクロールページが実装できたり、好きなように拡張できるのでおすすめのパッケージです！
ぜひみなさんもやってみてください！
ご覧いただきありがとうございました🙆‍♂️