Building a Simple Note App with Flutter and ObjectBox

In this tutorial, we’ll walk you through the process of creating a basic note-taking app using Flutter and ObjectBox. ObjectBox is an efficient and high-performance database for Flutter applications. By the end of this tutorial, you’ll have a working Flutter app that can create, read, update, and delete notes using ObjectBox as the database.

Prerequisites

• Flutter SDK installed on your machine
• Basic understanding of Flutter and Dart programming

Step 1: Set Up Your Flutter Project

Start by creating a new Flutter project using the following commands in your terminal:

flutter create objectbox_note_app
cd objectbox_note_app

Step 2: Add ObjectBox Dependencies

Open your pubspec.yaml file and add the ObjectBox dependencies:

dependencies:
  flutter:
    sdk: flutter
  objectbox: ^2.4.0

Run flutter pub get in the terminal to fetch and install the dependencies.

Step 3: Define the Note Model

Create a new Dart file, note_model.dart, in the lib directory. Define the Note model class with the required fields:

import 'package:objectbox/objectbox.dart';

@Entity()
class Note {
  int id;
  String title;
  String content;

  Note({this.id = 0, required this.title, required this.content});
}

Step 4: Set Up ObjectBox

In your main.dart file, initialize ObjectBox by setting up the store and generating necessary code:

import 'package:flutter/material.dart';
import 'package:objectbox/objectbox.dart';
import 'package:objectbox_note_app/note_model.dart'; // Import your Note model

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

class MyApp extends StatelessWidget {
  final Store _store = Store(getObjectBoxModel());

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ObjectBox Note App',
      home: MyHomePage(store: _store),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final Store store;

  MyHomePage({required this.store});

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

Step 5: Create UI for Note List

Create a new Dart file, note_list_screen.dart, for displaying the list of notes:

import 'package:flutter/material.dart';
import 'package:objectbox_note_app/note_model.dart'; // Import your Note model

class NoteListScreen extends StatelessWidget {
  final Store _store;

  NoteListScreen({required Store store}) : _store = store;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Note List'),
      ),
      body: Center(
        child: Text('Note List Screen'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Navigate to Note Create/Update Screen
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

Step 6: Navigate to Create/Update Note Screen

Inside the onPressed handler of the "Add" button in NoteListScreen, navigate to the create/update note screen:

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => NoteCreateUpdateScreen(store: _store),
    ),
  );
},

Step 7: Create UI for Create/Update Note

Create a new Dart file, note_create_update_screen.dart, for creating and updating notes:

import 'package:flutter/material.dart';
import 'package:objectbox_note_app/note_model.dart'; // Import your Note model

class NoteCreateUpdateScreen extends StatefulWidget {
  final Store _store;

  NoteCreateUpdateScreen({required Store store}) : _store = store;

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

class _NoteCreateUpdateScreenState extends State<NoteCreateUpdateScreen> {
  late TextEditingController _titleController;
  late TextEditingController _contentController;

  @override
  void initState() {
    super.initState();
    _titleController = TextEditingController();
    _contentController = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Create/Update Note'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _titleController,
              decoration: InputDecoration(labelText: 'Title'),
            ),
            TextField(
              controller: _contentController,
              decoration: InputDecoration(labelText: 'Content'),
            ),
            ElevatedButton(
              onPressed: () {
                // Save Note to ObjectBox
              },
              child: Text('Save'),
            ),
          ],
        ),
      ),
    );
  }
}

Step 8: Implement Save Note Functionality

In the onPressed handler of the "Save" button in NoteCreateUpdateScreen, implement the functionality to save the note to ObjectBox:

onPressed: () {
  final noteBox = widget._store.box<Note>();
  final newNote = Note(
    title: _titleController.text,
    content: _contentController.text,
  );
  noteBox.put(newNote);

  Navigator.pop(context); // Return to Note List Screen
},

Step 9: Display Notes in the List

Back in the NoteListScreen, replace the placeholder text with a ListView.builder to display the notes:

body: FutureBuilder<List<Note>>(
  future: _store.box<Note>().getAll(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasData) {
      final notes = snapshot.data!;
      return ListView.builder(
        itemCount: notes.length,
        itemBuilder: (context, index) {
          final note = notes[index];
          return ListTile(
            title: Text(note.title),
            subtitle: Text(note.content),
            onTap: () {
              // Navigate to Note Detail/Edit Screen
            },
          );
        },
      );
    } else {
      return Text('No notes available.');
    }
  },
),

Conclusion

Congratulations! You’ve successfully created a simple note-taking app using Flutter and ObjectBox. This app allows you to create, read, update, and delete notes. You can further enhance the app by adding editing and deleting functionalities, implementing a detail screen for individual notes, and improving the overall UI/UX.

Remember that this tutorial provides a basic implementation. You can expand and customize your app according to your needs and preferences. Happy coding!