Building an Offline-First Multi-QR Attendance App in Flutter

If you’ve ever needed a lightweight attendance app that works even when the network doesn’t, this minimal Flutter project is a clean starting point. It focuses on offline-first data capture, shows how many records are pending sync, and keeps the UI decoupled from storage and configuration. The current version ships without camera/QR scanning on purpose—so you can wire in your preferred scanner later without fighting the architecture.

What it does (today)

Renders a simple ScanPage with a status banner (online/offline color).
Shows a pending counter via DatabaseHelper.getPendingCount().
Navigates to a History page (stub) from the AppBar.
Provides a Refresh button to reload pending counts.
Keeps camera code out of the way until you’re ready.


final DatabaseHelper _dbHelper = DatabaseHelper.instance;

void _loadPendingCount() async {
  try {
    final count = await _dbHelper.getPendingCount();
    setState(() {
      _pendingCount = count;
      _status = 'Ready - $count pending records';
    });
  } catch (e) {
    setState(() => _status = 'Database error: $e');
  }
}

Why offline-first?

In attendance scenarios (classrooms, events, workshops), network reliability is never guaranteed. An offline-first design lets you:

Capture scans instantly.
Store locally.
Sync later when connectivity returns.

This keeps the user experience snappy and the data safe.

Project layout


lib/
├─ main.dart              # UI shell (status bar, actions, refresh logic)
├─ database_helper.dart   # Persistence abstraction (e.g., sqflite)
├─ history_page.dart      # Placeholder for viewing records
└─ config.dart            # App config (flags, endpoints, keys)

Adding scanning later

When you’re ready to activate scanning, plug in one of these packages:

mobile_scanner – fast, modern, works great on iOS/Android
qr_code_scanner – popular and straightforward

Typical flow after integrating a scanner:

Detect QR code → validate payload.
Insert a local record with synced = 0.
Status bar updates with the new pending total.
Background job (e.g., Timer.periodic) syncs to your API and flips synced = 1.

Quick start

Install dependencies


flutter pub add sqflite path_provider
# Add a scanner later:
# flutter pub add mobile_scanner

Create config.dart


class AppConfig {
  static const bool startOnline = false;
  // Put API base URLs, keys, and flags here
}

Implement database_helper.dart
Start with a simple interface:


class DatabaseHelper {
  DatabaseHelper._();
  static final DatabaseHelper instance = DatabaseHelper._();

  Future<int> getPendingCount() async {
    // TODO: SELECT COUNT(*) FROM attendance WHERE synced = 0
    return 0;
  }
}

Run
```
flutter run
```

Roadmap ideas

Real online detection (replace _isOnline with actual checks).
Background sync with retry/backoff and conflict handling.
History filters (date range, synced vs. pending).
Export to CSV or secure upload to your backend.

Takeaway

This starter keeps your UI, storage, and config loosely coupled, so you can grow from “demo” to “production” without rewriting the foundation. Add a scanner and a sync routine, and you’ve got a practical, robust attendance app that doesn’t break when Wi-Fi does.