Flutter Scrollbar in vertical and horizontal axis
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
minathen
Updated on December 03, 2022Comments
-
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;
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;
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?