Scrollbar with ListView shows 2 scrollbars

scrollbar_listview.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final ScrollController _firstController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return SizedBox(
            width: constraints.maxWidth / 2,
            // Only one scroll position can be attached to the
            // PrimaryScrollController if using Scrollbars. Providing a
            // unique scroll controller to this scroll view prevents it
            // from attaching to the PrimaryScrollController.
            child: Scrollbar(
              isAlwaysShown: true,
              controller: _firstController,
              child: Padding(
                padding: const EdgeInsets.all(48.0),
                child: ListView.builder(
                    controller: _firstController,
                    itemCount: 100,
                    itemBuilder: (BuildContext context, int index) {
                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('Scrollable 1 : Index $index'),
                      );
                    }),
              ),
            ),);
        });
  }
}

• Issue: flutter/flutter#99724
• Flutter version: 2.10.3
• Tested device: Mac OS Big Sur 11.6 M1
  Chrome 98.0.4758.109 (Official Build) (arm64)
• Replicable: Yes (same as author)

Screen.Recording.2022-03-08.at.7.14.37.PM.mp4

• What did I try to fix:
  Firstly I thought this issue come by he used same ScrollController for both Scrollbar and ListView. So, I tried to use different ScrollController for them, for eg:

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final ScrollController _firstController = ScrollController();
  final ScrollController _secondController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return SizedBox(
            width: constraints.maxWidth / 2,
            // Only one scroll position can be attached to the
            // PrimaryScrollController if using Scrollbars. Providing a
            // unique scroll controller to this scroll view prevents it
            // from attaching to the PrimaryScrollController.
            child: Scrollbar(
              isAlwaysShown: true,
              controller: _firstController,
              child: Padding(
                padding: const EdgeInsets.all(48.0),
                child: ListView.builder(
                    controller: _secondController,
                    itemCount: 100,
                    itemBuilder: (BuildContext context, int index) {
                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('Scrollable 1 : Index $index'),
                      );
                    }),
              ),
            ),);
        });
  }
}

This leads to this issue: flutter/flutter#97873