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

Flutter

2022.05.07

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

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

方法
1. スクロール中に表示したい場合
2. 常に表示したい場合
まとめ

方法

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

スクロール中に表示したい場合

SingleChildScrollViewのスクロール中に表示するには、Scrollbarでラップします。

Scrollbar(
  child: SingleChildScrollView(・・・),
),

SingleChildScrollViewをScrollbarでラップすることにより、SingleChildScrollViewのスクロール中にスクロールバーが表示されます。

使用例

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

常に表示したい場合

常に表示したい場合は、まず、SingleChildScrollViewをScrollbarでラップします。

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

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

使用例

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