How to add a List with widgets to Shared Preferences in Flutter?

Question

How do i save List of widgets data into the users phone offline without using online.Can I use shared preferences to save data List of widgets or is there any other method.What actually I was doing is I want to save the list and show again when user returns back to my app but now the app forgets data with empty list.

class AlarmData extends ChangeNotifier {
    List<Alarm> _alarms = [
        Alarm(time:'04:05:06'),
        Alarm(time:'04:05:06'),
        Alarm(time:'04:05:06'),
    ];

    UnmodifiableListView<Alarm> get alarms{
        return UnmodifiableListView(_alarms);
    }

    void addAlarm(String newTaskTitle) {
        final task = Alarm(time: newTaskTitle);
        _alarms.add(task);
        notifyListeners();
    }

    void updateAlarm(Alarm task) {
        task.toggleDone();
        notifyListeners();
    }

    void deleteAlarm(Alarm task) {
        _alarms.remove(task);
        notifyListeners();
    }

    int get alarmCount {
        return alarms.length;
    }
}

Thanks in advance I am new to flutter development.

Answer 1

One way I could think of is encoding them as Json and saving them as String in either sharedPreferences or as a file in the app directory (using path_provider)

class Alarm{
  final String time;
  Alarm({this.time});

  @override
  toString(){
    return 'time: $time';
  }

  Map<String, dynamic> toJson() => {
    'time': this.time
  };

  factory Alarm.fromJson(Map<String, dynamic> alarm) => Alarm(
    time: alarm["time"],
  );

}

your class Alarm need fromJson and toJson to made the encoding/decoding correctly. I don't know if it has other parameters but you could add them easy in the constructor and the from/to Json

//You could put this method inside AlarmData if you want to save it everytime you update your changeNotifier
Future<void> saveAlarms(List<Alarm> alarms) async{
  //Option 1 using SharedPreferences
  final SharedPreferences preferences = await SharedPreferences.getInstance();
  final String jsonEncoded = json.encode(alarms);
  await preferences.setString('MyAlarms', jsonEncoded);

  //Option 2 saving a json file in the documentsDirectory of the App
  final Directory appDocDir = await getApplicationDocumentsDirectory();
  final file = File('${appDocDir.path}/MyAlarms.json');
  await file.writeAsString(jsonEncoded);
}

Future<List<Alarm>> get retrieveAlarms async{
  //Option 1 using SharedPreferences
  final SharedPreferences preferences = await SharedPreferences.getInstance();
  final String myAlarms = await preferences.getString('MyAlarms');
  if(myAlarms?.isEmpty ?? true) return <Alarm>[]; //check for null or empty values

  final alarms = json.decode(myAlarms) as List;
  return List<Alarm>.from(alarms.map((x) => Alarm.fromJson(x)));

  //Option 2 saving a json file in the documentsDirectory of the App
  final Directory appDocDir = await getApplicationDocumentsDirectory();
  final readFile = File('${appDocDir.path}/MyAlarms.json');
  if(!(await readFile.exists())) return <Alarm>[]; //check if the file exists
  String jsonAlarms = await readFile.readAsString();
  final jResult = jsonDecode(jsonAlarms) as List;

  return List<Alarm>.from(jResult.map((x) => Alarm.fromJson(x)));

}

now your AlarmData needs a constructor where you give it the list of alarms saved

class AlarmData extends ChangeNotifier{
  List<Alarm> _alarms;

  AlarmData(this._alarms);
  ...
}

You either complete the future retrieveAlarms in the main if you need it at the beggining of the app or just before the AlarmData

 Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final myAlarms = await retrieveAlarms;
  runApp(const HomePage(myAlarms)); //if you want to use it as soon as possible
}

If you don't mind using another package I would recommend using Hive , it allows you to store objects and primitive values (just like sharedPreferences)

@HiveType(typeId: 0)
class Alarms extends HiveObject {

  @HiveField(0)
  String time;
}

Future<void> _initHive() async {
  final appDocumentDir  = await getApplicationDocumentsDirectory();
  Hive.init(appDocumentDir.path);
  Hive.registerAdapter<Alarms>(AlarmsAdapter()); //check the documentation of hive about how to generate this file
  await Hive.openBox<Alarms>('Alarm'); //a box where all your alarms are
}

Future<void> main() async {
    WidgetsFlutterBinding.ensureInitialized();
    await _initHive(); //if you want to use it as soon as possible
    runApp(const HomePage());
}

I see your class extends ChangeNotifier, with Hive it has a Listenable option out of the box so anytime you change (add or delete an alarm) it will update

ValueListenableProvider<Box<Alarm>>.value( //in case you're using provider package
     value: Hive.box<Alarm>('Alarm').listenable(),
),

OR

ValueListenableBuilder(
    valueListenable: Hive.box<Alarm>('Alarm').listenable(), 
    builder: (context) => ...
),