Flutterラボの

プレミアム会員になる

【Flutter】 スクロール可能なWidgetのスクロールの動きを管理 【ScrollController】

2021.11.17

今回はScrollControllerを用いてスクロール可能なWidget(ListViewやSingleChildScrollViewなど)のスクロールの動きを管理する方法を紹介していきます!

Flutterラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech

変数を定義

まずはScrollControllerを使いたいClass内で変数を定義します。

ScrollController _controller = ScrollController();

スクロール可能なWidgetにcontrollerを割り当てる

スクロール可能なWidgetのcontrollerプロパティに先ほど定義したcontrollerを割り当てましょう。

ListView.builder(
    controller: _controller,
    itemCount: 100,
    itemBuilder: (context, index) {
        return ListTile(title: Text('$index'));
    }
)

外部アクションでスクロール位置を移動

FloatingActionButtonなどの外部アクションでスクロールの位置を移動してみましょう。

_controller.offsetで現在のスクロール位置を検出し、.floorToDoubleを用いることで小数点以下の細かい値を切り捨てることができます。

double nowOffset = _controller.offset.floorToDouble;

スクロール位置を移動する処理は2種類あります。

一つ目が.jumpToです。

_controller.jumpTo(nowOffset + 100);

二つ目が.animateToです。こちらはアニメーション付きでスクロールの位置を移動することができます。

_controller.animateTo(
    nowOffset + 100,
    duration: Duration(seconds: 1), //移動するのに要する時間を設定
    curve: Curves.bounceIn //アニメーションの種類を設定
);

ScrollControllerを用いれば、スクロールの位置に応じてUIを変化させていくことも可能です。こちらの解説はFlutterラボ内の動画にて解説を行っております。ぜひ併せてご覧ください!

Flutterラボ 現役エンジニアが教えるFlutter学習! プログラミング初心者でもiOS・Android・WEBアプリ開発を学ぶことがで www.youtube.com


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ Nuxtラボ:https://flutterlabo.tech/nuxt