Flutter Quick Notes App

A clean and simple Notes App built using Flutter + Riverpod + MVVM + Shared Preferences.

Features

1. Add new notes
2. Edit existing notes
3. Delete notes
4. Search notes
5. Local storage using shared_preferences
6. Clean MVVM architecture

Installation

Clone the repository:

git clone <your-repo-url>

Navigate to the project folder:

cd quick_notes

Install dependencies:

flutter pub get

Run the app:

flutter run

Or

Follow the official Flutter installation guide:

1. Create a new Flutter project

flutter create quick_notes

2. Replace the lib folder

Substitute the default lib directory with the provided tutorial codebase.

Project Structure

lib/
 ├── models/
 │     └── note.dart
 ├── services/
 │     └── storage_service.dart
 ├── view/
 │     ├── home_screen.dart
 │     └── add_edit_screen.dart
 ├── view_model/
 │     └── notes_view_model.dart
 └── main.dart

Dependencies

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.4.0
  shared_preferences: ^2.2.2
Run:
flutter pub get

Architecture (MVVM + Riverpod)

Model → Note data class

1. ViewModel → StateNotifier managing CRUD + search
2. View → UI screens listening to provider states
3. Service → Handles shared_preferences read/write

Local Storage (Shared Preferences)

Notes are saved as a JSON encoded list:

[
  {
    "id": "123",
    "title": "Sample Note",
    "content": "Hello world",
    "createdAt": "2025-01-20T10:00:00Z"
  }
]

Running the App

flutter run

Demo

Quick.Notes.mp4

About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects. You can learn more about me and my work at sufyanism.com or connect with me on Linkedin

Your all-in-one learning hub!

🚀 Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy. Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience. Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development.
➡ Visit our main site: zeba.academy
➡ Explore hands-on courses and resources at: code.zeba.academy
➡ Check out our YouTube for more tutorials: zeba.academy
➡ Follow us on Instagram: zeba.academy

Thank you for visiting!