Repository: flutter
Issue: CupertinoScrollBar only expands when the user starts dragging
Labels: framework,a: fidelity,f: scrolling,f: cupertino,has reproducible steps,P2,found in release: 2.2,found in release: 2.3,team-design,triaged-design

<!-- Thank you for using Flutter!

     If you are looking for support, please check out our documentation
     or consider asking a question on Stack Overflow:
      * https://flutter.dev/
      * https://api.flutter.dev/
      * https://stackoverflow.com/questions/tagged/flutter?sort=frequent

     If you have found a bug or if our documentation doesn't have an answer
     to what you're looking for, then fill out the template below. Please read
     our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports
-->

## Steps to Reproduce

<!-- You must include full steps to reproduce so that we can reproduce the problem. -->

1. Run `flutter create bug`.
2. Update the files as follows: Add a SingleChildScrollView with a CupertinoScrollBar to the page. **Make sure the ScrollBar is displayed on the edge of the screen**, the issue only occurs under this condition.
<details>
<summary>main.dart</summary>

```
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: CupertinoScrollbar(
        child: SingleChildScrollView(
          child: Text(
            'beginning placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder\n\n\n\n\n\n\n\n\n\n\n\nscroll view sample\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nthe end',
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
```
</details>

3. Test on a real device **(not a simulator)**

**Expected results:** <!-- what did you want to see? -->
The CupertinoScrollBar should mimic native iOS behavior, including:

1. When a user presses the Scroll Bar, it should immediately expands and gives a haptic feedback, hinting that the bar can be dragged.
2. The movement of the Scroll Bar when being dragged should follow exactly the movement of the user's finger.
3. When the user lifts his finger from the Scroll Bar, a (different) haptic feedback should be given.

**Actual results:** <!-- what did you see? -->
1. The Scroll Bar only expands when the user **starts** dragging (instead of simply pressing). Also, the haptic feedback is slightly different from the native one. _This issue does not appear in the Simulator. Is mouse tap handled differently from finger taps?_
2. Also, it seems that CupertinoScrollBar's dragging behavior is harder to trigger than native's. A long press is needed, which is not the native behavior.
2. Sometimes the Scroll Bar can be seen moving faster than user's finger (when the ScrollView length has changed during dragging, possibly due to new contents being loaded)
3. There is no haptic feedback when the user lifts his finger.

<details>
  <summary>Logs</summary>

<!--
     Run `flutter analyze` and attach any output of that command below.
     If there are any analysis errors, try resolving them before filing this issue.
-->

```
Analyzing bug...                                                        
No issues found! (ran in 1.8s)
```

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

```
[✓] Flutter (Channel stable, 2.2.0, on macOS 11.3.1 20E241 darwin-x64, locale
    en-US)
    • Flutter version 2.2.0 at /Users/(user)/Projects/Various Tools/flutter-sdk
    • Framework revision b22742018b (8 days ago), 2021-05-14 19:12:57 -0700
    • Engine revision a9d88a4d18
    • Dart version 2.13.0

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/(user)/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /Users/(user)/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7199119/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/(user)/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7199119/Android
      Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.56.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.22.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.3.1 20E241 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 90.0.4430.212

• No issues found!
```

</details>