Flutter Scrollbar
💡Tips
SNSアプリの開発をしていたときに、ScrollbarというWidgetを使う機会がありました。
使ったことあるのですが詳しく知らなかったので公式の動画を見てみた。
動画を見てみると、Flutterはデフォルトでスクロールバーを表示しないそうです。
俺ちゃん「確かに見たことないな笑」
表示するには、スクロールができるWidgetをScrollbarでWrapするだけです。画面右側にスクロールすると、薄いグレーのスクロールバーが表示されます。CSSだとこんなスタイルがあったような？
公式の解説
A scrollbar thumb indicates which portion of a ScrollView is actually visible.
By default, the thumb will fade in and out as the child scroll view scrolls. When thumbVisibility is true, the scrollbar thumb will remain visible without the fade animation. This requires that the ScrollController associated with the Scrollable widget is provided to controller, or that the PrimaryScrollController is being used by that Scrollable widget.
If the scrollbar is wrapped around multiple ScrollViews, it only responds to the nearest ScrollView and shows the corresponding scrollbar thumb by default. The notificationPredicate allows the ability to customize which ScrollNotifications the Scrollbar should listen to.
If the child ScrollView is infinitely long, the RawScrollbar will not be painted. In this case, the scrollbar cannot accurately represent the relative location of the visible area, or calculate the accurate delta to apply when dragging on the thumb or tapping on the track.
Interaction
Scrollbars are interactive and can use the PrimaryScrollController if a controller is not set. Interactive Scrollbar thumbs can be dragged along the main axis of the ScrollView to change the ScrollPosition. Tapping along the track exclusive of the thumb will trigger a ScrollIncrementType.page based on the relative position to the thumb.
When using the PrimaryScrollController, it must not be attached to more than one ScrollPosition. ScrollViews that have not been provided a ScrollController and have a ScrollView.scrollDirection of Axis.vertical will automatically attach their ScrollPosition to the PrimaryScrollController. Provide a unique ScrollController to each Scrollable in this case to prevent having multiple ScrollPositions attached to the PrimaryScrollController.
スクロールバーのサムは、ScrollViewのどの部分が実際に表示されているかを示します。
デフォルトでは、サムバーは子スクロールビューのスクロールに合わせてフェードイン/フェードアウトします。thumbVisibility が true の場合、スクロールバーのサムはフェードアニメーションなしで表示されます。これには、Scrollable ウィジェットに関連付けられた ScrollController がコントローラに提供されているか、PrimaryScrollController がその Scrollable ウィジェットで使用されている必要があります。
スクロールバーが複数の ScrollView に巻き付けられている場合、最も近い ScrollView にのみ応答し、対応するスクロールバーのサムネイルをデフォルトで表示します。notificationPredicateにより、ScrollbarがどのScrollNotificationをリッスンするかをカスタマイズすることができます。
子ScrollViewが無限に長い場合、RawScrollbarは描画されません。この場合、スクロールバーは可視領域の相対的な位置を正確に表すことができず、親指でドラッグしたり、トラックをタップした時に適用される正確なデルタを計算することができません。
インタラクティブ
スクロールバーはインタラクティブで、コントローラが設定されていない場合は PrimaryScrollController を使用できます。インタラクティブスクロールバーの親指は、ScrollView の主軸に沿ってドラッグして ScrollPosition を変更できます。サム専用のトラックに沿ってタップすると、サムとの相対位置に基づいて ScrollIncrementType.page がトリガーされます。
PrimaryScrollController を使用する場合、複数の ScrollPosition にアタッチしてはいけません。ScrollView.scrollDirection が Axis.vertical で、ScrollController が提供されていない ScrollView は、自動的にその ScrollPosition を PrimaryScrollController にアタッチします。この場合、PrimaryScrollController に複数の ScrollPosition がアタッチされないように、各 Scrollable に固有の ScrollController を指定します。
example
import 'package:flutter/material.dart';
class ScrollbarDemo extends StatelessWidget {
const ScrollbarDemo({super.key});
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Scrollbar(
child: ListView.builder(
itemCount: 50,
itemBuilder: (context, index) {
return ListTile(title: Text('Item $index'));
},
),
),
);
}
}
Styleを変更できるらしい
Scrollbar classは、線の色や太さを変更することできるらしい。ときどきお世話になっているさくしんさんのブログを試してみたがエラーが出た？
どうやら非推奨のコードのようだ。英語でdeprecatedって書いてあった💦
Githubにissuesがあった。どうやら変更されたようだな。
'MaterialStateProperty' is deprecated and shouldn't be used. Use WidgetStateProperty instead. Moved to the Widgets layer to make code available outside of Material. This feature was deprecated after v3.19.0-0.3.pre.
Try replacing the use of the deprecated member with the replacement.
'MaterialStateProperty'は非推奨です。代わりに WidgetStateProperty を使用してください。Materialの外部でコードを利用できるようにするため、Widgetsレイヤーに移動しました。この機能はv3.19.0-0.3.pre以降、非推奨となりました。
非推奨になったメンバの使用を、置き換えに置き換えてみてください。
Before
ソースコードをお借りして書いてみるがエラーが💦
After
修正すると治った🔧
最後に
Xを開いてスクロールすると右側にスクロールバーが見えると思います。線細いですが笑。あるとユーザーには親切なんでしょうね。今度からつけようかな。。。。。
Discussion