iOS风格的滑动指示栏，需要包裹一个可滑动区域，当可滑动时，会显示滑动的bar用于指示。

相关组件

ListView SingleChildScrollView Scrollbar

CupertinoScrollbar基本使用

【child】 : 子组件 【Widget】
【controller】 : 控制器 【ScrollController】
159.gif

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  3. class CustomCupertinoScrollbar extends StatelessWidget {
  4.   final data = <Color>[
  5.     Colors.purple[50],
  6.     Colors.purple[100],
  7.     Colors.purple[200],
  8.     Colors.purple[300],
  9.     Colors.purple[400],
  10.     Colors.purple[500],
  11.     Colors.purple[600],
  12.     Colors.purple[700],
  13.     Colors.purple[800],
  14.     Colors.purple[900],
  15.   ];
  17.   @override
  18.   Widget build(BuildContext context) {
  19.     return Container(
  20.       height: 200,
  21.       child: CupertinoScrollbar(
  22.         child: ListView(
  23.           padding: EdgeInsets.symmetric(horizontal: 5),
  24.           children: data
  25.               .map((color) => Container(
  26.             alignment: Alignment.center,
  27.             width: 100,
  28.             height: 50,
  29.             color: color,
  30.             child: Text(
  31.               colorString(color),
  32.               style: TextStyle(color: Colors.white, shadows: [
  33.                 Shadow(
  34.                     color: Colors.black,
  35.                     offset: Offset(.5, .5),
  36.                     blurRadius: 2)
  37.               ]),
  38.             ),
  39.           ))
  40.               .toList(),
  41.         ),
  42.       ),
  43.     );
  44.   }
  46.   String colorString(Color color) =>
  47.       "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
  48. }