How To Use Shared Preference In This Todo App Code? - flutter

Question

import 'package:flutter/material.dart';
import '../main.dart';
import 'colors.dart';
import 'todo_item.dart';
import 'todo.dart';
import 'package:shared_preferences/shared_preferences.dart';
class Toodoo extends StatefulWidget {
const Toodoo({Key? key}) : super(key: key);
#override
State<Toodoo> createState() => _ToodooState();
}
class _ToodooState extends State<Toodoo> {
final todosList = ToDo.todoList();
List<ToDo> _foundToDo = [];
final _todoController = TextEditingController();
final GlobalKey<ScaffoldState> _key = GlobalKey();
String ""
#override
void initState() {
_foundToDo = todosList;
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
key: _key,
appBar: AppBar(
leading: IconButton(
icon: const Icon(Icons.menu, color: Colors.black),
onPressed: () => _key.currentState!.openDrawer(),
),
backgroundColor: const Color(0xff346594),
title: const Text("ToDos", style: TextStyle(color: Colors.black)),
),
backgroundColor: tdBGColor,
body: Stack(
children: [
Container(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 15,
),
child: Column(
children: [
searchBox(),
Expanded(
child: ListView(
children: [
Container(
margin: const EdgeInsets.only(
top: 50,
bottom: 20,
),
child: const Text(
'All ToDos',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
),
),
),
for (ToDo todo in _foundToDo.reversed)
ToDoItem(
todo: todo,
onToDoChanged: _handleToDoChange,
onDeleteItem: _deleteToDoItem,
),
],
),
)
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: Row(children: [
Expanded(
child: Container(
margin: const EdgeInsets.only(
bottom: 20,
right: 20,
left: 20,
),
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 5,
),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: const [
BoxShadow(
color: Colors.grey,
offset: Offset(0.0, 0.0),
blurRadius: 10.0,
spreadRadius: 0.0,
),
],
borderRadius: BorderRadius.circular(10),
),
child: TextField(
controller: _todoController,
decoration: const InputDecoration(
hintText: 'Add a new todo item',
border: InputBorder.none),
),
),
),
Container(
margin: const EdgeInsets.only(
bottom: 20,
right: 20,
),
child: ElevatedButton(
onPressed: () {
_addToDoItem(_todoController.text);
},
style: ElevatedButton.styleFrom(
backgroundColor: tdBlue,
minimumSize: const Size(60, 60),
elevation: 10,
),
child: const Text('+', style: TextStyle(fontSize: 40),),
),
),
]),
),
],
),
drawer: const Navigation(),
);
}
void _handleToDoChange(ToDo todo) {
setState(() {
todo.isDone = !todo.isDone;
});
}
void _deleteToDoItem(String id) {
setState(() {
todosList.removeWhere((item) => item.id == id);
});
}
void _addToDoItem(String toDo) async{
final sp = await SharedPreferences.getInstance();
setState(() {
todosList.add(ToDo(
id: DateTime.now().millisecondsSinceEpoch.toString(),
todoText: toDo,
));
});
sp.setString(id, todo)
_todoController.clear();
}
void _runFilter(String enteredKeyword) {
List<ToDo> results = [];
if (enteredKeyword.isEmpty) {
results = todosList;
} else {
results = todosList
.where((item) => item.todoText!
.toLowerCase()
.contains(enteredKeyword.toLowerCase()))
.toList();
}
setState(() {
_foundToDo = results;
});
}
Widget searchBox() {
return Container(
);
}
}
I am trying to save todo data locally, using shared preferences but don't know how to implement this, any help on this will be appreciated.Shared preferences is the best thing to use in such apps, so that's why I am using shared preference instead of firebase.
I have initialized Shared preferences in future but the thing is how to read and show the data with the controller given above the code.

Answer 1

Use Hive database or sqflite to save such kind of data(Good practice).You should use shared preference to store small bunch of data.

Answer 2

Yeah, shared preference is a good way to store data permanently on the local device. I can suggest you one way of doing this.
You need to create only one key (and value), and the value would be a stringified array. Every time user created new todo, you first need to pull the previous array, parse it to JSON, push the latest todo in that array, and set the key value again.
This array will also help you if you want to show the user all the todos by pulling the data only from one key, cause all the todos will the store in one array.
var todos = [
{
"id": "",
"todoText": "''"
},
{
"id": "",
"todoText": "''"
},
...
]
But you need to store stringified array, so you need to parse back to JSON after get data from shared preferences