Make A Note APP Using SQFLite

Mobile

Make A Note APP Using SQFLite

Farihah Salsabila

October 5, 2021

Halo sobat baraja coding, pada artikel kali ini kita akan membahas tentang Make a Note App Using SQFLite. Sebelum kita mulai, sebelumnya saya ingin menjelasakan kepada teman-teman. Apa itu SQFLite?. SQFLite merupakan pergabungan antara Flutter dan SQLite. SQLite merupakan sebuah Relational Database Management System (RDMS) yang tidak memerlukan server untuk beroperasi. Jadi kegunaan SQFlite sebagai plugin database pada flutter.

Step 1. Tambahkan Dependencies

Tambahkan dependencies sqflite pada pubspec.yml

dependencies:
flutter:
sdk: flutter
sqflite: ^2.0.0+4

Step 2. Buat Class Note

Buat package baru didalam lib dengan nama model lalu buat file dengan nama notes.dart tambahkan code sebagai berikut

class Notes {
int? id;
String? judul;
String? isi;

Notes({this.id, this.judul, this.isi});

Map<String, dynamic> toMap(){
var map = Map<String, dynamic>();

if(id != null){
map[‘id’]=id;
}
map[‘judul’] = judul;
map[‘isi’] = isi;
return map;
}

Notes.fromMap(Map<String, dynamic> map){
this.id = map[‘id’];
this.judul = map[‘judul’];
this.isi = map[‘isi’];
}
}

Step 3. Buat Database Db_helper

Buat package baru didalam lib dengan nama db lalu buat file dengan nama db_helper.dart tambahkan code sebagai berikut. Pada Db_helper berguna sebagai database atau penyimpan catatan yang telah tersimpan pada note app

import ‘package:notes_app/model/notes.dart’;
import ‘package:sqflite/sqflite.dart’;
import ‘package:path/path.dart’;

class DBHelper {
static final DBHelper _instance = DBHelper._internal();
static Database? _database;

final String tableName = ‘tableNotes’;
final String columnId = ‘id’;
final String columnJudul = ‘judul’;
final String columnIsi = ‘isi’;

DBHelper._internal();
factory DBHelper() => _instance;

Future<Database?> get _db async {
if (_database != null) {
return _database;
}
_database = await _initDb();
return _database;
}

Future<Database?> _initDb() async {
String databasePath = await getDatabasesPath();
String path = join(databasePath, ‘notes_db’);

return await openDatabase(path, version: 1, onCreate: _onCreate);
}

Future<void> _onCreate(Database db, int version) async {
var sql = “CREATE TABLE $tableName($columnId INTEGER PRIMARY KEY,”
“$columnJudul TEXT,”
“$columnIsi TEXT)”;
await db.execute(sql);
}

Future<int?> saveNotes(Notes notes) async {
var dbClient = await _db;
return await dbClient!.insert(tableName,notes.toMap());
}

Future<List?> getAllNotes() async {
var dbClient = await _db;
var result = await dbClient!.query(tableName, columns: [
columnId,
columnJudul,
columnIsi
]);
return result.toList();
}

Future<int?> updateNotes(Notes notes) async {
var dbClient = await _db;
return await dbClient!.update(tableName, notes.toMap(), where: ‘$columnId = ?’, whereArgs: [notes.id]);
}

Future<int?> deleteNotes(int id) async {
var dbClient = await _db;
return await dbClient!.delete(tableName, where: ‘$columnId = ?’, whereArgs: [id]);
}
}

4. Buat Note List UI

Buat package baru didalam lib dengan nama ui lalu buat file dengan nama list_notes.dart tambahkan code sebagai berikut. Pada UI List berguna untuk menampilkan list hasil catatan yang telah dibuat pada halaman utama note app

import ‘package:flutter/material.dart’;
import ‘package:notes_app/db/db_helper.dart’;
import ‘package:notes_app/model/notes.dart’;
import ‘package:notes_app/ui/detail_notes.dart’;
import ‘package:notes_app/ui/form_notes.dart’;

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

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

class _ListNotesPageState extends State<ListNotesPage> {
List<Notes> listNotes = [];
DBHelper db = DBHelper();

@override
void initState() {
_getAllNotes();
super.initState();
}

@override
Widget build(BuildContext context) {
// ui tampilan awal
return Scaffold(
appBar: AppBar(
title: Text(“Notes”),
backgroundColor: Colors.lightBlueAccent,
),
body: ListView.builder(itemCount: listNotes.length,
itemBuilder: (context, index) {
Notes notes = listNotes[index];
return Container(
child: Column(
children: [
ListTile(
onTap: () {
//edit
Navigator.push(context, MaterialPageRoute(
builder: (context) => DetailNotesPage(notes),
));
},
contentPadding: EdgeInsets.all(16),
title: Text(“${notes.judul}”, style: TextStyle(
fontSize: 18,
fontStyle: FontStyle.italic,
color: Colors.deepOrangeAccent,
),),
//overflow: TextOverflow.ellipsis(pada text…)
subtitle: Text(‘${notes.isi}’,maxLines: 1,overflow: TextOverflow.ellipsis,

),
trailing:
IconButton(onPressed: () {
_deleteNotes(notes, index);
}, icon: Icon(Icons.delete),),
leading:
IconButton(onPressed: () {
_openFormEdit(notes);
}, icon: Icon(Icons.edit),),
)
])
);
},),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
backgroundColor: Colors.lightBlueAccent,
onPressed: () {
//add
_openFormCreate();
},
),
);
}

Future<void> _getAllNotes() async {
var list = await db.getAllNotes();
setState(() {
listNotes.clear();
list!.forEach((notes) {
listNotes.add(Notes.fromMap(notes));
});
});
}

//form create
Future<void> _openFormCreate() async {
var result = await Navigator.push(
context, MaterialPageRoute(builder: (context) => FormNotes()));
if (result == ‘save’) {
await _getAllNotes();
}
}

Future<void> _deleteNotes(Notes notes, int position) async {
await db.deleteNotes(notes.id!);

setState(() {
listNotes.removeAt(position);
});
}

//form edit
Future<void> _openFormEdit(Notes notes) async {
var result = await Navigator.push(context, MaterialPageRoute(builder: (context) =>
FormNotes(notes: notes)));

if(result == ‘update’) {
await _getAllNotes();
}
}
}

5. Buat Note Form UI

Buat package baru didalam lib dengan nama ui lalu buat file dengan nama form_notes.dart tambahkan code sebagai berikut. Pada UI Form berguna sebagai tempat untuk menginsertkan atau mengupdate judul catatan dan isi catatan pada note app

import ‘package:flutter/material.dart’;
import ‘package:notes_app/db/db_helper.dart’;
import ‘package:notes_app/model/notes.dart’;

class FormNotes extends StatefulWidget {
final Notes? notes;

FormNotes({this.notes});

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

class _FormNotesState extends State<FormNotes> {
DBHelper db = DBHelper();

TextEditingController? judul;
TextEditingController? isi;

@override
void initState() {
judul = TextEditingController(
text: widget.notes == null ? ” : widget.notes!.judul);
isi = TextEditingController(
text: widget.notes == null ? ” : widget.notes!.isi);
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Notes’),
actions: [
IconButton(
onPressed: () {
upsertNotes();
},
icon: Icon(Icons.save),),
],
backgroundColor: Colors.lightBlueAccent,
),
body: Padding(
padding: EdgeInsets.only(top: 10, left: 20, right: 20),
child: ListView(
children: [
Container(
child: Column(
children: [
TextFormField(
controller: judul,
decoration:
InputDecoration(hintText: ‘Judul Catatan’),
),
SizedBox(height: 10,),
TextFormField(
controller: isi,
maxLines: 2,
decoration: InputDecoration(hintText: ‘Isi Catatan’),

),

]),
),
],
)),
);
}

//update insert notes
Future<void> upsertNotes() async {
if (widget.notes != null) {
//insert
await db.updateNotes(Notes.fromMap({
‘id’: widget.notes!.id,
‘judul’: judul!.text,
‘isi’: isi!.text,
}));
Navigator.pop(context, ‘update’);
} else {
//update
await db.saveNotes(Notes(
judul: judul!.text,
isi: isi!.text,
));
Navigator.pop(context, ‘save’);
}
}
}

6. Buat Note Detail UI

Buat package baru didalam lib dengan nama ui lalu buat file dengan nama detail_notes.dart tambahkan code sebagai berikut. Pada UI Detail berguna untuk menampilkan detail catatan yang telah tersimpan dalam note app

import ‘package:flutter/material.dart’;
import ‘package:notes_app/model/notes.dart’;

class DetailNotesPage extends StatelessWidget {

final Notes? notes;

DetailNotesPage(this.notes);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Notes’),
backgroundColor: Colors.lightBlueAccent,
),

body: Padding(
padding: EdgeInsets.all(10),
child: ListView(
children: [
Container(
padding: EdgeInsets.all(20),
width: double.infinity,
decoration: BoxDecoration(
color: Colors.black12,
borderRadius: BorderRadius.circular(10),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(‘Judul Catatan:’, style: TextStyle(
fontWeight: FontWeight.w500, fontSize: 18
),),
Text(‘${notes!.judul}’),
SizedBox(height: 20,),
Text(‘Isi Catatan:’, style: TextStyle(
fontWeight: FontWeight.w500, fontSize: 18
),),
Text(‘${notes!.isi}’),
],
),)
]),
)
);
}
}

Hasil Run :

Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat mencoba 🙂