Flutter中SliverStaggeredGrid无法使用的问题求助

问题说明 #

开发Flutter应用时使用了SliverStaggeredGrid组件，目前该组件无法使用（已被移除），找不到替代代码；尝试降级相关依赖版本，但受Flutter依赖约束无法实现。

原SliverStaggeredGrid代码 #

SliverStaggeredGrid.countBuilder(
  staggeredTileBuilder: (c) => const StaggeredTile.count(1, 1.5),
  crossAxisCount: 2,
  mainAxisSpacing: 1,
  crossAxisSpacing: 0,
  itemBuilder: (context, index) {
    Items model = Items.fromJson(
        snapshot.data!.docs[index].data()!
            as Map<String, dynamic>);
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ItemsDesign(
        model: model,
        context: context,
      ),
    );
  },
  itemCount: snapshot.data!.docs.length,
);

项目依赖版本 #

flutter:
    sdk: flutter

# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
firebase_core: ^2.17.0
firebase_auth: ^4.10.1
cloud_firestore: ^4.9.3
firebase_storage: ^11.2.8
shared_preferences: ^2.0.11
flutter_staggered_grid_view: ^0.7.0
fluttertoast: ^8.0.8
google_fonts: ^6.1.0
hexcolor: ^3.0.1
lottie: ^2.6.0
image_picker: ^1.0.4
geolocator: ^10.1.0
geocoding: ^2.0.1
intl: ^0.18.1

当前报错 #

• Undefined name 'SliverStaggeredGrid'. Try correcting the name to one that is defined, or defining the name.
• The name 'fit' isn't a class. Try correcting the name to match an existing class.

Flutter Doctor检测结果 #

[✓] Flutter (Channel master, 3.16.0-10.0.pre.20, on macOS 14.0 23A344 darwin-arm64, locale en-TZ)
    • Flutter version 3.16.0-10.0.pre.20 on channel master at /Users/mustafa/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ec94ccff83 (31 hours ago), 2023-10-11 07:41:40 -0400
    • Engine revision bddb34b09c
    • Dart version 3.3.0 (build 3.3.0-6.0.dev)
    • DevTools version 2.28.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/mustafa/Library/Android/sdk
    • Platform android-33, build-tools 33.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A240d
    • CocoaPods version 1.13.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)

[✓] VS Code (version 1.83.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.74.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 14.0 23A344 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 117.0.5938.149

解决办法 #

方法一：切换Flutter到稳定版 #

当前使用的是master通道的预览版Flutter，可能与旧版本依赖不兼容，切换到稳定版可解决依赖冲突：

1. 执行命令：flutter channel stable
2. 执行命令：flutter upgrade
3. 重新运行项目，检查报错是否消失。

方法二：升级flutter_staggered_grid_view并适配代码 #

旧版本的flutter_staggered_grid_view已不再维护，升级到最新版本并适配新API：

1. 修改pubspec.yaml中的依赖版本：flutter_staggered_grid_view: ^2.0.0
2. 执行命令：flutter pub get
3. 将原SliverStaggeredGrid代码替换为新版本API：

StaggeredGrid.custom(
  gridDelegate: StaggeredGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    staggeredTileBuilder: (index) => const StaggeredTile.count(1, 1.5),
    mainAxisSpacing: 1,
    crossAxisSpacing: 0,
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) {
      Items model = Items.fromJson(
          snapshot.data!.docs[index].data()! as Map<String, dynamic>);
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: ItemsDesign(
          model: model,
          context: context,
        ),
      );
    },
    childCount: snapshot.data!.docs.length,
  ),
)

4. 检查代码中是否有将fit作为类名的情况，修改冲突命名以解决第二个报错。

内容的提问来源于stack exchange，提问作者Mustafa Ismailjee