知ってる人も知らない人も必見！Flutterパッケージという名の“合法的チート”を使いこなそう！入門編


この記事は、株式会社スピードリンクジャパン Advent Calendar 2024 の15日目の記事です。

https://qiita.com/advent-calendar/2024/slj

こんにちは！

アプリ開発に **「便利すぎるチート」** を導入してみませんか？
Flutterを使っていると、「あの面倒な部分、もっと簡単にできないかな…」と思う瞬間が多々ありますよね？

そんなとき、救世主となるのが**Flutterパッケージ**です！

今回は、その中でも特に便利な「**flutter_sliding_tutorial**」というパッケージをご紹介します。これを使えば、最近のアプリでよく見かける**スライド形式のチュートリアル画面**があっという間に作れます！



## **こんなことで悩んでませんか？**

- **「ユーザーに使い方を説明するチュートリアル画面が作りたいけど、何から始めればいいの？」**
- **「ゼロから作るのは時間も手間もかかる……」**

実は私も同じ悩みを抱えていました。でも **「flutter_sliding_tutorial」** に出会って、すべてが一瞬で解決しました！


その他のパッケージは[こちら](https://pub.dev/packages?q=)で確認できます！


## **flutter_sliding_tutorial の魅力**

このパッケージがどれだけすごいか、3つのポイントで説明します:point_down_tone1:

1. **スライド形式のチュートリアルをサクッと実装**
    
    最近のアプリでよく見る「ページをスライドして進むチュートリアル」を、たった数行で作成可能。
    
2. **自由にカスタマイズ**
    
    ページ内容やデザインを自分好みに変更できます。手軽なのにオシャレな仕上がり。
    
3. **開発効率アップ**
    
    一から作るとページ遷移の管理や、ページインジケーターの作成、「スキップ」や「次へ進む」ボタンの追加などやることが多くて数時間かかるものが、このパッケージなら数分で完成！

## **flutter_sliding_tutorial があれば…**

このパッケージを使えば、**複雑な機能も驚くほどシンプルなコード**で完成します。

- **ページ遷移**: `SlidingPage`を使うだけでスライドに対応。
- **インジケーター**: 自動で状態を追跡可能。自前でインジケーターを用意する必要なし。
- **デザイン**: 子ウィジェットに好きなデザインを渡すだけ。

## **こんなものが作れます！**

以下のようなスライドチュートリアル画面を一瞬で作成可能です:point_down_tone1:

![スクリーンショット 2024-12-13 19.58.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786748/06713b58-3c58-80b4-cffc-5385dcf5075c.png)
![スクリーンショット 2024-12-13 19.59.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786748/5fd89a0c-442a-4897-7ed1-796da2dc8411.png)
![スクリーンショット 2024-12-13 19.59.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786748/573f8a78-faeb-4ce9-2a56-33c061ab70ca.png)







# **flutter_sliding_tutorial パッケージの特徴**

1. **シンプルなAPI設計**
    
    `SlidingPage`ウィジェットを使用して、ページを簡単に追加可能。
    
2. **ページ遷移のスムーズな管理**
    
    `PageController`と`ValueNotifier`を組み合わせることで、状態管理も簡単。
    
3. **カスタマイズ性**
    
    各ページのデザインやコンテンツを自由にカスタマイズできます。
    
4. **基本的なインジケーターやナビゲーション**
    
    自作でインジケーターやナビゲーションを実装することで、柔軟なUI構築が可能。

# 試しにパッケージを入れてみよう

### **1. SlidingPage: シンプルなページ遷移**

各ページのデザインを定義する`SlidingPage`ウィジェットを利用し、ページ番号（`page`）と状態管理のための`notifier`を指定します。

```dart
SlidingPage(
  page: 0,
  notifier: _notifier,
  child: tutorialPage(Icons.star, "Step 1"),
),
```
### **2. tutorialPage: 簡潔なUI定義**

`tutorialPage`関数でページごとのコンテンツを定義します。アイコンとタイトルを中央に配置したデザインを実現。

```dart
Widget tutorialPage(IconData icon, String title) {
  return Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(icon, size: 100, color: Colors.teal),
        SizedBox(height: 20),
        Text(
          title,
          style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
        ),
      ],
    ),
  );
}
```
### **3. スキップ機能**

右下に`FloatingActionButton`を配置し、タップするとホーム画面に遷移します。

```dart
floatingActionButton: FloatingActionButton(
  onPressed: () {
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => const HomeScreen()),
    );
  },
  child: const Icon(Icons.arrow_forward),

```

# **最後に**

今回紹介した「flutter_sliding_tutorial」を使えば、最近のアプリでよく見かけるスライド形式のチュートリアルが**数行で実装可能**です。

「ゼロから作るのは時間がかかる」「効率よくオシャレなUIを作りたい」という方に、まさに“合法的チート”なパッケージです。

Flutterには、まだまだ便利なパッケージがたくさんあります。どんどん活用して、
ぜひ **「便利すぎてずるい！」** と思えるほどの効率化をぜひ体感してください！