Flutter | What is the Best practice of ReorderableListView with Hive?

Question

I want to preserve favorite list with Hive in Flutter application. The user can change the order of the list with ReorderableListView. But Hive seems to be sorted with its key and we cannot store the order of the list.

Basically we implement ReorderableListView with following code.

 onReorder: (int oldIndex, int newIndex) {
    setState(() {
      if (oldIndex < newIndex) {
        newIndex -= 1;
      }
      final int item = _items.removeAt(oldIndex);
      _items.insert(newIndex, item);
    });
  },

However Hive does not support insert.

What is the best practice when we want to store list data, which is reordered, with hive?

There is a similar question, but its answer will conflict with keys and flutter will output error. Flutter & Hive - How to Save Reordered List in Hive

score 0 · Answer 1 · answered May 21 '22 at 07:26

class SortStudentsPage extends StatefulWidget {
  final String title;
  final List<int> students;
  const SortStudentsPage({
    Key? key,
    required this.title,
    required this.students,
  }) : super(key: key);

  @override
  State<SortStudentsPage> createState() => _SortStudentsPageState();
}

class _SortStudentsPageState extends State<SortStudentsPage> {
  List<int> students=[];
  @override
  void initState() {
    super.initState();
    students=widget.students;
  }
  @override
  Widget build(BuildContext context) {
    int groupId = (ModalRoute.of(context)!.settings.arguments
        as Map<String, dynamic>)['id'];
    return WillPopScope(
      onWillPop: () async {
        StorageService myStorage = StorageService();
        await myStorage.setGroup(
          groupId,
          students.map((e) => e).toList(),
        );
        return Future.value(true);
      },
      child: Scaffold(
        appBar: AppBarWidget(
          title: widget.title,
          isNavigate: true,
        ),
        body: ReorderableListView.builder(
          itemBuilder: (context, index) {
            return Card(
              key: Key(students[index].toString()),
              child: ListTile(
                title: Text(students[index].toString()),
              ),
            );
          },
          itemCount: students.length,
          onReorder: (oldIndex, newIndex) {
            if (oldIndex < newIndex) {
              newIndex -= 1;
            }
            int student = students[oldIndex];
            students.removeAt(oldIndex);
            students.insert(newIndex, student);
            setState(() {});
          },
        ),
      ),
    );
  }
}

Storage Service

class StorageService {
  Future<void> setGroup(int groupId, List<int> contacts) async {
    await Hive.box("groups").put("$groupId", contacts);
  }

  List<int>? getGroup(int groupId) {
    return Hive.box("groups").get('$groupId');
  }

  static Future<void> init() async {
    final appDocumentDir = await getApplicationDocumentsDirectory();
    Hive.init(appDocumentDir.path);

    await Hive.openBox("groups");
  }

main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await StorageService.init();
  runApp(const MyApp());
}

Flutter | What is the Best practice of ReorderableListView with Hive?

1 Answers1