Why local storage enables offline data in Flutter - Build It to Prove It

Build: Offline Notes

A simple notes app that saves notes locally so you can access them even without internet.

Target UI

-------------------------
| Offline Notes          |
|-----------------------|
| [Type your note here] |
|                       |
| [Save Note]           |
|-----------------------|
| Saved Notes:          |
| - Note 1              |
| - Note 2              |
|                       |
-------------------------

A TextField to enter a note

A Save button to save the note locally

A list below showing all saved notes

Notes must persist after app restart (use local storage)

App works without internet connection

Starter Code

Flutter

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: OfflineNotesScreen(),
    );
  }
}

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

  @override
  State<OfflineNotesScreen> createState() => _OfflineNotesScreenState();
}

class _OfflineNotesScreenState extends State<OfflineNotesScreen> {
  final TextEditingController _controller = TextEditingController();
  List<String> _notes = [];

  @override
  void initState() {
    super.initState();
    // TODO: Load saved notes from local storage here
  }

  void _saveNote() {
    final text = _controller.text.trim();
    if (text.isEmpty) return;
    setState(() {
      _notes.add(text);
      _controller.clear();
      // TODO: Save updated notes list to local storage here
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Offline Notes')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: const InputDecoration(
                labelText: 'Type your note here',
              ),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: _saveNote,
              child: const Text('Save Note'),
            ),
            const SizedBox(height: 20),
            const Text('Saved Notes:'),
            Expanded(
              child: ListView.builder(
                itemCount: _notes.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_notes[index]),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: OfflineNotesScreen(),
    );
  }
}

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

  @override
  State<OfflineNotesScreen> createState() => _OfflineNotesScreenState();
}

class _OfflineNotesScreenState extends State<OfflineNotesScreen> {
  final TextEditingController _controller = TextEditingController();
  List<String> _notes = [];

  @override
  void initState() {
    super.initState();
    _loadNotes();
  }

  Future<void> _loadNotes() async {
    final prefs = await SharedPreferences.getInstance();
    final savedNotes = prefs.getStringList('notes') ?? [];
    setState(() {
      _notes = savedNotes;
    });
  }

  Future<void> _saveNotes() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setStringList('notes', _notes);
  }

  void _saveNote() {
    final text = _controller.text.trim();
    if (text.isEmpty) return;
    setState(() {
      _notes.add(text);
      _controller.clear();
    });
    _saveNotes();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Offline Notes')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: const InputDecoration(
                labelText: 'Type your note here',
              ),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: _saveNote,
              child: const Text('Save Note'),
            ),
            const SizedBox(height: 20),
            const Text('Saved Notes:'),
            Expanded(
              child: ListView.builder(
                itemCount: _notes.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_notes[index]),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This app uses the shared_preferences package to save notes locally on the device. When the app starts, it loads saved notes from local storage in initState. When the user adds a note, it updates the list and saves it back to local storage.

This means the notes stay saved even if the app is closed or the device is offline. Local storage allows the app to work without internet because data is stored right on the device.

Final Result

Completed Screen

-------------------------
| Offline Notes          |
|-----------------------|
| [Type your note here] |
|                       |
| [Save Note]           |
|-----------------------|
| Saved Notes:          |
| - Buy groceries       |
| - Call mom            |
|                       |
-------------------------

User types a note in the TextField

User taps 'Save Note' button to add note to list

Notes appear below in the list

Notes remain after app restart or offline use

Stretch Goal

Add a button to clear all saved notes from local storage

💡 Hint

Use shared_preferences to remove the saved notes list and update the UI