環境
$ sw_vers
ProductName: macOS
ProductVersion: 14.1.1
BuildVersion: 23B81
$ flutter --version
Flutter 3.22.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 761747bfc5 (4 weeks ago) • 2024-06-05 22:15:13 +0200
Engine • revision edd8546116
Tools • Dart 3.4.3 • DevTools 2.34.3
本題
テキスト入力欄にスクロールバーを付けたい!
よくある内容だと思います。
ということで、こちらのサイトを参考に実装。
こんな感じ。
child: Scrollbar(
trackVisibility: false,
thumbVisibility: false,
interactive: true,
thickness: 10.0,
child: TextField(
controller: _textController,
keyboardType: TextInputType.multiline,
maxLines: null,
decoration: const InputDecoration(
border: InputBorder.none,
hintText: 'input your text.',
),
autofocus: true,
),
),
試しに動かしてみると、うん、いい感じ。
と思いきや・・・スクロールバーを移動させると、アプリはクラッシュしないもののこんなエラーが出続けています。
======== Exception caught by animation library =====================================================
The following assertion was thrown while notifying status listeners for AnimationController:
The Scrollbar's ScrollController has no ScrollPosition attached.
A Scrollbar cannot be painted without a ScrollPosition.
The Scrollbar attempted to use the provided ScrollController. This ScrollController should be associated with the ScrollView that the Scrollbar is being applied to.
When providing your own ScrollController, ensure both the Scrollbar and the Scrollable widget use the same one.
調べてみると「ScrollbarとListViewに同じコントローラを指定する必要がある」という記事が見つかります。
が、今回はScrollbar
に内包されているのはTextField
なので型不一致により同じコントローラが使用できません。
結論、Scrollbarの設定の組み合わせが悪さをしていたようです。
child: Scrollbar(
trackVisibility: false,
thumbVisibility: false,
interactive: false, // ←ここをfalseにすることでエラーが消える
...
要は「普段見えない(trackVisibility: false
)のにスクロールバー掴んで動かせる(interactive: true
)」という設定が矛盾しているよ、みたいなことのようです。
以上
なにかの参考になれば。