How To: Create a dynamic grid of images that isn't a GridView but scroll inside a CustomScrollView? (Flutter-Web)

Question

I'd like to create a gallery page.

I need it to grab images dynamically, like the builder method that some widgets provide...

I also would like it to wrap, and scale those images depending on the size of the device/screen.

I currently have a CustomScrollView as the main body of my page - I've been using this to place my header/navigation bar, footer, etc.

I'm pretty sure I can use a SliverGrid inside of this CustomScrollView but I can't figure out how to do it.

Here's an example of the layout and showing where I'd like the grid to go:

class GalleryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: primaryBlack,
      drawer: NavDrawer(),
      body: Scrollbar(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverNavBar(
              backgroundImage: Image.asset(
                'assets/images/cabarats_gallery.jpg',
                fit: BoxFit.cover,
              ),
              expandedHeight: 200,
            ),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  ColorBoxRow(
                    color1: primaryLightBrown,
                    color2: primaryBlack,
                    color3: primaryRed,
                    color4: primaryBrown,
                  ),
                  Column(
                    children: <Widget>[
                      SizedBox(height: 50),
                      Text(
                        "PHOTOS DE RATS",
                        style: TextStyle(
                          color: primaryTextColor,
                          fontSize: 25,
                          fontFamily: 'LemonMilk',
                        ),
                      ),
                      SizedBox(height: 50),
                    ],
                  ),

                  // DYNAMIC GRID HERE



                  // DYNAMIC GRID HERE

                  FollowBar(
                    color: primaryBrown,
                  ),
                  Footer(
                    color: primaryRed,
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

Thanks to @pskink and a few others, this is how I am creating my gallery grid.

// This creates a Stream and a List of widgets (I think) to later use in a streambuilder

Stream<List<GalleryImage>> fetchDataFromFireBase() {
  final Query reference = Firestore.instance.collection('gallery');
  return reference.snapshots().map(convert);
}

List<GalleryImage> convert(QuerySnapshot doc) {
  return doc.documents.map((f) {
    return GalleryImage(
      imageUrl: f.data['imageUrl'],
    );
  }).toList();
}

// Here is the Gallery page with StreamBuilder at the top

class GalleryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: fetchDataFromFireBase(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final data = snapshot.data;
            return Scrollbar(
              child: CustomScrollView(
                slivers: <Widget>[
                  SliverGrid(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisSpacing: 10,
                        mainAxisSpacing: 10,
                        crossAxisCount:
                            ResponsiveLayout.isLargeScreen(context) ? 5 : 3),
                    delegate: SliverChildBuilderDelegate(
                        (ctx, i) => GalleryImage(
                              imageUrl: data[i].imageUrl,
                            ),
                        childCount: data.length),
                  ),

                ],
              ),
            );
          }
          return CircularProgressIndicator();
        },
      ),
    );
  }
}

// The GalleryImage widget used buy the Grid

class GalleryImage extends StatelessWidget {
  final String imageUrl;
  const GalleryImage({
    Key key,
    this.imageUrl,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.network(
        imageUrl,
        fit: BoxFit.cover,
      ),
    ).showCursorOnHover;
  }
}