[Flutter]ListViewで常にスクロールバーを表示するには？

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

ListViewで常にスクロールバーを表示する方法を紹介します。

方法

ListViewで常にスクロールバーを表示するには、Scrollbarを使います。

まず、ListViewをScrollbarでラップします。

そして、Scrollbarの引数「isAlwaysShown」に「true」を指定します。

Scrollbar(
  isAlwaysShown: true,
  child: ListView(・・・),
),

引数「isAlwaysShown」に「true」を指定したScrollbarでラップすることにより、ListViewで常にスクロールバーを表示できます。

使用例

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 200,
          height: 200,
          child: Scrollbar(
            isAlwaysShown: true,
            child: ListView(
              children: [
                for (var i = 0; i < 20; i++)
                  Container(
                    margin: EdgeInsets.all(10),
                    height: 30,
                    width: 200,
                    color: i.isEven ? Colors.blue : Colors.yellow,
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}