Note taking app using flutter

Creating a note-taking app in Flutter is a practical project that can help you learn about managing data, user interfaces, and persistence in Flutter.

In this example, we’ll create a basic note-taking app with the following features:

1. Display a list of saved notes.
2. Add new notes.
3. Edit existing notes.
4. Delete notes.
5. Save notes locally using Flutter’s `shared_preferences` package.

Here’s a step-by-step guide to building the note-taking app:

1. Set up a new Flutter project and add the `shared_preferences` package to your `pubspec.yaml` file as a dependency:

yaml
dependencies:
 flutter:
 sdk: flutter
 shared_preferences: ^2.0.8

Run `flutter pub get` to fetch the new dependency.

2. Replace the code in your `lib/main.dart` file with the following code:

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() {
 runApp(NoteApp());
}
class NoteApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Note Taking App',
 theme: ThemeData(
 primarySwatch: Colors.blue,
 ),
 home: NoteHomePage(),
 );
 }
}
class NoteHomePage extends StatefulWidget {
 @override
 _NoteHomePageState createState() => _NoteHomePageState();
}
class _NoteHomePageState extends State<NoteHomePage> {
 final TextEditingController _noteController = TextEditingController();
 final List<String> _notes = [];
@override
 void initState() {
 super.initState();
 _loadNotes();
 }
_loadNotes() async {
 SharedPreferences prefs = await SharedPreferences.getInstance();
 setState(() {
 _notes.addAll(prefs.getStringList('notes') ?? []);
 });
 }
_saveNotes() async {
 SharedPreferences prefs = await SharedPreferences.getInstance();
 prefs.setStringList('notes', _notes);
 }
_addNote() {
 String newNote = _noteController.text;
 if (newNote.isNotEmpty) {
 setState(() {
 _notes.add(newNote);
 });
 _noteController.clear();
 _saveNotes();
 }
 }
_deleteNote(int index) {
 setState(() {
 _notes.removeAt(index);
 });
 _saveNotes();
 }
@override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('Note Taking App'),
 ),
 body: Column(
 children: <Widget>[
 Expanded(
 child: ListView.builder(
 itemCount: _notes.length,
 itemBuilder: (context, index) {
 return ListTile(
 title: Text(_notes[index]),
 trailing: IconButton(
 icon: Icon(Icons.delete),
 onPressed: () => _deleteNote(index),
 ),
 );
 },
 ),
 ),
 Padding(
 padding: EdgeInsets.all(8.0),
 child: TextField(
 controller: _noteController,
 decoration: InputDecoration(
 labelText: 'Add a new note',
 suffixIcon: IconButton(
 icon: Icon(Icons.add),
 onPressed: _addNote,
 ),
 ),
 ),
 ),
 ],
 ),
 );
 }
}

In this code:

- We use the `shared_preferences` package to save and load notes as a list of strings.
- `_loadNotes()` retrieves saved notes when the app starts.
- `_saveNotes()` saves the current list of notes.
- `_addNote()` adds a new note to the list.
- `_deleteNote(index)` removes a note from the list.

Run the app using `flutter run`

You now have a basic note-taking app that allows you to add, delete, and display notes. It uses shared preferences to persist data locally. You can further improve this app by enhancing the user interface, adding the ability to edit notes, or implementing more advanced data storage options like SQLite or Firebase.

I hope you’re enjoying my Flutter blogs and finding valuable insights into the world of app development. Your support means the world to me!

For real-time updates, discussions, and more Flutter goodness, don’t forget to follow me on Twitter! Let’s connect, share ideas, and explore the vast possibilities of Flutter together.

👉 Follow me on Twitter: Nikhil Soman Sahu

Stay tuned for the latest Flutter tips, tricks, and tutorials. Your journey to Flutter excellence is just a tweet away!

Happy coding and Fluttering!