2 scroll bars present in flutter web-CodePudding

I'm having a bit of annoyance. I want a scroll bar present in my flutter web 'page' at all times, to indicate to the user that there's still some elements to view them. And I achieved this using scrollbar isAlwaysShown to true in my Theme class.

Now, when I use GridView.builder to generate elements on the screen, I must provide height constraints beforehand, or else I'll get an error that says 'height is infinite'.

The problem with this is, there are 2 scroll bars visible at all times. One from the SingleChildScrollView, and one from the GridView.builder. I need the SingleChildScrollView with the column so I can have a footer at the bottom of the page.

My question is, how can I get rid of the GridView.builder scroll bar?

Thanks in advance...

My code:

Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(),
      drawer: const DrawerWidget(),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              constraints: BoxConstraints(maxHeight: _size.height),
              margin: Responsive.isDesktop(context)
              ? const EdgeInsets.symmetric(vertical: 10)
              : null,
              padding: Responsive.isDesktop(context)
              ? desktopPadding
              : smallAndMediumPadding,
              child: GridView.builder(
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
                itemCount: 12,
                itemBuilder: (BuildContext context, int index) {
                  return GridCard(name: '', image: '');
                }
              )
            ),
            /////////////// Footer ///////////////////
            Footer()
          ]
        )
      )
    )

CodePudding user response：

Actually you can remove the BoxConstraints from your Container and to solve the height issue you have a property in GridView.builder named shrinkWrap. You just need to set it true and it will solve your height issue.

shrinkWrap: true,

and after that you may have issue with Scrolling the GridView.builder so to solve that use another property primary and set it to false

primary : false,