CODEWITHSUNDEEP
flutterstaggered-gridview
happyblackbob
happyblackbob

Reputation: 21

Staggered Gridview creates column of photos instead of grid

I trying to create a Staggered Gridview widget, but it's creates Column of photos instead of grid. I want to create a grid of photos with 3 photos in a row. I tried to change crossAxisCount and StaggeredTile.fit.

Here is my code for my widget:

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_svg/flutter_svg.dart';

class MyMediaWidget extends StatelessWidget {
  final List<String> images = [
    'assets/png/photo1.png',
    'assets/png/photo2.png',
    'assets/png/photo3.png',
    'assets/png/photo4.png',
    'assets/png/photo5.png',
    'assets/png/photo6.png',
    'assets/png/photo7.png',
    'assets/png/photo8.png',
    'assets/png/photo9.png',
  ];
  @override
  Widget build(BuildContext context) {
    return StaggeredGridView.countBuilder(
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      physics: ScrollPhysics(),
      crossAxisCount: 3,
      itemCount: images.length,
      itemBuilder: (BuildContext context, int index) => Stack(
        children: [
          ClipRRect(
            child: Image.asset(
              images[index],
            ),
            borderRadius: BorderRadius.circular(10),
          ),
          Positioned(
            top: 5,
            right: 5,
            child: InkWell(
              onTap: () {},
              child: SvgPicture.asset('assets/svg/close.svg', color: Color(0xFFCF6679),),
            ),
          ),
        ],
      ),
      staggeredTileBuilder: (int index) => StaggeredTile.fit(3),
      mainAxisSpacing: 10,
      crossAxisSpacing: 10,
    );
  }
}

And here is how it looks now:

Upvotes: 0

Views: 62

Answers (1)

Dan Crisan
Dan Crisan

Reputation: 137

Change StaggeredTile.fit(3), to StaggeredTile.count(1,1), (the first parameter is how much you want an item to stretch horizontally / x-axis and the second parameter is how much you want it to stretch vertically / y-axis).

It basically subdivides your cross-axis count into further more columns. So if you had 6 for cross-axis a .count(2,1) will put your 3 items on the first line each occupying 2 imaginary columns out of your 6.

Right now your code does the same thing as StaggeredTile.count(3,1) would do.

Upvotes: 0

Related Questions