list - 使用列表可重新排序的 SliverGrid

Question

我正在尝试在 Flutter 中重新排序 Sliver 网格，该网格包含一个带有 AssetThumb 的容器，以显示保存到资产列表中的图片。

我想要做的是能够使用网格重新排列资产列表中的图像（资产），以便在项目之间的网格中移动。

我正在尝试使用这个Reordable包。

但仍然不能进行重新排序。

这是我的代码：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:multi_image_picker2/multi_image_picker2.dart';

import '../widgets/bottom_navigation_bar.dart';
import '../screens/selling_bathrooms.dart';
import '../screens/selling_home_size.dart';

class MultipleImageDemo extends StatefulWidget {
  static const routeName = '/multi-picker';

  @override
  _MultipleImageDemoState createState() => _MultipleImageDemoState();
}

class _MultipleImageDemoState extends State<MultipleImageDemo> {
  List<Asset> images = <Asset>[];

  @override
  void initState() {
    super.initState();
  }

  Future<void> loadAssets() async {
    List<Asset> resultList = <Asset>[];
    String error = 'No Error Detected';

    try {
      resultList = await MultiImagePicker.pickImages(
        maxImages: 12,
        enableCamera: true,
        selectedAssets: images,
        cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
        materialOptions: MaterialOptions(
          actionBarColor: "#abcdef",
          actionBarTitle: "Example App",
          allViewTitle: "All Photos",
          useDetailsView: false,
          selectCircleStrokeColor: "#000000",
        ),
      );
    } on Exception catch (e) {
      error = e.toString();
    }

    if (!mounted) return;

    setState(() {
      images = resultList;
    });
  }

  deleteImage(index) {
    images.removeAt(index);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            CustomScrollView(
              slivers: [
                SliverToBoxAdapter(
                  child: Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Text(
                      'Add photos of \n your home',
                      style: TextStyle(fontSize: 45),
                    ),
                  ),
                ),
                SliverToBoxAdapter(
                  child: Padding(
                    padding: const EdgeInsets.only(
                        left: 15.0, right: 15.0, bottom: 5.0),
                    child: Text(
                      'Homes are 30% more likely to sell with high quality photos.',
                      style: TextStyle(color: Colors.grey),
                    ),
                  ),
                ),
                SliverToBoxAdapter(
                  child: Padding(
                    padding: const EdgeInsets.only(
                        left: 15.0, right: 15.0, bottom: 20.0),
                    child: Text(
                      'You can only upload 12 pictures, if you need to remove a picture just tap on it.',
                      style: TextStyle(color: Colors.grey),
                    ),
                  ),
                ),
                SliverGrid(
                  delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                      return index == images.length
                          ? Center(
                              child: DecoratedBox(
                                decoration: BoxDecoration(
                                  color: Colors.grey,
                                  borderRadius: BorderRadius.circular(16),
                                  border: Border.all(
                                      color: Colors.black, width: 1.0),
                                ),
                                child: Container(
                                  margin: const EdgeInsets.all(16.0),
                                  padding: const EdgeInsets.all(8.0),
                                  height: 100,
                                  width: 100,
                                  child: IconButton(
                                    icon: Icon(
                                      Icons.add_a_photo,
                                      size: 70.00,
                                      color: Colors.white,
                                    ),
                                    onPressed: () {
                                      if (images.length < 12) {
                                        loadAssets();
                                      } else {
                                        showDialog(
                                          context: context,
                                          builder: (ctx) => AlertDialog(
                                            title:
                                                Text('Max Number of Pictures'),
                                            content: Text(
                                                'You reached the maximum number of pictures that can be uploaded (12 pictures)'),
                                            actions: [
                                              FlatButton(
                                                child: Text('Okay'),
                                                onPressed: () {
                                                  Navigator.of(ctx).pop();
                                                },
                                              ),
                                            ],
                                          ),
                                        );
                                      }
                                    },
                                  ),
                                ),
                              ),
                            )
                          : GestureDetector(
                              onTap: () {
                                deleteImage(index);
                              },
                              child: Container(
                                margin: const EdgeInsets.all(3),
                                child: AssetThumb(
                                  asset: images[index],
                                  width: 300,
                                  height: 300,
                                ),
                              ),
                            );
                    },
                    childCount: images.length + 1,
                  ),
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                  ),
                ),
              ],
            ),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 15,
                ),
                color: Colors.white,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    TextButton(
                      child: Text(
                        'Previous',
                        style: TextStyle(fontSize: 22),
                      ),
                      onPressed: () {
                        Navigator.pushNamed(
                            context, PropertyBathrooms.routeName);
                      },
                    ),
                    TextButton(
                      child: Text(
                        'Next',
                        style: TextStyle(fontSize: 22),
                      ),
                      onPressed: () {
                        Navigator.pushNamed(context, PropertySize.routeName);
                      },
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavBar(2),
    );
  }
}

关于如何通过拖动移动网格中的位置和列表上的索引来获得此功能的任何想法？

亲切的问候