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ウィジェットもあります。ただ見た目もほとんど変わらないですし、あまり凝るところではないような気はしました笑

というか自動的に切り替えてくれるような感じでしょうか。