[Flutter] TextFieldにスクロールバーをつけたい

下記のように、長文入力用のTextFieldウィジェットにスクロールバーをつけたいシーンがあると思います。

そのさいはTextFieldウィジェットをScrollbarウィジェットの子ウィジェットに設定してください。

Scrollbarウィジェットは子ウィジェットにスクロールバーをつけるためのウィジェットとなります。(TextFieldウィジェット限定ではありません)

Scrollbar(
  trackVisibility: true,
  thumbVisibility: true,
  interactive: true,
  thickness: 10.0,
  child: TextField(
    :
  ),
),
  • コンストラクタのパラメータはたくさんありますが、上記で使っているもののみ紹介します
    • trackVisibility
      • true:スクロールバーの移動エリア(=トラック)が表示されます
      • false:スクロールバーの移動エリア(=トラック)が表示されません
    • thumbVisibility
      • true:スクロールバー利用後も表示しっぱなしになります
      • false:スクロールバー利用後にフェードアウトして消えていきます
    • interactive
      • true:スクロールバーのドラッグによる移動、トラックエリアのタップによる移動を行います
      • false:
    • thickness
      • スクロールバーの太さ

冒頭の画像はユーザーにテキストエディタを意識させたかったため、trackVisibility・thumbVisibilityをtrueに設定しthicknessを太く指定していました。

公式サイトのDartPadをつけてみたので色々とお試しください。