Save reorderable grid with GetStorage - flutter

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);
});
},
),
);
}
}