null safety article
Scrollbar(今週のウィジェット)
まずScorllbarを使うためにListViewを用意する。
//main.dart import 'package:flutter/material.dart'; void main(){ runApp(MaterialApp(home:MyApp(),),); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar:AppBar(), body:ListView.builder( itemCount: 40, itemBuilder:(context,index){ return SizedBox( height:70.0, child: ListTile( leading:const Icon(Icons.recommend), title: Text('Item $index'), onTap: () {print("tapped");}, ), ); }, ), ); } }
ListVIewをScrollbarでラップする。
ListViewの箇所にカーソルを持っていき、「option+enter」でオプションメニューを表示させ、「wrap with widget」を選択します。
そしてウィジェット名に「Scrollbar」と入力しましょう。
//main.dart ... appBar:AppBar(), body:Scrollbar( child: ListView.builder( itemCount: 40, itemBuilder:(context,index){ ...
スクロールバーが出るようになりました。
スクロールバーを使う場合、ListViewのアイテム数(itemCount)は有限である必要がある、とのことです。
デフォルトではスクロール中以外スクロールバーが非表示になりますが、下記のように
body:Scrollbar( isAlwaysShown: true,
isAlwaysShownプロパティをtrueにセットすると常にスクロールバーが表示されるようになります。
下記のように↓
body:Scrollbar( thickness: 8.0, hoverThickness: 12.0,
thicknessプロパティを指定するとスクロールバーの太さを変えられます。デフォルトではデスクトップとwebで8.0ピクセル、モバイルでは4.0ピクセルとのことです。
iOS用のCupertinoScrollbarウィジェットもあります。ただ見た目もほとんど変わらないですし、あまり凝るところではないような気はしました笑
というか自動的に切り替えてくれるような感じでしょうか。