Features

Listing images in gridview wrapped listview gives bad performance (display optimization fails), because ListView only optimizes certain self. It does not bother to optimize its own widgets. Therefore, the elements of the GridView are excluded from this state.

In addition, StickyGridView optimizes itself and all its sub-elements and prevents delays.

pubdev link: https://pub.dev/packages/sticky_grid_view

Usage

// First, create the header list.
// And then create the Map<String, List<GridImage>> map.

List<String> headers = [
    'Flags 1',
    'Flags 2',
    'Flags 3',
    'Flags 4',
    'Flags 5',
    'Flags 6'
  ];
  Map<String, List<GridImage>> map = {};

// simple image
GridImage image = GridImage.fromAsset('image.png');
// or mapped image
GridImage image = GridImage.fromAsset(
  'image.png', // image
  128, // x
  0, // y
  128, // width
  128 // height
);

Future<void> initMap() async {
  double width = 28;
  double height = 20;
  for (int i = 0; i < headers.length; i++) {
    List<GridImage> gridImages = [];
    double y = i * height;
    int range = 5 + Random().nextInt(11);
    for (int j = 0; j < range; j++) {
      double x = j * width;
      GridImage gridImage = GridImage.fromAssetPart(
          'assets/images/all_flags.png', x, y, width, height);
      await gridImage.initUiImage();
      gridImages.add(gridItem);
    }
    map[headers[i]] = gridImages;
  }
}

Widget build(BuildContext context) {
  return StickyGridView(
      crossAxisCount: 6,
      map: map,
      headers: headers,
      onClick: (section, index) {
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text('Section: $section, index: $index , header: ${headers[section]}'), duration: const Duration(milliseconds: 500),));
      });
}