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

Issue

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?

Solution

The fix was to swap the Center and Scrollbar widgets.

Before:

Center
  Scrollbar
    ConstrainedBox

After:

Scrollbar
  Center
    ConstrainedBox

https://dartpad.dev/09ddf64d254b0c331920cf970acc4447

Answered By – John Ryan

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)