StaggeredGrid Not Scaling Down Properly Inside SizedBox

[archi7]

I am experiencing an issue with the StaggeredGrid widget from the flutter_staggered_grid_view package, where it does not scale down properly when placed inside a SizedBox with specified dimensions. I am working on a Calculator layout using StaggeredGrid to create a grid of buttons.

class Calculator extends StatelessWidget {
  const Calculator({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 300,
      height: 400,
      child: StaggeredGrid.count(
        crossAxisCount: 4,
        mainAxisSpacing: 18.sp,
        crossAxisSpacing: 10.sp,
        children: [
          // ... rest of the code
        ],
      ),
    );
  }
}

Upon wrapping the StaggeredGrid with a SizedBox, the content of the grid does not scale down to fit within the specified dimensions, and instead overflows out of the screen.

I tried to work around this issue using Transform.scale and it did scale the content as needed, but it is not a suitable solution since Transform.scale retains the original space of the widget, causing layout issues.

Transform.scale(
  scale: 0.8,
  child: StaggeredGrid.count(
    // ... rest of the code
  ),
)

I also attempted to use a FittedBox to address the scaling issue, but it did not produce the desired outcome:

FittedBox(
  fit: BoxFit.contain,
  child: StaggeredGrid.count(
    // ... rest of the code
  ),
)

I am seeking a way to have the StaggeredGrid and its children scale down to fit within the dimensions specified by a parent widget like SizedBox, without retaining the original space as Transform.scale does. Any guidance or recommendations for resolving this issue would be greatly appreciated.