Make A Note APP Using SQFLite

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 ­čÖé

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here