Lab7 Datapersistencewithsqlite
Lab7 Datapersistencewithsqlite
Introduction
SQLite is a fast relational database that can be used to store data offline for mobile applications.
Whenever you need to store the data on the local then you need to use SQLite to persist the user data.
CRUD means create, read, update, and delete, the four essential operations of persistent storage.
Before using SQLite, you should know that SQLite is not available in a flutter SDK like Android but
we have a plugin sqflite that exactly performs all the operation on the database just like in Android and
iOS.
In this lab activity, we are going to build a small Flutter app that uses SQLite to persist data.
The app we are going to make is an offline diary that lets users
record the activities they did during the day. For simplicity’s sake,
we will call each of these activities a “journal” or an “item”.
The app has a floating button that can be used to show a bottom
sheet. That bottom sheet contains 2 text fields corresponding to
“title” and “description”. These text fields are used to create a new
“item” or update an existing “item”.
The saved “items” are fetched from the SQLite database and
displayed with a list view. There are an update button and a delete
button associated with each “item”.
Database Structure
We are going to create an SQLite database called jurnal.db. It has only a single table named items.
Below is the structure of the table:
Column Type Description
id INTEGER The id of an activity
title TEXT The name of an activity
description TEXT The detail of an activity
createdAt TIMESTAMP The time that the item was created. It will be automatically added by SQLite
Implementation
1. Create a new Flutter project.
2. Install the sqflite plugin (note that the name has an “f”). Run the following line at Terminal window:
//...
dependencies:
flutter:
sdk: flutter
dev_dependencies:
//...
3. In the lib folder, add a new file named sql_helper.dart. The project structure are as follows:
.
├── main.dart
└── sql_helper.dart
4. Create the table. We need to create a table to store information. For example, in our case, we create
a table called items that defines the data that can be stored. In this case, each item contains an id,
title, description and createdAt. Therefore, these will be represented as four columns in the
items table.
8. Updating data
final data = {
'title': title,
'description': descrption,
'createdAt': DateTime.now().toString()
};
final result =
await db.update('items', data, where: "id = ?", whereArgs: [id]);
return result;
}
9. Deleting data
class SQLHelper {
static Future<void> createTables(sql.Database database) async {
await database.execute("""CREATE TABLE items(
id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
title TEXT,
description TEXT,
createdAt TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP)"""
);
}
// Update an item by id
static Future<int> updateItem(
int id, String title, String? descrption) async {
final db = await SQLHelper.db();
final data = {
'title': title,
'description': descrption,
'createdAt': DateTime.now().toString()
};
final result =
await db.update('items', data, where: "id = ?", whereArgs: [id]);
return result;
}
Faculty of Computer Science and Information Technology
BIM30603/BIT34102 Mobile Application Development
Semester 1 2022/2023
// Delete
static Future<void> deleteItem(int id) async {
final db = await SQLHelper.db();
try {
await db.delete("items", where: "id = ?", whereArgs: [id]);
} catch (err) {
debugPrint("Something went wrong when deleting an item: $err");
}
}
}
void main() {
runApp(const MyApp());
}
@override
Widget build(BuildContext context) {
return MaterialApp(
// Remove the debug banner
debugShowCheckedModeBanner: false,
title: 'My Jurnal',
theme: ThemeData(
primarySwatch: Colors.purple,
),
home: const HomePage());
}
}
@override
_HomePageState createState() => _HomePageState();
}
@override
void initState() {
super.initState();
_refreshJournals(); // Loading the diary when the app starts
}
Faculty of Computer Science and Information Technology
BIM30603/BIT34102 Mobile Application Development
Semester 1 2022/2023
showModalBottomSheet(
context: context,
elevation: 5,
isScrollControlled: true,
builder: (_) => Container(
padding: EdgeInsets.only(
top: 15,
left: 15,
right: 15,
// this will prevent the soft keyboard from covering the text fields
bottom: MediaQuery.of(context).viewInsets.bottom + 120,
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
TextField(
controller: _titleController,
decoration: const InputDecoration(hintText: 'Title'),
),
const SizedBox(
height: 10,
),
TextField(
controller: _descriptionController,
decoration: const InputDecoration(hintText: 'Description'),
),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () async {
// Save new journal
if (id == null) {
await _addItem();
}
if (id != null) {
await _updateItem(id);
}
)
],
),
));
}
// Delete an item
void _deleteItem(int id) async {
await SQLHelper.deleteItem(id);
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
content: Text('Successfully deleted a journal!'),
));
_refreshJournals();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('My Jurnal'),
),
body: _isLoading
? const Center(
child: CircularProgressIndicator(),
)
: ListView.builder(
itemCount: _journals.length,
itemBuilder: (context, index) => Card(
color: Colors.purple[200],
margin: const EdgeInsets.all(15),
child: ListTile(
title: Text(_journals[index]['title']),
subtitle: Text(_journals[index]['description']),
trailing: SizedBox(
width: 100,
child: Row(
children: [
IconButton(
icon: const Icon(Icons.edit),
onPressed: () => _showForm(_journals[index]['id']),
),
IconButton(
icon: const Icon(Icons.delete),
onPressed: () =>
_deleteItem(_journals[index]['id']),
),
],
),
)),
),
),
Faculty of Computer Science and Information Technology
BIM30603/BIT34102 Mobile Application Development
Semester 1 2022/2023
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () => _showForm(null),
),
);
}
}
Conclusion
You’ve learned the fundamentals of SQLite and gone through an end-to-end example of using SQLite
in a Flutter app. From here, you can build more complex apps that store a lot of data offline.