SQLite with sqflite package in Flutter - Mini App: Build & Ship

Build: Notes List

A simple notes app screen that stores notes locally using SQLite via the sqflite package. Users can add new notes and see the list of saved notes.

Target UI

-------------------------
| Notes List            |
|-----------------------|
| + Add Note            |
|-----------------------|
| - Note 1              |
| - Note 2              |
| - Note 3              |
|                       |
-------------------------

Use sqflite package to create and manage a local SQLite database.

Create a table 'notes' with columns 'id' (integer primary key) and 'content' (text).

Display a list of saved notes from the database.

Add a FloatingActionButton with '+' icon to open a dialog for entering a new note.

Save the new note to the database and update the list immediately.

Handle database initialization asynchronously.

Use simple UI with a Scaffold, AppBar, ListView, and FloatingActionButton.

Starter Code

Flutter

import 'package:flutter/material.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: NotesListScreen(),
    );
  }
}

class NotesListScreen extends StatefulWidget {
  const NotesListScreen({super.key});

  @override
  State<NotesListScreen> createState() => _NotesListScreenState();
}

class _NotesListScreenState extends State<NotesListScreen> {
  late Database db;
  List<String> notes = [];

  @override
  void initState() {
    super.initState();
    // TODO: Initialize database and load notes
  }

  Future<void> _addNote() async {
    // TODO: Show dialog to add note and save it
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Notes List'),
      ),
      body: ListView.builder(
        itemCount: notes.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(notes[index]),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addNote,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: NotesListScreen(),
    );
  }
}

class NotesListScreen extends StatefulWidget {
  const NotesListScreen({super.key});

  @override
  State<NotesListScreen> createState() => _NotesListScreenState();
}

class _NotesListScreenState extends State<NotesListScreen> {
  late Database db;
  List<String> notes = [];

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

  Future<void> _initDb() async {
    final databasePath = await getDatabasesPath();
    final path = join(databasePath, 'notes.db');

    db = await openDatabase(
      path,
      version: 1,
      onCreate: (db, version) async {
        await db.execute('''
          CREATE TABLE notes(
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            content TEXT
          )
        ''');
      },
    );

    await _loadNotes();
  }

  Future<void> _loadNotes() async {
    final List<Map<String, dynamic>> maps = await db.query('notes');
    setState(() {
      notes = maps.map((map) => map['content'] as String).toList();
    });
  }

  Future<void> _addNote() async {
    final TextEditingController controller = TextEditingController();

    final result = await showDialog<String?>(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Add Note'),
        content: TextField(
          controller: controller,
          autofocus: true,
          decoration: const InputDecoration(hintText: 'Enter note content'),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('Cancel'),
          ),
          TextButton(
            onPressed: () {
              final text = controller.text.trim();
              if (text.isNotEmpty) {
                Navigator.pop(context, text);
              }
            },
            child: const Text('Save'),
          ),
        ],
      ),
    );

    if (result != null && result.isNotEmpty) {
      await db.insert('notes', {'content': result});
      await _loadNotes();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Notes List'),
      ),
      body: ListView.builder(
        itemCount: notes.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(notes[index]),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addNote,
        child: const Icon(Icons.add),
      ),
    );
  }
}

This app uses the sqflite package to manage a local SQLite database. In initState, it opens or creates the database file and the notes table if it doesn't exist. Then it loads all saved notes into a list.

The _addNote method shows a dialog with a text field for the user to enter a new note. When saved, the note is inserted into the database, and the list is refreshed to show the new note immediately.

The UI uses a ListView to display notes and a floating button with a plus icon to add new notes. This simple structure helps beginners understand how to connect UI with persistent local storage.

Final Result

Completed Screen

-------------------------
| Notes List            |
|-----------------------|
| + Add Note            |
|-----------------------|
| - Buy groceries       |
| - Call mom            |
| - Read Flutter docs   |
|                       |
-------------------------

Tap the '+' floating button to open a dialog with a text field.

Enter note text and tap 'Save' to add it to the list and database.

Tap 'Cancel' to close the dialog without saving.

Notes list updates immediately after adding a note.

Stretch Goal

Add the ability to delete a note by swiping it left or right in the list.

💡 Hint

Use Dismissible widget around each ListTile and remove the note from the database and list on dismiss.