StaggeredGridView is undefined

Question

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart'; //import libray

flutter_staggered_grid_view: ^0.5.0 // package

    Flexible(
      child: Container(
        padding: EdgeInsets.only(top: 16.0, right: 16.0, left: 16.0),
        child: StaggeredGridView.countBuilder(
          physics: NeverScrollableScrollPhysics(),
          padding: EdgeInsets.zero,
          crossAxisCount: 4,
          itemCount: products.length,
          itemBuilder: (BuildContext context, int index) => new ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(5.0)),
            child: InkWell(
              onTap: () => Navigator.of(context).push(MaterialPageRoute(
                  builder: (_) => ProductPage(product: products[index]))),
              child: Container(
                  decoration: BoxDecoration(
                    gradient: RadialGradient(
                        colors: [
                          Colors.grey.withOpacity(0.3),
                          Colors.grey.withOpacity(0.7),
                        ],
                        center: Alignment(0, 0),
                        radius: 0.6,
                        focal: Alignment(0, 0),
                        focalRadius: 0.1),
                  ),
                  child: Hero(
                      tag: products[index].image,
                      child: Image.asset(products[index].image))),
            ),
          ),
          staggeredTileBuilder: (int index) =>
              StaggeredTile.count(2, index.isEven ? 3 : 2),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
        ),
      ),
    ),

Error:

lib/screens/main/components/recommended_list.dart:51:20: Error: The getter 'StaggeredGridView' isn't defined for the class 'RecommendedList'.

• 'RecommendedList' is from 'package:mobi_zilla/screens/main/components/recommended_list.dart' ('lib/screens/main/components/recommended_list.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'StaggeredGridView'. child: StaggeredGridView.countBuilder( ^^^^^^^^^^^^^^^^^ lib/screens/main/components/recommended_list.dart:79:19: Error: The getter 'StaggeredTile' isn't defined for the class 'RecommendedList'.
• 'RecommendedList' is from 'package:mobi_zilla/screens/main/components/recommended_list.dart' ('lib/screens/main/components/recommended_list.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'StaggeredTile'. StaggeredTile.count(2, index.isEven ? 3 : 2), ^^^^^^^^^^^^^

Histamine

Answer 1

Use Version:

dependencies:
  flutter_staggered_grid_view: ^0.4.0

Rwanda

Answer 2

The pub.dev documentation for the plugin doesn't suggest anything about the method being deprecated or scrapped in the latest version i.e flutter_staggered_grid_view 0.6.1. I tried using flutter_staggered_grid_view: ^0.4.0 but that didn't work either. The workaround seems to be to use version 0.3.1 which then recognized the StaggeredGridView method.

Lentha

flutter_staggered_grid_view: ^0.4.0 worked for me – Assume

Answer 3

The flutter_staggered_grid_view was completely rewritten in its version 0.5.0-dev.1 update. You can now use StaggeredView to display a staggered view.

Example

StaggeredGrid.count(
  crossAxisCount: 4,
  mainAxisSpacing: 4,
  crossAxisSpacing: 4,
  children: const [
    StaggeredGridTile.count(
      crossAxisCellCount: 2,
      mainAxisCellCount: 2,
      child: Tile(index: 0),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 2,
      mainAxisCellCount: 1,
      child: Tile(index: 1),
    ),
  ],
);

Solutions: As mentioned in the Documentation, you can use StaggeredGrid instead of StaggeredGridView to display a staggered view. Alternately, you can revert back to older versions of the package as already mentioned. Note: StaggeredGridView is still supported in version 0.4.0

Gadolinite

Answer 4

If you want to use the latest version of flutter_staggered_grid_view can not use StaggeredGridView.countBuilder instead you have to use GridView.custom like this, it will work like charm

GridView.custom(
              padding: EdgeInsets.only(
                bottom: 16.w,
                left: 16.w,
                right: 16.w,
              ),
              gridDelegate: SliverQuiltedGridDelegate(
                crossAxisCount: 6,
                mainAxisSpacing: 8,
                crossAxisSpacing: 8,
                repeatPattern: QuiltedGridRepeatPattern.inverted,
                pattern: const [
                  QuiltedGridTile(4, 4),
                  QuiltedGridTile(2, 2),
                  QuiltedGridTile(2, 2),
                ],
              ),
              childrenDelegate: SliverChildBuilderDelegate((context, index) {
                return Container(...)
              }, 
               childCount: your_list_length
              ),
            ),

Truce

Answer 5

StaggeredGridView.countBuilder is not working package is alerady install import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

Fleshy

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Spillway