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

Question

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?

Answer 1

The fix was to swap the Center and Scrollbar widgets.

Before:

Center
  Scrollbar
    ConstrainedBox

After:

Scrollbar
  Center
    ConstrainedBox

https://dartpad.dev/09ddf64d254b0c331920cf970acc4447

Answer 2

It is necessary that this GridView to have exactly 400px in width? If this is not necessary you can set the width of your ConstrainedBox like:

width: MediaQuery.of(context).size.width,

Then the GridView will have the exact size as your screen, so in consequence th scroll bar will be where you want it to be.