Flutter Scrollbar in vertical and horizontal axis

1,646

Solution 1

To anyone who needs a solution,

https://pub.dev/packages/adaptive_scrollbar#multiple-scrollbars

Use this package.

(Thanks to MuratWeny)

Solution 2

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

cross scroll package

enter image description here

Share:
1,646
minathen
Author by

minathen

Updated on December 03, 2022

Comments

  • minathen
    minathen over 1 year

    I have two scrollbars in my flutter project for scrolling the data table. Here are the codes.

      Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    width: MediaQuery.of(context).size.width * (1 / 2),
                    height: MediaQuery.of(context).size.height * (1 / 2),
                    child: Scrollbar(
                        isAlwaysShown: true,
                        controller: _controllerOne,
                        child: SingleChildScrollView(
                            scrollDirection: Axis.vertical,
                            controller: _controllerOne,
                            child: Scrollbar(
                              controller: _controllerTwo,
                              isAlwaysShown: true,
                              child: SingleChildScrollView(
                                scrollDirection: Axis.horizontal,
                                controller: _controllerTwo,
                                child: DataTable(
                                 ...
                                ),
                              ),
                            ))))));
      }
    

    These two scrollbars are working correctly. But I can not see both of them at the same time. I mean if I write the Scrollbar with scrollDirection in vertical first it's like;

    enter image description here

    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    width: MediaQuery.of(context).size.width * (1 / 2),
                    height: MediaQuery.of(context).size.height * (1 / 2),
                    child: Scrollbar(
                        isAlwaysShown: true,
                        controller: _controllerOne,
                        child: SingleChildScrollView(
                            **scrollDirection: Axis.vertical,**
                            controller: _controllerOne,
                            child: Scrollbar(
                              controller: _controllerTwo,
                              isAlwaysShown: true,
                              child: SingleChildScrollView(
                                **scrollDirection: Axis.horizontal,**
                                controller: _controllerTwo,
                                child: DataTable(
                                 ...
                                ),
                              ),
                            ))))));
      }
    

    if I write the Scrollbar with scrollDirection in horizontal first it's like;

    enter image description here

    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    width: MediaQuery.of(context).size.width * (1 / 2),
                    height: MediaQuery.of(context).size.height * (1 / 2),
                    child: Scrollbar(
                        isAlwaysShown: true,
                        controller: _controllerOne,
                        child: SingleChildScrollView(
                            **scrollDirection: Axis.horizontal,**
                            controller: _controllerOne,
                            child: Scrollbar(
                              controller: _controllerTwo,
                              isAlwaysShown: true,
                              child: SingleChildScrollView(
                                **scrollDirection: Axis.vertical,**
                                controller: _controllerTwo,
                                child: DataTable(
                                 ...
                                ),
                              ),
                            ))))));
      }
    

    When I scroll till the end I can see the other scrollbar for both directions. But when the table is shown I need to see them both at the same time.

    Is there any solution for this?