Issue with nested scroll when both scroll are always visible (Flutter Stable Channel)

Question

The issue is on web when we try to scroll the vertically scrollable widget which is a child of horizontally scrollable widget where scroll bar is always visible.

When we scroll the horizontally scrollable widget the scroll bar for horizontal scroll is correctly displayed as shown in picture horizontal scroll

But when we scroll the vertically scrollable widget the horizontal scrollbar disappears and new vertical scroll bar is seen at right as shown in screenshot vertical scroll

Code to reproduce the issue.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scroll Issue Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Scroll Issue Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ScrollController _horizontalController = ScrollController();

  final List<ScrollController> _verticalController = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 6; i++) {
      _verticalController.add(ScrollController());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Row(
        children: <Widget>[
          Expanded(
            child: _buildHorizontalScroll(),
          )
        ],
      ),
    );
  }

  Widget _buildHorizontalScroll() {
    return Scrollbar(
      isAlwaysShown: true,
      controller: _horizontalController,
      notificationPredicate: (predicate) {
        return predicate.depth == 0;
      },
      child: ListView.separated(
          controller: _horizontalController,
          scrollDirection: Axis.horizontal,
          itemBuilder: (context, index) => Container(
                margin: const EdgeInsets.all(30),
                width: 300,
                color: Colors.black12,
                child: Column(
                  children: [
                    Expanded(
                      child: _buildVerticalScroll(index),
                    )
                  ],
                ),
              ),
          separatorBuilder: (context, index) => const Divider(
                height: 30,
              ),
          itemCount: 6),
    );
  }

  Widget _buildVerticalScroll(int index) {
    return Scrollbar(
      scrollbarOrientation: ScrollbarOrientation.right,
      isAlwaysShown: true,
      controller: _verticalController[index],
      child: ListView.separated(
          controller: _verticalController[index],
          itemBuilder: (context, index) => Container(
                margin: const EdgeInsets.all(30),
                height: 100,
                color: Colors.green,
              ),
          separatorBuilder: (context, index) => const Divider(
                height: 30,
              ),
          itemCount: 200),
    );
  }
}

Checking the notification predicate in the horizontal scroll bar, it detects the depth of scroll as both 0 and 1 when scrolling the vertically scrollable list. Is there a workaround for this problem? The problem started to appear since the upgrade to 2.5.0 for stable channel of flutter.

Answer 1

Maybe this package will help you easily customize your thumb and scrolling track both horizontally and vertically

https://pub.dev/packages/cross_scroll