How to add a scroll bar aside a widget without overlaying in Flutter?

Question

I am trying to add a scroll bar to a GridView in Flutter using ScrollBar widget. I want the scroll bar to be always visible. However, the scroll bar overlays (comes in front) of the grid. Is there a way to put the scroll bar to the side without overlaying?

Scaffold(
  body: Scrollbar(
    thumbVisibility: true,
    interactive: true,
    child: GridView.count(
      crossAxisCount: 5,
      crossAxisSpacing: 6,
      children: List.generate(
        100,
        (index) => Text('I am text$index'),
       ),
     ),
  ),
)

Answer 1

You can add padding to GridView to move Scrollbar aside. Like below:

   GridView.count(
      padding: const EdgeInsets.all(15),
      crossAxisCount: 5,
      crossAxisSpacing: 6,
      children: List.generate(
        100,
        (index) => Text('I am text$index'),
      ),
    ),

Hope it helps.