Flutterでは縦に長いページを作成した場合、画面をフリックすればスクロールされますが、右側にスクロールバーは出てきません。
Flutterでスクロールバーを表示するには、「Scrollbar」クラスを使用するだけで実現できます。
本記事では「Scrollbarクラス」を使用してスクロールバーを表示する方法の備忘録です。
Scrollbarクラスの使い方
Scrollbarクラスは「material.dart」にてexportされているので、外部のパッケージを使用することなく使用できます。
使い方は非常にシンプルで、ScrollbarクラスのchildにListViewなどのScrollViewを設定するだけです。
Scrollbarクラスを使用したサンプル
実際に使用してみました。
ソースコードは以下のとおりです。
class MyHomePage extends HookWidget {
@override
Widget build(BuildContext context) {
final _textEditingController = useTextEditingController();
_textEditingController.addListener(() {
context.read(textProvider).writeTitle(_textEditingController.text);
});
final state = useProvider(textProvider.state);
final camel = context.read(textProvider).camel;
final snake = context.read(textProvider).snake;
final upperSnake = context.read(textProvider).upperSnake;
final kebab = context.read(textProvider).kebab;
var data = [
Text("testA"),
Text("testB"),
Text("testC"),
Text("testD"),
Text("testE"),
Text("testF")
];
return Scaffold(
appBar: AppBar(
title: Text(
"わーすだよ！",
),
centerTitle: false,
),
),
body: Scrollbar(
isAlwaysShown: true,
child: ListView(
children: data
),
),
);
}
}
ScrollbarクラスのchildにListViewを設定しています。
また、isAlwaysShownをtrueにしておくと、常にスクロールバーを表示させることができます。
実際の画面は以下のようになります。
スクロールバーを表示させることができました。
まとめ
スマホに慣れていれば、フリックでも良いかもしれませんが、スクロールバーがないといったいどうすれば良いんだ！となる人もいますよね。
そのあたりを考慮すると、スクロールバーを設定してあげるのも優しいアプリやサイトには必要かもしれません。
設定自体は簡単なので、必要に応じて使い分けていこうと思います。
Flutter学習情報
Flutterを勉強するのに最適な参考書は、以下の「基礎から学ぶFlutter」です。
環境構築から、Dart/Flutterの基本/テストやパフォーマンスチューニングまで一通り学ぶことができます。
また、当ブログではFlutterを初心者が学ぶためにオススメな方法を「Flutter を初心者が学ぶおすすめの勉強法！【間違いない動画があります】」という記事で公開していますので、Flutterに興味がある方は是非読んでみてください。
動画学習がしたい！という方にオススメの記事がこちらです。
Flutterの将来性はどうなのか？をまとめた記事はこちらです。
