This project is a simple Notes Application built with Flutter and Hive, demonstrating the use of BLoC for state management. The app allows users to add, edit, delete, and view notes efficiently.
-
Add Notes
- Add notes with a title, content, and optional color.
- Input validation is implemented for both the title and content fields.
-
View Notes
- Displays a list of all saved notes.
- If no notes are available, an empty state with a message is shown.
-
Edit Notes
- Modify the details of existing notes directly from the list.
-
Delete Notes
- Remove a single note or clear all notes.
- Confirmation dialogs ensure accidental deletions are avoided.
-
Persistent Storage
- Uses Hive for offline storage, ensuring all notes are saved and retrieved seamlessly.
-
Main Entry (
main.dart
):- Initializes Hive, registers adapters, and sets up the BLoC observer.
- Entry point of the app with a MaterialApp wrapped in a
BlocProvider
.
-
View Notes (
NotesView
):- Displays the list of notes using a
BlocBuilder
. - Provides options for adding or clearing notes via the app bar and FAB.
- Displays the list of notes using a
-
Add Notes (
AddNoteBottomSheet
&AddNoteForm
):- A bottom sheet for adding a new note.
- Includes input validation and form submission.
-
UI Widgets:
CustomerAppBar
: Customizable app bar.CustomerListBody
: Displays the list of notes.CustomerNoListBody
: UI for the empty state when no notes are available.CustomerNoteItem
: Renders individual note items.
Splash Screen | Empty Notes Screen | View Notes Screen | Edit Screen |
---|---|---|---|
Bottom Sheet Screen | Add Notes Screen | Added Notes Screen | Dialog Edit Screen | Dialog Edit Screen |
---|---|---|---|---|
- Flutter SDK installed.
Hive
andBLoC
packages included inpubspec.yaml
.- Development environment (VSCode, Android Studio, etc.).
-
Clone the repository:
git clone <repository-url> cd notes-app
-
Install dependencies:
flutter pub get
-
Run the app:
flutter run
- Flutter BLoC: State management solution.
- Hive: Lightweight and fast database for Flutter.
- intl: Formatting dates.
lib/
├── cubits/
│ ├── add_note_cubit/
│ │ ├── add_note_cubit.dart
│ │ └── add_note_state.dart
│ └── view_note_cubit/
│ ├── view_note_cubit.dart
│ └── view_note_state.dart
├── helper/
│ └── constant.dart
├── models/
│ └── note_model.dart
├── views/
│ ├── notes_view.dart
│ └── widgets/
│ ├── add_note_bottom_sheet.dart
│ ├── add_note_form.dart
│ ├── customer_appbar.dart
│ ├── customer_list_body.dart
│ ├── customer_no_list_body.dart
│ └── customer_note_item.dart
└── main.dart
-
Adding Notes:
- Tap the floating action button to open the bottom sheet.
- Fill in the title and content fields.
- Tap the "Save" button to add the note.
-
Viewing Notes:
- All notes appear on the main screen.
- If no notes exist, a placeholder message will be shown.
-
Deleting Notes:
- Tap the trash icon on the app bar to clear all notes.
Contributions are welcome! Feel free to submit a Pull Request with improvements, bug fixes, or new features.
- Fork the repository.
- Create a new branch (
git checkout -b feature/my-feature
). - Make your changes and commit (
git commit -am 'Add new feature'
). - Push to the branch (
git push origin feature/my-feature
). - Create a new Pull Request.
You’ve successfully integrated Notes App into your Flutter app! For more advanced features and customization options.
If you found this guide helpful, don’t forget to ⭐ star this repository on GitHub to show your support!
Thank you for reading!
For any questions or inquiries, feel free to reach out:
- GitHub: mohamedmagdy2301
- Email: mohammedmego15@gmail.com
This project is licensed under the MIT License - see the LICENSE file for details.