Search code examples
flutterflutter-sliverflutter-gridviewflutter-scrollbar

How to constrain the width of GridView with a Scrollbar in Flutter?

I am trying to display a scrollbar on the right-hand side of a ScrollView (a GridView in this case) but constraining the width of the scrollable area while still displaying a scrollbar on the right-hand side. I can't see how to customize the position of the scrollbar relative to the Scrollable

See this DartPad for an example.

In the example above, the ScrollBar is displayed directly to the right hand side of the GridView's children, but I would prefer to have it all the way to the right. I can't find any affordances in the GridView constructor to help me with this. Does this require a CustomScrollView or can this be achieved with a normal GridView?

example image

Solution

  • The fix was to swap the Center and Scrollbar widgets.

    Before:

    Center
  Scrollbar
    ConstrainedBox

    After:

    Scrollbar
  Center
    ConstrainedBox

    https://dartpad.dev/09ddf64d254b0c331920cf970acc4447