I am trying to achieve a dynamic GridView that shows some specific data for a particular date. And in between those dynamic grids, I want to put the dates first and then fetch the dynamic grid data for that date. While I am not done with the dynamic logic for the dates, I am unable to handle the scroll within the GridView.

I tried putting NeverScrollableScrollPhysics in the GridView.builder and that is removing the scroll but the parent screen is not scrollable. If I add SingleChildScrollView on the parent, I am getting a blank screen.

I also tried replacing Column with ListView but that is not working, a blank screen appears.

import 'package:flutter/material.dart';

class Calendar extends StatefulWidget {
  Calendar({Key? key}) : super(key: key);

  @override
  State<Calendar> createState() => _CalendarState();
}

class _CalendarState extends State<Calendar> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 15,
          width: double.infinity,
          color: Colors.amber,
          child: const Text(
            '01-Jan-2023',
            textAlign: TextAlign.center,
          ),
        ),
        Flexible(
          fit: FlexFit.tight,
          child: buildDateView(4),
        ),
        Container(
          height: 15,
          width: double.infinity,
          color: Colors.amber,
          child: const Text(
            '02-Jan-2023',
            textAlign: TextAlign.center,
          ),
        ),
        Flexible(
          fit: FlexFit.tight,
          child: buildDateView(1),
        ),
        Container(
          height: 15,
          width: double.infinity,
          color: Colors.amber,
          child: const Text(
            '03-Jan-2023',
            textAlign: TextAlign.center,
          ),
        ),
        Flexible(
          fit: FlexFit.tight,
          child: buildDateView(7),
        ),
      ],
    );
  }

  Widget buildDateView(int tileCount) {
    return GridView.builder(
      physics:
          NeverScrollableScrollPhysics(), // If I remove this, only the grid objects are scrolling independently, not with the whole screen
      itemCount: tileCount,
      gridDelegate:
          const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
      itemBuilder: (context, index) => Card(
        child: GridTile(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Flexible(
                flex: 4,
                fit: FlexFit.tight,
                child: Image.network(
                  'https://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png',
                ),
              ),
              Flexible(
                flex: 2,
                fit: FlexFit.tight,
                child: Image.network(
                  'https://images.squarespace-cdn.com/content/v1/5a72aa6df43b558aff3b5374/1605905298166-AGIDXCD4MG51RE1HLZX8/vimeo-png logo.png',
                  // fit: BoxFit.cover,
                  // width: 30,
                  // height: 30,
                ),
              ),
              Flexible(
                flex: 4,
                fit: FlexFit.tight,
                child: Image.network(
                  'https://download.logo.wine/logo/Amazon_Prime/Amazon_Prime-Logo.wine.png',
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

I am trying to have a scrollable screen but the content of the GridView should take the automatic size based on the count of grid data.

Here is the result of the above code:

Image of the screen

With NeverScrollableScrollPhysics I am losing some data as the page is trying to fit to the mobile screen. Any pointers will really help, Thanks.

CodePudding user response：

do this:

class Calendar extends StatefulWidget {
  @override
  State<Calendar> createState() => _CalendarState();
}

class _CalendarState extends State<Calendar> {
  @override
  Widget build(BuildContext context) {
    return ListView(//<--- add this
      children: [
        Container(
          height: 15,
          width: double.infinity,
          color: Colors.amber,
          child: const Text(
            '01-Jan-2023',
            textAlign: TextAlign.center,
          ),
        ),
        buildDateView(4), //<--- change this
        Container(
          height: 15,
          width: double.infinity,
          color: Colors.amber,
          child: const Text(
            '02-Jan-2023',
            textAlign: TextAlign.center,
          ),
        ),
        buildDateView(1),//<--- change this
        Container(
          height: 15,
          width: double.infinity,
          color: Colors.amber,
          child: const Text(
            '03-Jan-2023',
            textAlign: TextAlign.center,
          ),
        ),
        buildDateView(7),//<--- change this
      ],
    );
  }

  Widget buildDateView(int tileCount) {
    return GridView.builder(
      physics:
          NeverScrollableScrollPhysics(), // If I remove this, only the grid objects are scrolling independently, not with the whole screen
      itemCount: tileCount,
      gridDelegate:
          const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
      shrinkWrap: true, //<---- add this
      itemBuilder: (context, index) => Card(
        child: GridTile(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Flexible(
                flex: 4,
                fit: FlexFit.tight,
                child: Image.network(
                  'https://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png',
                ),
              ),
              Flexible(
                flex: 2,
                fit: FlexFit.tight,
                child: Image.network(
                  'https://images.squarespace-cdn.com/content/v1/5a72aa6df43b558aff3b5374/1605905298166-AGIDXCD4MG51RE1HLZX8/vimeo-png logo.png',
                  // fit: BoxFit.cover,
                  // width: 30,
                  // height: 30,
                ),
              ),
              Flexible(
                flex: 4,
                fit: FlexFit.tight,
                child: Image.network(
                  'https://download.logo.wine/logo/Amazon_Prime/Amazon_Prime-Logo.wine.png',
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}