Fluth|目的の場所へスクロール

scroll to index

スクロールインデックスは、リストから正しい場所に移動したい場合に使用できる良いパッケージです.
通常のリストから目的のポイントに移動する場合は、正しい座標を使用します.すなわち、offsetを指定する必要があるが、移動時にリストの高さや長さが異なる場合は、offsetを知るのは難しい.
このオプションは、リストをインデックスに簡単に移動する場合に便利です.

1.初期設定

まず、リストコンポーネントに含まれるリストを知る必要があるため、リストを作成します.
また、スクロールコントローラを作成してリストをスクロールすることもできます.

// scroll controller.
final AutoScrollController _controller = AutoScrollController();

// list.
static const List<Color> _list = Colors.primaries;

2.リストウィジェットの作成

リストを作成すると、リストを印刷するためのコンポーネントが作成されます.
リストの高さが異なる場合でもインデックスで移動できるように、ランダムな高さ値を指定しました.

ListView.builder(
  itemCount: _list.length,
  controller: _controller,
  padding: EdgeInsets.zero,
  itemBuilder: (context, index) {
    final int _random = Random().nextInt(7);
    final double _randomHeight = 100.0 * _random;
      return Container(
        width: double.infinity,
        height: _randomHeight,
        color: _list.elementAt(index),
        child: Center(
          child: Text(
            'index: $index\nheight: ${_randomHeight.round()}',
        ),
      ),
    );
  },
),

3. AutoScrollTag

AutoScrollTagコンポーネントを使用してリストを囲み、indexにスクロールします.
AutoScrollTagは、key、controller、indexの値を必須値として指定します.

AutoScrollTag(
  key: ValueKey(index),
  controller: _controller,
  index: index,
  child: Container(
    width: double.infinity,
    height: _randomHeight,
    color: _list.elementAt(index),
    child: Center(
      child: Text(
        'index: $index\nheight: ${_randomHeight.round()}',
      ),
    ),
  ),
)

AutoScrollTag({
  required Key key,
  required this.controller,
  required this.index,
  this.child,
  this.builder,
  this.color,
  this.highlightColor,
  this.disabled: false
}) : assert(child != null || builder != null), super(key: key);

4.スクロールリスト

リストをスクロールするには、controllerとindex、duration、preferationPositionが必要です.
インデックスによるスクロールに加えて、スクロールインデックスはさまざまな移動方法をサポートします.

floatingActionButton: FloatingActionButton(
  onPressed: () async {
    _controller.scrollToIndex(
      5,
      duration: const Duration(milliseconds: 500),
      preferPosition: AutoScrollPosition.begin,
    );
  },
  child: const Icon(
    Icons.swap_vert_outlined,
  ),
)

AutoScrollPosition
AutoScrollPositionは、コンポーネントの開始点でのスクロール、中央でのスクロール、終了点でのスクロールを指定する位置値です.

enum AutoScrollPosition { begin, middle, end }

自動コントローラの移動方式

_controller.jumpTo(value);
_controller.scrollToIndex(index);
_controller.animateTo(offset, duration: duration, curve: curve);

完全なコード

import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:scroll_to_index/scroll_to_index.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  late AutoScrollController _controller;

  // list.
  static const List<Color> _list = Colors.primaries;

  @override
  void initState() {
    super.initState();
    _controller = AutoScrollController();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          _controller.scrollToIndex(
            5,
            duration: const Duration(milliseconds: 500),
            preferPosition: AutoScrollPosition.begin,
          );
        },
        child: const Icon(
          Icons.swap_vert_outlined,
        ),
      ),
      body: ListView.builder(
        itemCount: _list.length,
        controller: _controller,
        padding: EdgeInsets.zero,
        itemBuilder: (context, index) {
          final int _random = Random().nextInt(7);
          final double _randomHeight = 100.0 * _random;
          return AutoScrollTag(
            key: ValueKey(index),
            controller: _controller,
            index: index,
            child: Container(
              width: double.infinity,
              height: _randomHeight,
              color: _list.elementAt(index),
              child: Center(
                child: Text(
                  'index: $index\nheight: ${_randomHeight.round()}',
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

参考資料

flutter package - scroll_to_index