Flutter SQLite example - CRUD Operations with ListView & sqflite plugin
Tags: flutter, sqlite, crud
Published: 2021-04-03 11:10:35

https://grokonez.com/flutter/flutter-sqlite-example-listview-crud-operations-sqflite-plugin  

Flutter SQLite example - CRUD Operations with ListView & sqflite plugin

In <a href="https://grokonez.com/android/flutter-sqlite-example-crud-sqflite-example">previous post</a>, we knew how to make SQLite CRUD Operations using sqflite plugin. In this tutorial, we're gonna build a Flutter App that allows us to make CRUD interactions with SQLite in a <code>ListView</code>.

Related Post:
- <a href="https://grokonez.com/android/flutter-listview-example-listview-builder">Flutter ListView example with ListView.builder</a>
- <a href="https://grokonez.com/android/flutter-navigator-example-navigation-send-return-data-to-from-new-screen">Flutter Navigator example – Send/Return data to/from new Screen</a>
- <a href="https://grokonez.com/android/flutter-sqlite-example-crud-sqflite-example">Flutter SQLite example – CRUD operations with sqflite plugin</a>

Firebase:
- <a href="https://grokonez.com/android/flutter-firebase-database-example-firebase-database-crud-listview">Flutter Firebase Database example – Firebase Database CRUD with ListView</a>
- <a href="https://grokonez.com/android/flutter-firestore-example-firebase-firestore-crud-operations-with-listview">Flutter Firestore example – Firebase Firestore CRUD with ListView</a>

<!--more-->
<h2>Example Overview</h2>
<h3>Goal</h3>
Our Flutter App will retrieve list of Notes from SQLite Database and show it in <code>ListView</code> widget. Then we can click on <strong>Add</strong> button to create new Note, click on a Note item to update that Note, or delete a Note with remove Button.

<img src="https://grokonez.com/wp-content/uploads/2018/07/flutter-sqlite-example-listview-sqflite-overview.png" alt="flutter-sqlite-example-listview-sqflite-overview" width="549" height="901" class="alignnone size-full wp-image-13761" />
<h3>Project Structure</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/07/flutter-sqlite-example-listview-sqflite-structure.png" alt="flutter-sqlite-example-listview-sqflite-structure" width="313" height="186" class="alignnone size-full wp-image-13760" />

- <code>Note</code> class (note.dart) is a Data Model.
- <code>DatabaseHelper</code> class (database_helper.dart) handles CRUD Operations with SQLite using sqflite plugin.
- <code>ListViewNote</code> (listview_note.dart) is a <code>StatefulWidget</code> with <code>List&#60;Note&#62;</code> is <em>state</em> variable. It shows the list using <code>ListView.builder</code>, sends/gets data to/from <code>NoteScreen</code> using <code>Navigator</code>.
- <code>NoteScreen</code> (note_screen.dart) is the user interface for adding/updating Note.
- We add sqflite dependency in <strong><em>pubspec.yaml</em></strong>.

For more detailsa about <code>ListView</code> and <code>Navigator</code>, please visit:
- <a href="https://grokonez.com/android/flutter-listview-example-listview-builder">Flutter ListView example with ListView.builder</a>
- <a href="https://grokonez.com/android/flutter-navigator-example-navigation-send-return-data-to-from-new-screen">Flutter Navigator example – Send/Return data to/from new Screen</a>
<h2>Practice</h2>

More: https://grokonez.com/flutter/flutter-sqlite-example-listview-crud-operations-sqflite-plugin