【Flutter】intro_slider の使い方

##  初めに
intro_slider とは、以下のようなチュートリアルの画面を作成するためのパッケージです。
![intro_slider_sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2609901/7316c25b-ecb8-0b73-4b22-d77848f9862c.gif)


## 準備
まずは、[intro_slider パッケージ](https://pub.dev/packages/intro_slider) を「 pubspeck.yaml 」に記述します。
パッケージのバージョンは、特に制約がなければ最新のバージョンで問題ありません。

```yaml: pubspeck.yaml
dependencies:
  flutter:
    sdk: flutter

  intro_slider: ^4.0.0
```
Pub get をして準備は完了です。

## 実装
まずは実装したい画面で intro_slider をインポートします。
```dart: main.dart
import 'package:intro_slider/intro_slider.dart';
```
<br>

全体コードは以下の通りです。
```dart: main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:intro_slider/intro_slider.dart';

final sliderListProvider = StateProvider<List<ContentConfig>>((ref) => []);

class IntroSliderExample extends ConsumerWidget {
  const IntroSliderExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final sliderListNotifier = ref.watch(sliderListProvider.notifier);
    return Scaffold(
      appBar: AppBar(
        title: const Text("IntroSliderExample"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: (){
            Navigator.push(context, MaterialPageRoute(builder: (context) => const IntroSliderExampleSlidePage()));
            sliderListNotifier.state.add(
              const ContentConfig(
                title: "HTML",
                styleTitle: const TextStyle(color: Colors.cyan, fontSize: 30),
                description: "HTML/HTML/HTML/HTML/HTML/HTML/HTML/HTML/HTML/HTML/HTML/HTML/HTML/HTML/HTML/HTML/HTML/",
                styleDescription: const TextStyle(color: Colors.cyan, fontSize: 20),
                pathImage: "images/HTML_Monochromatic.png",
                backgroundColor: Colors.white
              ),
            );
            sliderListNotifier.state.add(
              const ContentConfig(
                title: "CSS",
                styleTitle: const TextStyle(color: Colors.cyan, fontSize: 30),
                description: "CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/",
                styleDescription: const TextStyle(color: Colors.cyan, fontSize: 20),
                pathImage: "images/CSS_Monochromatic.png",
                backgroundColor: Colors.white
              ),
            );
            sliderListNotifier.state.add(
              const ContentConfig(
                title: "JavaScript",
                styleTitle: const TextStyle(color: Colors.cyan, fontSize: 30),
                description: "JavaScript/JavaScript/JavaScript/JavaScript/JavaScript/JavaScript/JavaScript/JavaScript/",
                styleDescription: const TextStyle(color: Colors.cyan, fontSize: 20),
                pathImage: "images/Javascript_Monochromatic.png",
                backgroundColor: Colors.white,
              ),
            );
          },
          child: const Text("チュートリアル"),
        ),
      ),
    );
  }
}


class IntroSliderExampleSlidePage extends ConsumerWidget {
  const IntroSliderExampleSlidePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final slideList = ref.watch(sliderListProvider);
    return IntroSlider(
      listContentConfig: slideList,
      renderNextBtn: renderNextBtn(),
      renderDoneBtn: renderDoneBtn(),
    );
  }

  Widget renderNextBtn() {
    return TextButton(
      onPressed: (){},
      child: const Text("NEXT"));
  }

  Widget renderDoneBtn() {
    return TextButton(
      onPressed: (){
        print("チュートリアル終了");
      },
      child: const Text("FINISH"));
  }

  Widget renderPrevBtn() {
    return TextButton(
      onPressed: (){},
      child: const Text("BACK"));
  }
}
```

IntroSlider は IntroSlider と ContentConfig の二つの部分で構成されており、 IntroSlider の listContentConfig プロパティに ContentConfig のリストを渡すことで表示されます。

## ContentConfig
```dart: main.dart
ContentConfig(
  title: "HTML",
  styleTitle: const TextStyle(color: Colors.cyan, fontSize: 30),
  description: "HTML/HTML/HTML/HTML/HTML/HTML/HTML/HTML/HTML/HTMLHTML",
  styleDescription: const TextStyle(color: Colors.cyan, fontSize: 20),
  pathImage: "images/HTML_Monochromatic.png",
  backgroundColor: Colors.white
),
```
ContentConfig はイントロ画面を作成するための Widget です。
上のコードでは以下のような画面になります。
<img width=250, src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2609901/695e1956-371c-13b5-1e05-6b41f7acf57b.png">

### title
title では Slider のタイトルを変更します。
上の画面では「HTML」に指定されています。

### styleTitle
上述の title では直接文字列を指定するため、TextStyle を適用させることができません。
したがって styleTitle で title のテキストの TextStyle を指定します。

上のコードでは、color を cyan、fontSize を 30 に指定しています。

### description
description はチュートリアル画面の詳細説明を追加するためのプロパティです。

### styleDescription
styleDescription は description で追加したテキストの TextStyle を指定するプロパティです。

上のコードでは、color を cyan、fontSize を 20 に指定しています。

### pathImage
pathImage は ContentConfig で使用する画像のパスを指定するためのプロパティです。

### backgroundColor
backgroundColor は ContentConfig の背景色を指定するためのプロパティです。

## IntroSlider
```dart: main.dart
return IntroSlider(
  listContentConfig: slideList,
  renderNextBtn: renderNextBtn(),
  renderDoneBtn: renderDoneBtn(),
);
```

### listContentConfig
listContentConfig は表示させるスライドのリストを指定するためのプロパティです。
指定できる型は `<List<ContentConfig>>` に限定されています。

上のコードでは `slideList` という変数に ContentConfig のリストを代入しています。

### renderNextBtn
renderNextBtn では以下の画像の「NEXT ボタン」のように、次のスライドへ遷移するためのボタンを表示させることができます。
<img width=250, src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2609901/8234bd6d-72f3-bbf2-e345-d3eb7e8aa8eb.png">


### renderDoneBtn
renderDoneBtn では以下の画像の「FINISH ボタン」のように、最後のスライドになった時の終了ボタンを表示させることができます。
<img width=250, src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2609901/43ae84a0-758e-eedb-f3b7-f5ff8d185120.png">



## あとがき
最後まで読んでいただきありがとうございました。


以上です。

参考にしていただければ幸いです。
誤っている箇所があればご指摘いただければ幸いです。

### 参考にしたサイト
https://pub.dev/packages/intro_slider