Show horizontal scrollbar to scroll horizontally

[skohan]

Is your feature request related to a problem? Please describe.
I am building a web app using flutter and for tables, I am using this package. The problem I am facing now is we are unable to show a working horizontal scrollbar on the table. If wrapped AdvancedPaginatedDataTable widget with ScrollBar widget, it shows the bar but upon dragging on it, it's not working. This feature is especially needed when a user does not have a trackpad or not working on mobile. There is no way to scroll horizontally.

Describe the solution you'd like
An inbuild scrollbar option in the widget would be great or any other solution will also help a lot for now.

Describe alternatives you've considered
No solution online working

Additional context
Need for a project to be delivered soon :(

Demo bug

[Dev-Owl]

Hey I can look into it but I would need some minimal example to make sure I debug the correct use case.
Did you check if this works for you in the meantime: #12

[skohan]

Yeah sure. Thank you for your response. Here is one demo app I have created to show the use case. Upon dragging on the scrollbar, it is not scrolling at all. It is intuitional to drag on the scrollbar for scrolling horizontally. I think it should work but it is not.

import 'package:flutter/material.dart';
import 'package:advanced_datatable/advanced_datatable_source.dart';
import 'package:advanced_datatable/datatable.dart';
import 'package:flutter/gestures.dart';

const int columsLength = 30;

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
        PointerDeviceKind.stylus,
        PointerDeviceKind.unknown,
      };
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: MyCustomScrollBehavior(),
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Advanced DataTable Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ScrollController scrollController = ScrollController();
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Testing")),
      body: SingleChildScrollView(
        controller: scrollController,
        child: Scrollbar(
          controller: scrollController,
          scrollbarOrientation: ScrollbarOrientation.bottom,
          isAlwaysShown: true,
          interactive: true,
          showTrackOnHover: true,
          notificationPredicate: (notification) {
            if (scrollController.hasClients) print("Has client");
            return notification.depth == 0;
          },
          child: AdvancedPaginatedDataTable(
            columns: List.generate(
                columsLength,
                (index) => const DataColumn(
                        label: Text(
                      "label",
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ))),
            source: ExampleSource(),
          ),
        ),
      ),
    );
  }
}

typedef SelectedCallBack = Function(String id, bool newSelectState);

class ExampleSource extends AdvancedDataTableSource<String> {
  @override
  Future<RemoteDataSourceDetails<String>> getNextPage(
      NextPageRequest pageRequest) async {
    return RemoteDataSourceDetails(30, List.generate(30, (index) => "testing"));
  }

  @override
  DataRow? getRow(int index) {
    return DataRow(
        key: UniqueKey(),
        cells: List.generate(
            columsLength, (index) => const DataCell(Text("Testing"))));
  }

  @override
  int get selectedRowCount => 30;
}
```

[Dev-Owl]

By using your example code I can drag the table horizontal or vertically without any issues. I don't see a scroll bar at all for the horizontal direction nor was I able to add one. Currently, I don't know how to help you as I have zero clue why we don't see the horizontal bar.

But I want to point out that dragging the table with my mouse, click down and move the cursor, works perfectly fine on web. It's not great but at least enables smaller screens to use it.

[skohan]

Thanks for the comment. It is scrolling when dragged on it as you mentioned, after implementing your solution. We are sticking to it for some time now.
Even I don't understand why is it showing scrollbar to me and not you. If I find any solution I'll let you know.

[EyyyDous]

Hi, I'm struggling on inserting a scrollbar. I understand that you can use a Custom ScrollBehavior and use the mouse like a finger. But my solution requires a horizontal scrollbar. Do you happen to have a solution for this?

[skohan]

Hi @EyyyDous ,
We didn't look into it after sticking to use mouse for dragging horizontally. You can check if horizontal scrollbar is getting the touch input or is it getting absorbed by widget layer above it. It seems little complicated but we don't have any solution for it as of now.

[EyyyDous]

Thanks for the swift reply, I just hope my higher-ups accept this behavior.

[Dev-Owl]

@EyyyDous and @skohan I committed a version to the main branch that shows a horizontal scroll bar at the bottom of the table.
Please check if this would work for you. You can point your pubspec to the git repo as shown below:

dependencies:
  advanced_datatable:
   git: https://github.com/Dev-Owl/advanced_datatable

[EyyyDous]

Will do. I will let you know if it would work, thank you.

[EyyyDous]

Hi @Dev-Owl , it is working great. Thank you! Will you release it on pub.dev?

EDIT:
Scroll bar only appears if I scrolled by dragging my mouse. Ideal would be to hover the mouse to see the scroll bar.

[Dev-Owl]

For sure pub.dev will get an update. Let me check if we can change the behaviour of both scrollbars to be the same. Will keep you posted.

[Dev-Owl]

Best I can do is now added, Flutter and scrolling is "special". You can set the showHorizontalScrollbarAlways to true to at least request it to be visible all time. Works well on desktop, for Web it's a bit strange once used it stays but it's now shown directly. Will prepare an update for pub.dev

[lublak]

@Dev-Owl currently i have some issues.
showHorizontalScrollbarAlways not really works.

It shows an overlap but no scrollbar.