Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
【Flutter】 スクロール可能なWidgetのスクロールの動きを管理 【ScrollController】
2021.11.17
今回はScrollControllerを用いてスクロール可能なWidget(ListViewやSingleChildScrollViewなど)のスクロールの動きを管理する方法を紹介していきます!
変数を定義
まずは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ラボ内の動画にて解説を行っております。ぜひ併せてご覧ください!
![【Dart】Stringからint, double, DateTimeに変換する](https://assets.st-note.com/production/uploads/images/34579094/rectangle_large_type_2_57f8b9d22b8edd5dd7bcca6d883ef3fb.jpeg)
【Dart】Stringからint, double, DateTimeに変換する
2020.09.14
![【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ](https://assets.st-note.com/production/uploads/images/34640890/rectangle_large_type_2_9cd3518ec86a8d45eb0db093426082d1.jpeg)
【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18
![【Dart】【Flutter】DateTime型についてのまとめ](https://assets.st-note.com/production/uploads/images/35816882/rectangle_large_type_2_5d153bec6a1387e9a7cd068fa193bae4.jpeg)
【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01
![【Dart】Map型の使い方とよく使うメソッドまとめ](https://assets.st-note.com/production/uploads/images/34593663/rectangle_large_type_2_444b0971465392f471f0be9b1ce9b91b.jpeg)
【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13