[Flutter]ListViewの右側にスクロールバーを表示するには？

どうも、ちょげ(@chogetarou)です。

ListViewスクロールした時に、右側にスクロールの位置が分かるバーを表示する方法を紹介します。

方法

ListViewの右側にスクロールバーを表示するには、「ScrollBar」ウェジェットを使います。

具体的には、ListViewをScrollBarの「child」に指定します。

Scrollbar(
  child: ListView(
    children : [],
  ),
),

ListView.builderでも同じように使用できます。

Scrollbar(
  child: ListView.builder(
    itemCount: /*count*/,
    itemBuilder: (context, index) {
      return /*Widget*/;
    },
  ),
),

以下は、使用例です。

Scrollbar(
  child: ListView.builder(
    shrinkWrap: true,
    itemCount: 100,
    itemBuilder: (context, index) {
      return Card(
        child: SizedBox(
          height: 50,
          child: Text('$index'),
        ),
      );
    },
  ),
),