Save reorderable grid with GetStorage

Question

I've some trouble when I try to save the reorderable grid after I've changed it.
It seem to work good but when i open again the app is only a grey screen.
I've added some snackbar that print the list before and after been saved with GetStorage but they are in the right order as you can see in this screenshot
imagePaths before being saved
imagePaths loaded from GetStorage
grey screen when I reopening the app

import 'package:flutter/material.dart';
import 'package:reorderable_grid_view/reorderable_grid_view.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';

void main() async {
  await GetStorage.init();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  final box = GetStorage();
  List<String> imagePaths = GetStorage().read('imagePaths') ?? [
        'remote',
        'timelapse',
        'video',
        'hdr',
        'star',
        'lightning',
        'drop',
        'vibrate',
      ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ReorderableGridView.count(
        crossAxisCount: 2,
        childAspectRatio: 1,
        children: imagePaths
            .map((String path) => Card(
                  key: ValueKey(path),
                  child: Container(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text(path),
                        SvgPicture.asset(
                          'assets/$path.svg',
                          color: Colors.red,
                        ),
                      ],
                    ),
                  ),
                ))
            .toList(),
        onReorder: (oldIndex, newIndex) async {
          String path = imagePaths.removeAt(oldIndex);
          imagePaths.insert(newIndex, path);
          setState(() {
            Get.snackbar(
              'before GetStorage:',
              '${imagePaths.toString()}',
              snackPosition: SnackPosition.BOTTOM,
            );
            box.remove('imagePaths');
            box.write('imagePaths', imagePaths);
            Get.snackbar(
              'from GetStorage:',
              '${box.read('imagePaths').toString()}',
              snackPosition: SnackPosition.BOTTOM,
            );
          });
        },
      ),
    );
  }
}

Answer 1

I solved your problem like here:

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  List imagePaths = [
    'remote',
    'timelapse',
    'video',
    'hdr',
    'star',
    'lightning',
    'drop',
    'vibrate'
  ];
  final box = GetStorage();
  final String key = 'imagePaths';

  @override
  void initState() {
    imagePaths = box.read(key);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ReorderableGridView.count(
        crossAxisCount: 2,
        childAspectRatio: 1,
        children: imagePaths
            .map((path) => Card(
                  key: ValueKey(path),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(path),
                      SvgPicture.asset(
                          'assets/$path.svg',
                          color: Colors.red,
                      ),
                    ],
                  ),
                ))
            .toList(),
        onReorder: (oldIndex, newIndex) async {
          String path = imagePaths.removeAt(oldIndex);
          imagePaths.insert(newIndex, path);
          setState(() {
            box.remove(key);
            box.write(key, imagePaths);
          });
        },
      ),
    );
  }
}