[Flutter Tip] Scrollbar Color

Scrollbar 에 색상을 넣는 방법은 ScrollbarThemeData 를 이용하는 방법이 있다.

Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        scrollbarTheme: ScrollbarThemeData(
          thumbColor: MaterialStateProperty.all(Colors.blue),
          trackColor: MaterialStateProperty.all(Colors.green),
          thumbVisibility: MaterialStateProperty.all(true),
        ),
      ),
      routeInformationParser: AppRoutes.routerInformationParser,
      routerDelegate: AppRoutes.routerDelegate,
    );

이렇게하면 Android 에서는 정상적으로 적용되는걸 확인할 수 있지만, iOS 에서는 변경되지 않는다.

이럴때는 Scrollbar 위젯 대신 RawScrollbar 위젯을 사용하도록 하자.

RawScrollbar(
  thumbColor: Colors.white24, // thumb 색상 지정
  thickness: 4,
  radius: const Radius.circular(6),
)

https://api.flutter.dev/flutter/widgets/RawScrollbar-class.html