【Flutter】ScrollControllerによるスクロール制御の基本と応用

2024年4月4日
2024年4月4日
Flutter標準

Flutter標準

対象者

Flutterを使用してスクロール機能が豊富なアプリを開発することに興味がある開発者
ScrollControllerの基本的な使い方から応用的な使い方までを学びたいと考えている方
スクロールに関連するトラブルシューティングの方法を知りたいと思っている方

はじめに

この記事では、FlutterのScrollControllerの基本から応用まで、ステップバイステップでわかりやすく解説しています。スクロール位置の制御、イベントのリスニング、無限スクロールの実装といった基本的な使い方から、スクロール範囲の制限や特定のWidgetまでスクロールさせる方法といった応用技術まで解説してます。
この記事を読めば、スクロール機能に関するあなたの悩みが解決することを願ってます。

ScrollControllerとは

概要

ScrollControllerは、Flutterでスクロール可能なウィジェット（ListView、GridView、SingleChildScrollViewなど）を制御するためのクラスです。スクロール位置の指定や、スクロールイベントの監視、スクロールバーの制御などが可能です。

ScrollControllerの役割

ScrollControllerの主な役割は、スクロール可能なウィジェットの挙動を制御することです。具体的には、以下のような機能を提供します。

スクロール位置の指定: animateToやjumpToメソッドを使用して、特定の位置にスクロールすることができます。
スクロールイベントの監視: スクロール位置が変わるたびに通知を受け取り、必要な処理を行うことができます。
スクロールバーの制御: スクロールバーの表示や非表示、スタイルの変更などが可能です。

これらの機能により、開発者はスクロール可能なウィジェットの挙動を細かく制御することができます。

ScrollControllerの基本的な使い方

スクロール位置の制御

スクロール位置の制御は、ユーザーが特定の位置までスクロールする必要がある場合に便利です。例えば、一覧の最後までスクロールして新しいコンテンツを読み込む、特定のアイテムにフォーカスを当てるなどがあります。これを実現するためには、animateToやjumpToメソッドを使用して、スクロール位置をプログラムで制御します。

scrollController.animateTo(
  200.0,
  duration: Duration(milliseconds: 300),
  curve: Curves.easeInOut,
);

スクロールイベントのリスニング

スクロールイベントのリスニングは、スクロールの進行状況を監視する際に重要です。これにより、スクロールに応じて特定のアクションをトリガーしたり、ユーザーのスクロール行動を分析したりすることができます。addListenerメソッドを使用して、スクロールイベントをリスニングします。

scrollController.addListener(() {
  print(scrollController.offset);
});

スクロールバーの表示制御

スクロールバーの表示制御は、ユーザーにスクロール位置の目安を提供し、アプリの見た目を向上させるために重要です。Scrollbarウィジェットを使用して、スクロールバーの表示を制御します。このウィジェットは、スクロール可能なウィジェットをラップすることで、自動的にスクロールバーを表示します。

Scrollbar(
  controller: scrollController,
  child: ListView.builder(
    controller: scrollController,
    itemCount: 100,
    itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
  ),
);

ScrollControllerの応用

無限スクロールの実装

無限スクロールは、ユーザーがリストの末尾に達したときに自動的に新しいデータを読み込む機能です。これは、ソーシャルメディアフィードや商品リストなど、長いリストを扱うアプリケーションでよく使用されます。ScrollControllerを使用して、スクロール位置がリストの末尾に近づいたかどうかを監視し、新しいデータの読み込みをトリガーします。

scrollController.addListener(() {
  if (scrollController.position.pixels == scrollController.position.maxScrollExtent) {
    // ここで新しいデータを読み込む
  }
});

スクロール範囲の制限

特定の条件下でスクロール範囲を制限したい場合があります。例えば、特定のセクション内でのみスクロールを許可したい場合などです。これは、ScrollControllerのoffsetプロパティを監視し、特定の範囲を超えた場合にスクロール位置を調整することで実現できます。

scrollController.addListener(() {
  if (scrollController.offset > 1000) {
    scrollController.jumpTo(1000);
  }
});

現在のスクロール位置の取得

スクロール位置の取得は、ユーザーがどの程度スクロールしたかを知るために重要です。これは、ScrollControllerのoffsetプロパティを使用して行います。この情報は、スクロールに基づいた動的なUIの変更や、特定の位置にスクロールしたときのイベントのトリガーなどに使用できます。

double currentScrollPosition = scrollController.offset;

これらの応用例を通じて、ScrollControllerを使いこなすことで、より高度なスクロール機能を実装し、ユーザーエクスペリエンスを向上させることができます。

Flutterでは、Scrollable.ensureVisibleメソッドを使用して、特定のWidgetまでスクロールすることができます。これは、フォームのバリデーションエラー時にエラーメッセージが表示されるフィールドまでスクロールしたり、リスト内の特定のアイテムにフォーカスを当てたい場合などに便利です。

final _keyForJump = GlobalKey();


ListTile(
    key:  _keyForJump,
    title: Text('Item'),
 ),

void _scrollToItem() {
  final currentContext = _keyForJump.currentContext;
  if (currentContext != null) {
    Scrollable.ensureVisible(currentContext);
  }
}

気をつけないといけない点は、_keyForJump.currentContextがnullの場合は動作しない点です。つまり特定のWidgetがすでに存在しないと動作しません。そのため、ListView.builderなどを使って描画するWidgetのみ作成する場合などに画面外のWidgetを指定しても動作しない可能性があります(ハマったorz)

注意点とトラブルシューティング

ScrollControllerの正しい破棄方法

ScrollControllerを使用する際には、メモリリークを防ぐために適切な破棄が必要です。StatefulWidgetのdisposeメソッド内でScrollControllerを破棄することが推奨されます。

@override
void dispose() {
  _scrollController.dispose();
  super.dispose();
}

複数のスクロールビューでのScrollControllerの共有

一つのScrollControllerを複数のスクロールビューで共有することは推奨されません。これは、スクロール位置の同期が取れなくなる可能性があるためです。各スクロールビューには独自のScrollControllerを使用することが望ましいです。

Q&A

Q1: ScrollControllerの基本的な使い方は何ですか？

A1: ScrollControllerの基本的な使い方には、スクロール位置の制御、スクロールイベントのリスニング、スクロールバーの表示制御があります。これらを利用して、スクロールビューの挙動を細かく制御することができます。

Q2: 無限スクロールを実装するにはどうすればいいですか？

A2: 無限スクロールを実装するには、ScrollControllerを使ってスクロール位置がリストの末尾に近づいたことを検知し、新しいデータを読み込む処理を行います。これにより、ユーザーがスクロールするたびに新しいコンテンツが表示されます。

Q3: ScrollControllerの破棄に注意すべき理由は何ですか？

A3: ScrollControllerの破棄に注意する理由は、不適切な破棄がメモリリークを引き起こす可能性があるためです。StatefulWidgetのdisposeメソッド内でScrollControllerを破棄することが推奨され、これによりリソースの解放とメモリの効率的な管理が可能になります。

まとめ

読者の皆様は、ScrollControllerの基本から応用までを勉強しました。スクロール位置の制御、イベントのリスニング、無限スクロールの実装など、さまざまな機能を理解しました。また、正しい破棄方法やスクロール位置の復元などの注意点も学びました。この知識を活用して、ユーザーにとって快適なスクロール体験を提供できるアプリケーションを開発することができるでしょう。引き続き、ScrollControllerを使いこなすための学習を進めてください。

参考

ソース(main.dartにコピペして動作確認用)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ScrollController Sample')),
        body: MyListView(),
      ),
    );
  }
}

class MyListView extends StatefulWidget {
  @override
  _MyListViewState createState() => _MyListViewState();
}

class _MyListViewState extends State<MyListView> {
  final ScrollController _scrollController = ScrollController();

  static const _kFocusIndex = 20;

  final _keyForJump = GlobalKey();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_scrollListener);
  }

  void _scrollListener() {
    if (_scrollController.position.pixels ==
        _scrollController.position.maxScrollExtent) {
      print('End of List');
    }
  }

  void _scrollToPosition(double position) {
    _scrollController.jumpTo(position);
  }

  void _animateToPosition(double position) {
    _scrollController.animateTo(
      position,
      duration: const Duration(seconds: 2),
      curve: Curves.easeInOut,
    );
  }

  void _scrollToItem() {
    final currentContext = _keyForJump.currentContext;
    if (currentContext != null) {
      Scrollable.ensureVisible(currentContext);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
            child: ListView.builder(
          controller: _scrollController,
          itemCount: 30,
          itemBuilder: (context, index) => GestureDetector(
            child: ListTile(
              key: index == _kFocusIndex ? _keyForJump : null,
              title: Text('Item ${index + 1}'),
            ),
          ),
        )),
        Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            FilledButton(
              onPressed: () => _scrollToPosition(200),
              child: Text('Jump to 200px'),
            ),
            FilledButton(
              onPressed: () => _animateToPosition(
                  _scrollController.position.maxScrollExtent),
              child: Text('Animate to End'),
            ),
            FilledButton(
              onPressed: _scrollToItem,
              child: Text('Scroll to Item $_kFocusIndex'),
            ),
          ],
        ),
      ],
    );
  }
}

このサンプルコードは、FlutterでScrollControllerを使用してスクロール機能を実装した例です。
3つのボタンを用意しており、それぞれ「200ピクセル目へ移動」、「リストの最後へアニメーション付きで移動」、「指定したアイテム（20番目のアイテム）へスクロール」の機能を実行します。これにより、ScrollControllerを使ってリストのスクロール位置を柔軟に制御する方法を示しています。

スクロールイベントの監視
ScrollControllerのaddListenerメソッドを使ってスクロールイベントを監視し、リストの最後に到達したら「End of List」と出力します。
スクロール位置の制御
jumpToメソッドとanimateToメソッドを使用して、指定した位置に即時移動またはアニメーション付きで移動します。
特定のアイテムへのスクロール
GlobalKeyを使って特定のListTileを識別し、Scrollable.ensureVisibleメソッドでそのアイテムが見えるようにスクロールします。