Okay, let's learn how to build a simple notes app in Flutter using Isar database! We'll keep it straightforward and focus on the core steps.

Imagine building with LEGO bricks. We'll put together small pieces to make our notes app.

What is Isar?

Think of Isar as a super-fast, lightweight box to store your notes on your phone. It's like a simple filing cabinet built right into your app. It's quicker and easier to use than some other database options.

Our App's Basic Plan:

We'll build an app that can:

Create Notes: Write down a title and some content for a note.
View Notes: See a list of all your saved notes.
Open a Note: Tap on a note in the list to read its full content.
(Optional) Delete Notes: Remove notes you don't need anymore. (We might add this if we have time!)

Steps to Build:

Let's break down the building process into simple steps:

Step 1: Set up your Flutter Project and Add Isar

Create a new Flutter project: If you don't have one already, open your terminal or command prompt and type:
```
       flutter create notes_app
 cd notes_app
```
This creates a basic Flutter app for you.
Add Isar to your project: We need to tell Flutter we want to use Isar. Open the pubspec.yaml file in your project (it's like a recipe for your app). Under the dependencies: section, add these lines:
```
       dependencies:
   flutter:
     sdk: flutter
   isar: ^3.1.0 # Use the latest version available
   isar_flutter_libs: ^3.1.0 # Make sure versions match
   path_provider: ^2.0.0 # To find where to store the database
 dev_dependencies:
   flutter_test:
     sdk: flutter
   build_runner: ^2.0.0 # Helps Isar generate code
   isar_generator: ^3.1.0 # Helps Isar generate code
```
IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Yaml

IGNORE_WHEN_COPYING_END

Explanation:
- isar, isar_flutter_libs, isar_generator: These are the Isar packages we need.
- path_provider: Helps us find a good place on the phone to store our database file.
- build_runner, isar_generator: These are tools to help Isar work smoothly with Flutter. They do some code magic for us.
Get the packages: In your terminal, run:
```
       flutter pub get
```
IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Bash

IGNORE_WHEN_COPYING_END

This downloads all the packages we added to pubspec.yaml.

Step 2: Define what a "Note" looks like to Isar

Create a note.dart file: In your lib folder, create a new file named note.dart.
Write the Note class: Inside note.dart, write this code:
```
       import 'package:isar/isar.dart';

 part 'note.g.dart'; // Important: This will be generated by Isar

 @collection
 class Note {
   Id? id; // Isar will automatically assign IDs, '?' means it can be null at first

   String? title;
   String? content;

   Note({this.title, this.content});
 }
```
IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Dart

IGNORE_WHEN_COPYING_END

Explanation:
- import 'package:isar/isar.dart';: We bring in the Isar library.
- part 'note.g.dart';: Very important! This tells Isar to generate some code for us in a file named note.g.dart. We'll create this file in the next step.
- @collection: This is like telling Isar "Hey, this Note class is something I want to store in your database."
- Id? id;: This is a unique identifier for each note. Isar will automatically give each note a number (Id). ? means it might not have an ID yet when we first create a note.
- String? title;, String? content;: These are the properties of our note – a title and the main content. ? means they can be empty (null) initially.
- Note({this.title, this.content});: This is a constructor to create new Note objects.

Step 3: Generate Isar Code

Run the code generator: In your terminal, run this command:
```
       flutter pub run build_runner build
```
IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Bash

IGNORE_WHEN_COPYING_END

Explanation:
- flutter pub run build_runner build: This command tells build_runner (which we added in pubspec.yaml) to look at our code and generate the note.g.dart file that Isar needs. Run this command every time you change your Note class or add new Isar collections!

After running this, you should see a new file note.g.dart in the same folder as note.dart. Don't edit note.g.dart directly! It's generated automatically.

Step 4: Initialize Isar in your App

Open main.dart: This is the main file of your Flutter app.

Initialize Isar in main(): Modify your main() function to look like this:

       import 'package:flutter/material.dart';
 import 'package:isar/isar.dart';
 import 'package:path_provider/path_provider.dart';
 import 'note.dart'; // Import your Note class

 late Isar isar; // Declare Isar instance globally

 void main() async {
   WidgetsFlutterBinding.ensureInitialized(); // Required for path_provider
   final dir = await getApplicationDocumentsDirectory(); // Get app's directory
   isar = await Isar.open(
     [NoteSchema], // List of your Isar collections (just Note for now)
     directory: dir.path, // Tell Isar where to store the database
   );
   runApp(const MyApp());
 }

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

   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Flutter Notes App',
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),
       home: const MyHomePage(title: 'My Notes'),
     );
   }
 }

 class MyHomePage extends StatefulWidget {
   const MyHomePage({super.key, required this.title});
   final String title;

   @override
   State<MyHomePage> createState() => _MyHomePageState();
 }

 class _MyHomePageState extends State<MyHomePage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text(widget.title),
       ),
       body: Center(
         child: const Text('Your notes will be shown here'),
       ),
       floatingActionButton: FloatingActionButton(
         onPressed: () {
           // We'll add note creation here later
         },
         tooltip: 'Add Note',
         child: const Icon(Icons.add),
       ),
     );
   }
 }

IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Dart

IGNORE_WHEN_COPYING_END

Explanation:

import 'package:isar/isar.dart';, import 'package:path_provider/path_provider.dart';, import 'note.dart';: We import necessary libraries and our Note class.
late Isar isar;: We declare a global variable isar of type Isar. late means we'll initialize it later (in main()).
WidgetsFlutterBinding.ensureInitialized();: Needed because we're using path_provider before runApp().
final dir = await getApplicationDocumentsDirectory();: path_provider helps us find the app's documents directory on the phone. This is where Isar will store the database file.
isar = await Isar.open(...): This is where we actually open the Isar database!
- [NoteSchema]: We tell Isar that we want to store Note objects (using the NoteSchema which is automatically generated in note.g.dart).
- directory: dir.path: We tell Isar to store the database in the directory we found.
runApp(const MyApp());: Starts your Flutter app as usual.

Step 5: Create a Screen to Add New Notes

Create add_note_screen.dart: In your lib folder, create a new file named add_note_screen.dart.

Write the AddNoteScreen widget:

       import 'package:flutter/material.dart';
 import 'note.dart';
 import 'main.dart'; // Import the global 'isar' instance

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

   @override
   State<AddNoteScreen> createState() => _AddNoteScreenState();
 }

 class _AddNoteScreenState extends State<AddNoteScreen> {
   final _titleController = TextEditingController();
   final _contentController = TextEditingController();

   @override
   void dispose() {
     _titleController.dispose();
     _contentController.dispose();
     super.dispose();
   }

   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: const Text('Add New Note'),
       ),
       body: Padding(
         padding: const EdgeInsets.all(16.0),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
             TextField(
               controller: _titleController,
               decoration: const InputDecoration(
                 labelText: 'Title',
                 border: OutlineInputBorder(),
               ),
             ),
             const SizedBox(height: 16),
             Expanded(
               child: TextField(
                 controller: _contentController,
                 maxLines: null, // Allows multiline input
                 expands: true, // TextField expands to fill available space
                 decoration: const InputDecoration(
                   labelText: 'Content',
                   border: OutlineInputBorder(),
                 ),
                 textAlignVertical: TextAlignVertical.top, // Align text to top
               ),
             ),
             const SizedBox(height: 24),
             ElevatedButton(
               onPressed: () async {
                 final newNote = Note()
                   ..title = _titleController.text
                   ..content = _contentController.text;

                 await isar.writeTxn(() async {
                   await isar.notes.put(newNote); // Save the note to Isar
                 });

                 Navigator.pop(context); // Go back to the previous screen
               },
               child: const Text('Save Note'),
             ),
           ],
         ),
       ),
     );
   }
 }

IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Dart

IGNORE_WHEN_COPYING_END

Explanation:

We create a StatefulWidget called AddNoteScreen.
TextEditingControllers (_titleController, _contentController) are used to get text from the TextFields.
Two TextFields for title and content.
An ElevatedButton with onPressed function:
- Creates a new Note object.
- Sets title and content from the TextField controllers.
- isar.writeTxn(() async { ... });: This is crucial! All database operations in Isar (like put, delete, update) must be done within a writeTxn (write transaction). Think of it as wrapping your database changes in a safe box.
- await isar.notes.put(newNote);: This is the Isar command to save or update a Note object in the database. isar.notes refers to the collection we defined for Note objects.
- Navigator.pop(context);: Goes back to the previous screen (the notes list) after saving.

Step 6: Display the List of Notes

Modify MyHomePageState in main.dart: Change the MyHomePageState in your main.dart file to display the notes list:

       class _MyHomePageState extends State<MyHomePage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text(widget.title),
       ),
       body: StreamBuilder<List<Note>>(
         stream: isar.notes.where().watch(fireImmediately: true), // Watch for changes in notes
         builder: (context, snapshot) {
           if (snapshot.hasData) {
             final notes = snapshot.data!;
             if (notes.isEmpty) {
               return const Center(child: Text('No notes yet. Add some!'));
             }
             return ListView.builder(
               itemCount: notes.length,
               itemBuilder: (context, index) {
                 final note = notes[index];
                 return ListTile(
                   title: Text(note.title ?? 'No Title'), // Handle null title
                   subtitle: Text(note.content ?? ''), // Handle null content
                   onTap: () {
                     // We'll add note viewing later (optional)
                   },
                 );
               },
             );
           } else if (snapshot.hasError) {
             return Center(child: Text('Error loading notes: ${snapshot.error}'));
           } else {
             return const Center(child: CircularProgressIndicator()); // Loading indicator
           }
         },
       ),
       floatingActionButton: FloatingActionButton(
         onPressed: () {
           Navigator.push(
             context,
             MaterialPageRoute(builder: (context) => const AddNoteScreen()),
           );
         },
         tooltip: 'Add Note',
         child: const Icon(Icons.add),
       ),
     );
   }
 }

IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Dart

IGNORE_WHEN_COPYING_END

Explanation:

StreamBuilder<List<Note>>: This is a widget that listens to a stream of data (in this case, a stream of List<Note> from Isar) and rebuilds the UI whenever the data changes. This is great for real-time updates in your notes list.
stream: isar.notes.where().watch(fireImmediately: true):
- isar.notes.where(): We start a query on the notes collection. where() without any conditions means "get all notes".
- .watch(fireImmediately: true): This is what creates the stream. It tells Isar to watch for any changes in the notes collection and send updates to the stream. fireImmediately: true means we get the initial list of notes right away.
builder: (context, snapshot) { ... }: The builder function is called whenever the stream has new data.
- snapshot.hasData: Checks if the stream has successfully received data.
- snapshot.data!: Gets the list of Note objects from the stream.
- ListView.builder(...): Builds a list of ListTile widgets to display each note's title and content.
- snapshot.hasError, CircularProgressIndicator(): Handle loading states and potential errors.
floatingActionButton onPressed:: Now, when you tap the "+" button, it navigates to the AddNoteScreen using Navigator.push.

Step 7: Run Your App!

Run the app: In your terminal, type:
```
       flutter run
```
IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Bash

IGNORE_WHEN_COPYING_END

Choose your device or emulator.

Congratulations! You should now have a basic notes app!

What you can do now:

Add Notes: Tap the "+" button, write a title and content, and save. Your notes should appear in the list!
View Notes List: You'll see the titles of your saved notes.

Next Steps (Optional Enhancements):

View Note Details: When you tap a note in the list, navigate to a new screen to display the full content of the note.
Edit Notes: Add an "Edit" button on the note detail screen to allow users to modify existing notes. You'll use isar.notes.put() again to update a note (Isar will automatically update if a note with the same id already exists).
Delete Notes: Add a way to delete notes (e.g., a delete icon in each ListTile or on the note detail screen). Use isar.notes.delete(note.id!) to delete a note by its ID. Remember to wrap this in isar.writeTxn().
Search/Filtering: Add a search bar to filter notes by title or content.
Styling: Make your app look prettier with better UI design and styling.

Key Points to Remember:

pubspec.yaml: Always add Isar dependencies and run flutter pub get.
note.dart: Define your Note class with @collection and @Id.
build_runner: Run flutter pub run build_runner build after changing your Note class.
main.dart: Initialize Isar in main() before runApp().
isar.writeTxn(...): Wrap all database operations (save, update, delete) in a write transaction.
StreamBuilder and isar.notes.where().watch(): Use these to display a live, updating list of notes.

This is a basic foundation. You can build upon this to create a more feature-rich and polished notes app. Have fun coding!

Notes App in Flutter with Isar database, in simple words

Subscribe to my newsletter

Singaraju Saiteja

Singaraju Saiteja